Hydration Modes

<script lang="ts">
  import HydrationTarget from './HydrationTarget.svelte';
  import { files } from './files.ts';

  const sources = await loadSources(files);
</script>

<section class="mode">
  <header>
    <h2>No directive</h2>
    <p>Pure SSR — no client JavaScript is shipped for this component. It renders on the server and is inert in the browser. Best for content that never needs interactivity.</p>
  </header>
  <HydrationTarget label="<HydrationTarget />" />
</section>

<section class="mode">
  <header>
    <h2>mochi:hydrate</h2>
    <p>Eager hydration — the island ships and boots immediately when the page loads. Use for above-the-fold UI that needs to be interactive right away.</p>
  </header>
  <HydrationTarget mochi:hydrate label="<HydrationTarget mochi:hydrate />" />
</section>

<section class="mode">
  <header>
    <h2>mochi:hydrate:visible</h2>
    <p>
      Lazy hydration — the bundle and CSS are only fetched once the island scrolls into view (via an <code>IntersectionObserver</code>). The card below stays inert until you
      scroll it into the viewport.
    </p>
  </header>
  <div class="spacer">
    <p>↓ Scroll down ↓</p>
  </div>
  <HydrationTarget mochi:hydrate:visible label="<HydrationTarget mochi:hydrate:visible />" />
</section>

<section class="mode">
  <header>
    <h2>mochi:hydrate:visible</h2>
    <p>
      You can pass <code>IntersectionObserver</code> options — here
      <code>rootMargin: '200px'</code>
      starts hydration a bit before the island is actually in view.
    </p>
  </header>
  <HydrationTarget mochi:hydrate:visible={{ rootMargin: '200px' }} label={`<HydrationTarget mochi:hydrate:visible={{ rootMargin: '200px' }} />`} />
</section>

<section class="mode">
  <header>
    <h2>mochi:defer</h2>
    <p>
      Server island — the component is <em>not</em> in the initial page. A placeholder ships, then the browser fetches the rendered HTML on demand. Pair with hydrated child components
      to also hydrate parts of the island after it loads.
    </p>
  </header>
  <HydrationTarget mochi:defer mochi:hydrate label="<HydrationTarget mochi:defer mochi:hydrate />">
    <div class="placeholder">Loading from server…</div>
  </HydrationTarget>
</section>