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 serverpnpm 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 appdist/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
]
},
})