Partial hydration with Preact and Capri 🍋

This page is static, but contains some dynamic parts.

Here is a simple counter:

And here is another one, independent from the one above:

100

This island receives children as prop. They are only rendered upon build time.

Hence the code for the Paragraph component won't show up in the client bundle.

Resize your browser below 500px to hydrate this island.

Lazy Loading Examples

⬇️ Scroll down to see lazy-loaded islands ⬇️

This island uses the visible loading strategy.

Status: Not hydrated ⏳

This island uses the idle loading strategy.

Status: Not hydrated ⏳

These islands only hydrate on screens narrower than 1000px:

⬇️ Scroll down and resize your browser ⬇️

This island combines visible loading with a media query.

It only hydrates on screens smaller than 1000px.

Status: Not hydrated ⏳

This island combines idle loading with a media query.

It only hydrates on screens smaller than 1000px.

Status: Not hydrated ⏳