Server-Side Rendering (SSR) Differences with PWA Kit

PWA Kit and Storefront Next implement SSR, but with fundamentally different architectures that reflect their respective technology stacks. PWA Kit’s SSR approach gives developers explicit control through Express and React Query, with optional partial hydration via Islands. Storefront Next uses React Router 7’s built-in SSR with automatic streaming, middleware chains, and loader-based data fetching. Storefront Next’s approach reduces boilerplate and provides better streaming performance, while the PWA Kit approach offers more granular control over hydration timing.

AspectPWA KitStorefront Next
SSR RuntimeExpress server with runtime.renderReact Router 7 framework mode
Data HydrationReact Query cache serializationPromise streaming with use() hook
MiddlewareExpress middlewareReact Router middleware chain
Partial HydrationIsland component with strategiesSuspense boundaries with createPage
Server ContextuseServerContext() hookContext from middleware chain
Code Splitting@loadable/componentReact Router’s automatic splitting
Cache ControlManual via res.set()Via HTTP response from middleware

PWA Kit:

  1. Express receives request.
  2. React tree renders.
  3. React Query hooks execute during render.
  4. Data fetched, components re-render with data.
  5. Query cache serialized to HTML.
  6. Client hydrates with cached data.

Storefront Next:

  1. React Router receives request.
  2. Middleware chain runs (auth, config, i18n).
  3. Loaders execute, return promises.
  4. React renders, use() unwraps promises.
  5. HTML streams as promises resolve.
  6. Client hydrates, clientLoader runs.

PWA Kit offers fine-grained control with Island:

Storefront Next uses Suspense boundaries:

  1. useServerContext vs. Middleware: Server-side logic like setting cache headers moves from component hooks to middleware or loaders.

  2. React Query vs. Loaders: Data fetching moves from hooks inside components to loader functions exported from route files.

  3. Island vs. Suspense: Partial hydration with Island becomes Suspense boundaries with createPage.

  4. Express routes vs. Resource routes: Custom API endpoints move from Express handlers to React Router resource routes.