Skip to content

Migrate from Static App

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.

High-level guide for moving a static sku app (webpack or Vite SSG) to Managed Data Mode SSR. For day-to-day API detail, prefer the Getting started topic pages.

Requirements

  • SSR is Vite-only: bundler: 'vite' and buildType: 'ssr'
  • Relative publicPath (for example /) — absolute / CDN URLs are not supported
  • Move off the config public assets folder — import assets from modules instead
  • Drop dangerouslySetViteConfig and vitePlugins — unsupported for SSR; raise use-cases via support

Config and commands

ts
import type { SkuConfig } from 'sku';

export default {
  bundler: 'vite', 
  buildType: 'ssr', 
  publicPath: '/',
  renderEntry: './src/render.tsx', 
} satisfies SkuConfig;
  • Drop static-only config such as renderEntry / src/render.tsx and environments-driven static HTML generation
  • Remove or empty the public assets folder

Routes and request entries

Compose routes with path (or index) and lazy in routesEntry. Put loader, action, and Component on page modules — see Routing. Optional mapRoutePath maps one logical path to per-site concrete paths — see Multi-language.

Default-export request entries via defineServerEntry / defineClientEntry — see Request entries.

Export getSite when config has more than one site; omit on single-site apps. Lazy page modules must export a named Component (not export default).

Providers and data

Wire createSkuContexts and mount isomorphic providers in your root layout. Prefer render-time data loading for page content.

Production Express handlers go on server-entry middleware. Local mocks stay in devServerMiddleware — see Middleware.

CSP and hydration

SSR emits HTTP header CSP, not meta http-equiv — see CSP.

Replace #app hydrateRoot and renderDocument with sku’s full-document stream and hydrateRoot(document). Use React document metadata in routes/layouts for head/SEO; the Document shell is not overridable.

See also