For my personal site, I recently tried to move from a classic search to integrate InstantSearch seamlessly as a progressive enhancement of my static archives pages .
It’s a progressive enhancement because:
- all content is already available in the static HTML provided by the server, and this static version already contains “filters” for content type and year/month of publication (it takes most of my build time… )
- the Algolia version is then loaded as a module, so the code can use ES6. Old browsers will not get it, but they are often on devices with lower capacities, so browsing the static version is enough, as for people with JS disabled (or unavailable) for any reason.
I tried to make the switch as seamless as possible for the user, with a stable page layout to prevent Cumulative Layout Shift.
- for example, here are the notes from November 2020: https://nicolas-hoizey.com/notes/2020/11/
- another example, if you go to the full archives page, selecting one (only one) of the content type facets will update both the URL and the selected item in the main navigation
All of this was not so easy, but with documentation, threads in this community and issues on GitHub, I managed to do it, and I’m really happy with the result.
There are still some things I would like to improve, so any advice is welcome:
- Algolia’s first results list before the user type any keyword is exactly the same as the static page (if the URL contains only a content type and/or a year/month), so I would like to NOT run the search on first hit. I know it is however necessary to get the facets values and numbers, so I would at least not replace the results list, and I didn’t find a way yet.
- When I’m on any InstantSearch page and I click an item in the navigation corresponding to one of the content types, I would like to select the related facet and deselect any other previously selected, instead of reloading the full page HTML and re-initialize InstantSearch, but I didn’t find yet how to do it.
I hope it will inspire other people to provide a great UX for navigating archives on content sites!