ssr

Client-only philosophy

Centralizing data fetching through a single (e.g. initial-data.ts) file while treating all components as client-side.

Considerations

• Dynamic Routes: Since your initial-data.ts exposes a function, it can fetch and map things based on the route from your router or window.location.
• Security: Treat initial-data.ts as if it would be only run on client-side, be cautious about what data you expose.

bundle.map Strategy

1. Build Step Configure your build tool (e.g. Vite) to emit a file bundle.json.map that includes routes, entry points, and assets.

2. Cloud-Based SSR Develop cloud infrastructure that consumes bundle.map to perform SSR. These services can dynamically import the necessary modules and assets based on incoming request.

3. Deployment Create a CI/CD that deploys bundle.map along with your build to a storage service accessible by your SSR functions.

bundle.map structure:

// Signature
interface BundleMap {
  entries: Record<"index" | "essential" | string, { fileName: string }>
  assets: Record<string, string[]>
  routes: Route[]
}

interface Route {
  pattern: string
  entry?: string
  children?: Route[]
}

// Example
{
  "entries": {
    "index": {
      "fileName": "assets/index-B9sZvQdB.js"
    },
    "essential": {
      "fileName": "assets/essential-0_KqdN1t.js"
    }
  },
  "assets": {
    "assets/curve-BesxSuXt.svg": [
      "src/sections/Merits/curve.svg"
    ],
    "assets/screenshot-DNNaHIMu.jpg": [
      "src/sections/Transparency/ChronlyShowcase/WorkerScreenshot/screenshot.jpg"
    ],
    "assets/bg-CLrYGMYD.jpg": [
      "src/sections/Merits/bg.jpg"
    ],
    "assets/bg-CL5dAE2E.svg": [
      "src/sections/Transparency/bg.svg"
    ],
    "assets/bg2-BUeja9KK.svg": [
      "src/sections/Merits/bg2.svg"
    ],
    "assets/essential-CRrIDHsm.css": [
      "src/essential.ts"
    ],
    "assets/index-B9sZvQdB.js.map": [],
    "assets/essential-0_KqdN1t.js.map": []
  },
  routes: []
}

Cloud Infrasturcture

Notes

Caching The app should use two-side caching, A. front caching and B. SSR page caching. On each deploy, cache A should invalidate changed paths and cache B should be triggred to pre-cache changed (or all) SSR pages.

Routes Routes should On each deploy, routes should be updates