Using Algolia to enhance navigation in a static site archives

Hello, I’ve been using Algolia for five years[FR] on my personal website (previously with Jekyll, now with Eleventy), and my company uses it for several clients projects.

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… :sweat_smile:)
  • 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.

Also, I manage the URL dynamically (thanks Algolia for the API) to map static navigation to the content type and/or year/month facets (and optimize for SEO):

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!

4 Likes

That’s great Nicolas! Thanks for sharing your journey with :slight_smile:

1 Like

Great Nicolas, thank for sharing! And Happy New Year!

What if we planned a call to better understand your experience and try to answer your questions.
Would be open to chat with us for 45’ in the coming days? :hugs:

Hi Marine, I don’t have much time to dive in these issues (more things I’ld like to try than issues, actually), but thanks. When I take time to do it, I’ll come back here if I need assistance.