Ryan Carniato details how SolidJS achieved client-side routing with minimal JavaScript through a combination of partial hydration, recursive Islands, and server-rendered HTML partials. The approach uses Solid's hierarchical hydration IDs and a NoHydration component to isolate server-only content, while a tiny event-delegation-based router fetches and swaps only the changed nested route segments via AJAX. A micromorph-based DOM diffing step preserves client state during refreshes. The result is a SPA-like experience with as little as ~5-13kb of JavaScript, dramatically less than Next.js, Nuxt, Angular, SvelteKit, or Lit equivalents.

7m read timeFrom playfulprogramming.com
Post cover image
Table of contents
SolidStart Copy link Link copied!Accidental Islands Copy link Link copied!Hybrid Routing Copy link Link copied!Completing the Picture Copy link Link copied!Conclusion Copy link Link copied!

Sort: