🍡 mochi
← All demos

Isomorphic URL

import { url } from 'mochi-framework' returns the current URL on both server and client. On the server it reads from the request context; on the client it reads from window.location. Try adding ?name=mochi to the URL.

SSR snapshot (server)

href https://mochi.fast/demos/url/
origin https://mochi.fast
pathname /demos/url/
search (empty)
hash (empty) never sent to the server

Hydrated island (server)

href https://mochi.fast/demos/url/
origin https://mochi.fast
pathname /demos/url/
search (empty)
hash (empty) never sent to the server
<script>
  import UrlInfo from './UrlInfo.svelte';
</script>

<div class="sections">
  <UrlInfo label="SSR snapshot" />
  <hr />
  <UrlInfo label="Hydrated island" mochi:hydrate />
</div>
Styles
<style>
  .sections {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
  }

  hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 0;
  }
</style>