Rendering and Hydration

Seed a Picked client from the server snapshot, render your slots, and hydrate. This page covers React and Svelte.

React: PickedProvider

PickedProvider gives a client to each component below it. Its props are a union of two modes:

The provider seeds the client at once, so the server and the first paint on the client give the same markup. In the browser the provider calls client.start() from an effect. start() is idempotent, so it changes nothing on a client that already started.

import { PickedProvider, ExperienceSlot } from '@picked/react'
 
<PickedProvider options={options} snapshot={snapshot}>
  <ExperienceSlot name="page" />
</PickedProvider>

Svelte: setPickedContext

setPickedContext does the same work in the Svelte style. Call it one time at the top of the <script> block of a component. It takes the same two modes, { options, snapshot? } or { client, snapshot? }, and it returns the client.

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

Render the page component

The SDK does not connect content to a component. You own the component that a Page renders. Register it under the name that the Page uses. The Page Layout in the dashboard points at that same name. The component reads the resolved entry data through a content hook: useStepContent() in React, and getStepContent() in Svelte.

import { useStepContent } from '@picked/react/hooks'
 
export function CMSPage() {
  const content = useStepContent()
  if (!content) {
    return <p>Loading page content…</p>
  }
 
  const title = typeof content.title === 'string' ? content.title : ''
  return (
    <article>
      <h1>{title}</h1>
    </article>
  )
}

<script lang="ts">
  import { getStepContent } from '@picked/svelte/hooks'
 
  const content = getStepContent()
</script>
 
{#if $content}
  <article>
    <h1>{typeof $content.title === 'string' ? $content.title : ''}</h1>
  </article>
{:else}
  <p>Loading page content…</p>
{/if}

useStepContent() returns the data object of the entry directly. It returns null while no content is registered. getStepContent() returns a store, and you read it with $content.

Related

• How to server-render a page — the full example.
• Slots and placements