Server Snapshot

serialize() finds which experiences match a URL and reads their content on the server. It returns a snapshot as plain JSON, and you pass that snapshot to the client.

The `serialize(client, params)` function

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

serialize() does this. It registers the project configuration on the client at once. It evaluates the condition of each experience against attributes.location. It reads the content for each experience whose steps point at layout content. It removes the duplicate content blobs, which it finds by their IDs. It then returns a PickedSnapshot.

The content that it reads holds the entries of the steps. It also holds the entries that a reference field reaches.

Give serialize() one client for each request. It does not support two calls at the same time on one client.

serialize(client: Picked, params: SerializeParams): Promise<PickedSnapshot>

Parameters

Parameter	Type	Default	Description
`projectConfig`	`ProjectConfig`	required	The published configuration, or the preview configuration, to register and choose against.
`attributes.location`	`Partial<SerializeLocation>`	none	The URL fields that go into the selection context, such as `pathname`.
`getContent`	`SerializeGetContent`	runtime API	Your own function to read content, in place of the runtime API.
`previewToken`	`string`	none	The SDK sends this with the content request, so that preview content resolves during a preview render.
`timeoutMs`	`number`	`10000`	The limit for each content request. After the limit, the SDK skips that blob and continues.

SerializeLocation carries the URL fields href, pathname, search, hostname, origin, protocol, port, host, and hash. Pass only the fields that your conditions read.

The snapshot

interface PickedSnapshot {
  versionId: string | null
  projectConfig: ProjectConfig
  content: ContentBlob[]
  conditionResults: Record<string, boolean>
}

Field	Description
`versionId`	The project version that the snapshot was chosen against. It is `null` when the version is not known, for example in a preview.
`projectConfig`	The options that the server chose with. They travel to the client, so that the client renders against exactly the same options.
`content`	The content blobs for the chosen experiences, with the duplicates removed. It holds the entries of the steps, and every entry that a reference field reaches. The server render and the first paint in the browser therefore resolve the same pointers.
`conditionResults`	The condition results that the server kept, under a key made from the rule hash. The client then reuses the choice of the server.

The snapshot is plain JSON. Write it into your HTML response with JSON.stringify and read it back on the client.

How to server-render a page
How to render an unpublished preview
Content — how to read a content record in a component.

Server Snapshot

The serialize(client, params) function

Parameters

The snapshot

Related

The `serialize(client, params)` function