Svelte Themes Logo Svelte Themes
Sveltekit Is Land screenshot

Sveltekit Is Land

Author Avatar Theme by Geoffrich
Updated: 3 Oct 2022
65 Stars

Partial hydration in SvelteKit using @11ty/is-land

Github Live Preview

Categories

Vite

Overview:

This article discusses an experiment using SvelteKit and @11ty/is-land to add partial hydration to a SvelteKit site. The goal is to selectively hydrate individual components instead of the entire page. The article mentions that this is currently a proof-of-concept but may be packaged for reuse in the future. It provides instructions on how to get started with using this approach and explains how it works. The article also highlights some limitations of this approach and invites suggestions for improvement.

Features:

  • Partial Hydration: The ability to selectively hydrate individual components instead of the entire page.
  • Framework Independent: @11ty/is-land is a framework independent partial hydration islands architecture implementation.
  • Component Rendering: The ability to render a specific component using the Island.svelte component provided.
  • Separate Vite Build: The need to set up a separate Vite build to bundle the island components.

Installation:

To use partial hydration with SvelteKit and @11ty/is-land, follow these steps:

  1. Create a component in the /src/lib/islands directory.
  2. On your page, import the Island.svelte component and the component you want to render inside the island.
  3. Disable client-side rendering for the page to enable partial hydration.
  4. Set up a separate Vite build to bundle the island components. Refer to the build script in the repository’s package.json for an example.
  5. Use the props component, name, props, and islandProps to configure the rendering of the component within the island.
  6. Refer to the source code for +page.svelte for a complete example.

Summary:

This article explores the use of SvelteKit and @11ty/is-land to implement partial hydration in a SvelteKit site. It provides instructions on how to get started with using this approach and explains the process of rendering components within islands. The article also highlights some limitations of this approach and invites suggestions for improvement.