Island Mode

fastify-vite offers experimental support for the partial hydration and islands architecture. This is inspired by the Astro framework, with some much valuable cues taken from Máximo Mussini's iles.

Although module federation is still missing, using the new packIsland function from the fastify-vite/app module it's already possible to pack any route's response as an individual island without any external JavaScript requests, just the absolute minimum to control its lazy loading.

import { packIsland, onIdle } from 'fastify-vite/app'

export const path = '/'
export const onSend = packIsland('#app', onIdle)

You can use the built-in onIdle, onMedia and onDisplay loaders or provide your own:

import { packIsland } from 'fastify-vite/app'

function loadJavaScriptOnlyAfter10Seconds (callback) {
  setTimeout(callback, 10*1000)
}

export const path = '/'
export const onSend = packIsland('#app', loadJavaScriptOnlyAfter10Seconds)

See full example here.

This functionality is framework-agnostic and also works with generate and generate-server.

TIP

The compiler backing packIsland is just a proof-of-concept. The final implementation will use ctx.modules from Vite directly rather than trying to parse out all the generated markup.