SSR and SSG #

Going further with Vulk, you can use it to generate static websites. This is a great way to improve your website performance and SEO.

The main difference between SSR (Server Side Renderer) and SSG (Server Side Generation) is that SSR is dynamic, while SSG is static. SSR is great for dynamic websites, but it can be slow and expensive. SSG is great for static websites, but it can be hard to maintain.

In both case, the website will be generated on the server, and then served to the client. The main difference is that SSR will generate the website on every request, while SSG will generate the website only once, and then serve it to the client.

Enabling SSR or SSG in an application require to know about how to Write SSR-friendly Code mostly due to Access to Platform-Specific APIs and Cross-Request State Pollution

To develop your application with SSR or SSG, you can use the pnpm dev and pnpm ssr:dev commands.

• pnpm dev will start a regular development server
• pnpm ssr:dev will start a development server with Server Renderer (useful for debugging SSR/SSG)

Server Side Renderer #

You can build SSR with pnpm ssr:build

Two vesion of your app will be generated:

• dist/client contain the client side version of your app
• dist/server contain the server side version of your app

Use pnpm ssr:serve to start a Node.js http server that will render your app on every request.

Customizing the server #

You can customize how server requests are handled by your server with those two files:

my-vulk-quickstarter-project/
├── src/
│   ├── entry-server.ts     # SSR app entry point
└── server.ts               # Node.js SSR server (via h3/listhen)

Server Side Generation #

You can build SSG with pnpm ssg:build

The build process generate a temporary server version that is used to pre-render your app.

• dist/.server contain the temporary server side version of your app (removed after the build is done)
• dist/ contain the prerendered static version of your app

Use pnpm ssg:serve to start a basic Node.js http server (using vercel/serve) that will serve the dist/ folder as a static website.

Generating dynamic routes #

If you have route with dynamic parameters, you can edit the build-ssg.config.ts file to generate them.

export function generateStaticParams(): Record<
  string,
  () => Promise<Record<string, string | string[]>[]>
> {
  // keys are the route path
  '/subpages/jobs/[slug]': async () => {
    // here you can fetch data from an API
    // await fetch('...
    return [
      { slug: 'job-1' }, // pre-render /subpages/jobs/job-1
      { slug: 'job-2' }, // pre-render /subpages/jobs/job-1
      { slug: 'job-3' }, // pre-render /subpages/jobs/job-1
    ]
  },
  
  // Rest parameters requires to return an array
  '/pages/[...path]': async () => {
    return [
      { path: ['a', 'b', 'c'] }, // pre-render /pages/a/b/c
      { slug: ['a', 'b', 'd'] }, // pre-render /pages/a/b/d
    ]
  },
})