SSR and SSG

This is a great way to improve your website performance and SEO.

SSR stands for Server-Side Rendering, which means that the server generates the HTML for a web page and sends it to the client. The client then receives the fully rendered HTML and displays it to the user. SSR is useful for dynamic content that changes frequently and requires server-side processing.

SSG stands for Static Site Generation, which means that the HTML for a web page is generated at build time and served as a static file. The client receives the fully rendered HTML and displays it to the user. SSG is useful for content that doesn't change frequently and doesn't require server-side processing.

In summary, SSR is used for dynamic content that changes frequently and requires server-side processing, while SSG is used for content that doesn't change frequently and doesn't require server-side processing.

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

Server Side Renderer

Command	Description
pnpm ssr:dev	Start a development server with Server Renderer
pnpm ssr:build	Build client and server side version of your app
pnpm ssr:serve	Start a Node.js http server that will render your app on every request

Customizing the server

The server is built with h3 to make it easy to handle server requests and listhen to manage the http server.

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

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

This is an example of adding a custom route to your server:

// server.ts
import {
  // ...
  getQuery,
  getRouterParams,
} from 'h3'

// ...
async function createServer() {
  // ...

  app.use('/api/hello/:name', eventHandler(async (event) => { // [!code  focus]
    const query = getQuery(event)
    const params = getRouterParams(event)

    return `Hello ${params.name}!`
  }))
}

TIP

You can find more examples of how to use h3 here: https://github.com/unjs/h3#more-app-usage-examples

Server Side Generation

Command	Description
pnpm ssr:dev	Start a development server with Server Renderer (same as SSR)
pnpm ssg:build	Build generate a temporary SSR version of your app and pre-render every routes
pnpm ssg:serve	Start a Node.js http server that serve static files from dist/ folder

You can deploy dist/ folder to any static hosting service like Netlify, Vercel, Cloudflare Pages, GitHub Pages, Firebase Hosting, Render, Surge, AWS Amplify, DigitalOcean App Platform, ...

Generating dynamic routes

If you have route with dynamic parameters, edit the build-ssg.config.ts file to generate to tell Vulk how 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
    ]
  },
})