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. Until then, continue using Webpack SSR.

High-level guide for moving a static sku app (webpack or Vite static site generation) 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 and CDN URLs are not supported
  • Stop using the config public assets folder. Import assets from modules instead
  • Remove dangerouslySetViteConfig and vitePlugins. SSR does not support them. Report 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;
  • Remove static-only config such as renderEntry and 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 from defineServerEntry and defineClientEntry. See Request entries.

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

Providers and data ​

Wire createSkuContexts. 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). Render <html>, <head>, and <body> in your root layout. Sku hoists stylesheet and modulepreload links into <head>. Nest ErrorBoundary on a child route under that layout so the HTML document stays mounted on failure. Move hoistable SEO tags (<title>, <meta>, <link>) into routes and layouts as React document metadata. Put non-hoistable tags in the root layout <head>.

See also ​