ui-router-server / ssr / dehydrate

Function: dehydrate()

function dehydrate(transition, options?): DehydrateResult;

Defined in: dehydrate.ts:147

Draws the resolve payload from a transition that has landed, such as the one `settle` hands back: every resolved value of every state on its path, keyed by state name and token, and the state and url parameters it was drawn for.

Only the resolves a state declares with a string token are drawn. A value goes in when it is plain JSON data: null, a boolean, a string, a finite number, or an array or plain object of those, with no cycle. Anything else (a Date, a Map, a class instance, undefined, NaN) is listed in `unserializable` instead and re-runs on the client, so an adopted value never differs from the one the server resolved.

`transport` carries more. Each value that is not plain JSON data, at the top of a resolve or nested in its arrays and plain objects, is offered to each transporter in key order, and the first encoding other than false, null or undefined goes in. The payload lists where each one sits in `transported`, apart from the values, so no value of the app's own can pass for one.

A NOWAIT resolve stays with the client: it is neither awaited nor drawn, nor listed, and the client runs it as it would without a payload.

`shouldDehydrate` keeps a resolve out by choice, such as data every page shares that the client loads once from a cacheable file. It runs before any transporter, so a resolve it keeps out is not listed in unserializable; the client re-runs it on boot.

Parameters

Parameter	Type	Description
transition	Transition	a transition that has landed
options?	DehydrateOptions	which resolves the payload carries, and how it carries values beyond plain JSON

Returns

DehydrateResult

the payload, and the resolves left out of it

Examples

import type { UIRouter } from '@uirouter/core';
import { dehydrate, settle } from 'ui-router-server/ssr';

declare const router: UIRouter;
declare const path: string;

const { payload, unserializable } = dehydrate(await settle(router, path));

for (const { state, token } of unserializable)
  console.warn(`${path}: ${state}.${token} re-runs on the client`);

Keep the site-wide manifest out of every page, so the client loads it once from its own file:

import type { UIRouter } from '@uirouter/core';
import { dehydrate, settle } from 'ui-router-server/ssr';

declare const router: UIRouter;
declare const path: string;

const { payload } = dehydrate(await settle(router, path), {
  shouldDehydrate: ({ token }) => token !== 'manifest',
});

Carry a Date, and pass the same transport to seed on the client:

import type { UIRouter } from '@uirouter/core';
import { dehydrate, settle, type Transporter } from 'ui-router-server/ssr';

declare const router: UIRouter;
declare const path: string;

export const transport = {
  Date: {
    encode: (value) => value instanceof Date && value.toISOString(),
    decode: (encoded) => new Date(encoded as string),
  } satisfies Transporter<Date>,
};

const { payload } = dehydrate(await settle(router, path), { transport });