How to server-render a page

This guide shows you how to render a Picked Page on your server and hydrate it in the browser. You need a published Page and a server that renders React or Svelte.

1. Make the snapshot

Create one client for each request, then call serialize():

import { createClient } from 'picked'
import { serialize } from '@picked/client/server'
 
const client = createClient(options)
 
const snapshot = await serialize(client, {
  projectConfig,
  attributes: { location: { pathname: url.pathname } },
})

2. Embed the snapshot

const html = `
  <div id="root">${appHtml}</div>
  <script>window.__PICKED__ = ${JSON.stringify(snapshot)}</script>
`

3. Seed the client and render the slot

import { PickedProvider, ExperienceSlot } from '@picked/react'
 
export function Page({ snapshot }) {
  return (
    <PickedProvider options={options} snapshot={snapshot}>
      <ExperienceSlot name="page" />
    </PickedProvider>
  )
}

<script lang="ts">
  import { ExperienceSlot, setPickedContext } from '@picked/svelte'
 
  const { snapshot } = $props()
  setPickedContext({ options, snapshot })
</script>
 
<ExperienceSlot name="page" />

The provider seeds the client at once, so the server HTML and the first paint match.

4. Point the experience at the slot

Set the target selector of your Page experience to .picked-slot-page, then publish.

Related

• About server-side rendering — why the snapshot carries condition results.
• Server snapshot — every parameter.
• Your first server-rendered page.