Getting started

WARNING

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

Server-side rendering (SSR) renders a React app on the server for each request. The browser then hydrates that HTML. An isomorphic app is one that renders on the server and in the browser.

This path uses Managed Data Mode. sku provides the HTTP server, HTML document, streaming, hydration, and CSP headers. It wires React Router Data Mode for routing and data. You provide 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. Until then, use Webpack SSR.

Scaffold a new app

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

Create the app in the current directory:

$ 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, the app includes three entries:

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

The template also creates a root layout for providers such as Braid. It adds page modules under src/pages/. It adds typed hooks via createSkuContexts from sku/runtime.

Configuration

This is the 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

sku handles more of the server and build in Managed Data Mode SSR. These options are not supported, and they 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 — load page content
Deploy to production — when you’re ready to ship
Migrate from Webpack SSR
Migrate from Static App

If you need an application-level feature that many apps may share, contact support. sku prefers to internalise common solutions when that makes sense.

Getting started ​

Scaffold a new app ​

What’s in the scaffold ​

Configuration ​