Islands best practices - rendering a list, and then hydrating using data from localStorage | Astro Lounge | Page 1

Hi there 🙂 I'm getting my head around islands and hydration.

Say I've got a list of music genres that I'm rendering on the page:

<ul>
  <li><a href="/genre/indie rock">indie rock</a></li>
  <li><a href="/genre/trip hop">trip hop</a></li>
  <li><a href="/genre/electronica">electronica</a></li>
</ul>

In the web app, the user can 'choose' their favourite genres. I'm using client-side localStorage for keeping track of the user's 'chosen' genres. I'm keeping this state on the client side, so that I can cache the server-rendered HTML across users.

I'm imagining that I would render the initial list of genres as SSR HTML, and then on the client side, load the chosen genres from localStorage, and add a CSS class to the chosen genres.

I found that you can make a framework component that only loads on the client side (which would take care of loading the chosen genres from localStorage) and use a 'fallback' slot for the initial SSR:

<GenresList genres={genres} client:only>
  <ul slot="fallback">
     {genres.map(genre => (
      <GenreCard data={genre} />
     )}
  </ul>
</GenresList>

Would that be the recommended way in this case? Just want to make sure I'm not missing something. Thanks!

#Islands best practices - rendering a list, and then hydrating using data from localStorage