Islands

DinoSsr renders server-side by default shipping no JavaScript.

Islands are Svelte components that become interactive in the browser. This is often referred to as "hydration" or "client-side render".

To create an Island add export const island = true; to the module script.

Below in an example clock.svelte Island component:

<script context="module">
  export const island = true;
</script>

<script>
  import {onMount} from 'svelte';

  export let label = '';

  let time = '';
  const update = () => {
    time = new Date().toLocaleTimeString();
  };
  update();

  onMount(() => {
    setInterval(update, 1000);
  });
</script>

<time>
  {#if label}{label}{/if}
  <b>{time}</b>
</time>

This can be imported and used as <Clock /> like a standard Svelte component.

Using <Clock /> will render:

9:39:00 AM

Using <Clock label="The time is:" /> will render:

The time is: 9:39:00 AM

Context and Props

Island components are rendered with the global route context (except serverData).

Island prop values must be JSON serializable. If an Island is nested within a parent Island it will receive props like any other child component.