Improve performance using pre-rendering of category

Goal

Improve the performance of the brand new version powered by Astro by:

prerendering to load categories when navigating between years
lazy loading some categories to decrease the size of the page

Also, the opacity of the categories is changed during the loading to provide a better visual feedback.

Strategy

To make the Ajax request faster when loading content, we pre-render all of them at build time. That means using path parameters /[year]/[language]/[category] instead of query string parameters for Astro partials.

Also, to avoid having to build partials for the whole categories and for the extra projects displayed when pushing the "Show more" button, we combine both HTML in the same partial and use htmx hx-select to pick the relevant part, either the whole category or the extra projects

to get the whole category: hx-select="section" (because categories are rendered inside <section> tags)
to get the extra projects; hx-select=".extra-projects"

So now we have only one partial, in /[year]/[language]/[category].astro, with the following markup:

<Category
  projects={projects}
  year={year}
  language={language}
  category={category}
/>

<div class="extra-projects">
  <ProjectList
    projects={extraProjects}
    year={year}
    language={language}
    offset={offset}
    starDeltaReference={projects[0].delta}
  />
</div>

How to test

Inside a given category, switch between years, using the Previous / Next buttons and the dropdown: it should be fast and you should notice the change of opacity.

Scroll down:

the first 7 categories (until the Mobile section) are loaded eagerly
the next 5 categories are loaded lazyly (only when scrolling happens)

bestofjs / javascript-risingstars