Getting started

WARNING

Experimental — SSR Managed Data Mode. This documentation covers the new vite-based SSR Managed Data Mode. This is available for experimentation. See Webpack SSR for existing production support.

Server-side rendering builds an isomorphic React app that renders on the server for each request, then hydrates in the browser.

This path uses Managed Data Mode. sku owns the HTTP server, HTML document, streaming, hydration, and CSP headers. It wires React Router Data Mode for routing and data. You own pages, data, and providers.

CAUTION

Experimental — not for production. Managed Data Mode SSR is available for evaluation and testing. Do not use it in production yet; the API and behaviour may change. In the meantime, continue using Webpack SSR.

Scaffold a new app

bash

$ pnpm dlx @sku-lib/create my-app --template=ssr
$ cd my-app
$ pnpm start

Or in the current directory:

bash

$ pnpm dlx @sku-lib/create . --template=ssr
$ pnpm start

Interactive create also offers SSR as a choice alongside Static.

What’s in the scaffold

After scaffolding you get three app entries:

src/server.tsx — server setup (middleware, optional getters)
src/client.tsx — hydrate-time setup
src/routes.tsx — your React Router route tree

The template also sets up a root layout (for providers like Braid), page modules under src/pages/, and typed hooks via createSkuContexts from sku/runtime.

Configuration

Minimum SSR config:

import type { SkuConfig } from 'sku';

export default {
  bundler: 'vite',
  buildType: 'ssr',
  publicPath: '/',
  port: 3000,
} satisfies SkuConfig;

See Configuration for all options.

Unsupported configuration

Because sku owns more of the server and build in Managed Data Mode SSR, these options are not supported and are not planned:

Absolute publicPath (for example https://seekcdn.com/*)
public assets folder
dangerouslySetViteConfig
vitePlugins

For exceptional requirements raise a query via support.

Next steps

Routing — add pages
Request entries — middleware and per-request getters
Providers — pass values into React
Data loading — fetch page content
Deploy to production — when you’re ready to ship
Migrate from Webpack SSR
Migrate from Static App

Looking to add an application-level feature that many apps might share? Reach out via support — we prefer to internalise common solutions in sku where it makes sense.

Getting started ​

Scaffold a new app ​

What’s in the scaffold ​

Configuration ​