+

Next.js + Turbo + granular hydration

Next.js: to generate the website.

Hotwire Turbo: to enable SPA like navigation

Component-level hydration only when *you* choose

Check out the first example below. It's a giant page of HTML generated via an MDX page in Next.js - but it incurs ZERO hydration costs when it loads.

We're not opting out of JS though, half way down the page there's a gallery that was built with React - when this happens Preact will hydrate JUST that component, meaning perf remains great

Examples: