Static Site Generation (SSG) / Pre-rendering

Is your feature request related to a problem?

no

Describe the solution you’d like

There should be a command, maybe something like vite build --mode ssg to generate the application or website pages as prerendered, resumable html files alongside the client js files.

Describe alternatives you’ve considered

Additional context

So far I came up with this basic working solution (for a single page), although I am sure it does not work for all options/settings:

// /build-ssg.mjs
const fs = await import('node:fs/promises'); // currently only works with node.js
const server = await import("./server/entry.ssr.js");

const routes = [{url: "/", outFile: 'dist/index.html'}]; // should be derived from router or provided by developer

for (const route of routes) {
  const { html } = await server.render({ url: route.url });
  await fs.writeFile(route.outFile, html);
}

It relies on the client- and sever-build being generated. It would be smoother if in the end the server part was not necessary to be under server/entry.ssr.js, I think most users would not want SSR and SSG eventually.

Maybe something like this can be integrated into qwik directly. @manucorporat any opinions?

[manucorporat]

Implemented already!

[wtho]

@nnelgxorz I agree, this is state-of-the-art pre-rendering! 11ty’s Serverless plugin supports three render modes:

1. Rendering at build time and serving these pre-rendered html files (pre-rendered)
2. Rendering on-demand at first request and serving these pre-rendered html files, if already rendered (on-demand)
3. Rendering dynamically, on each request, aka SSR (dynamically)

We basically have to build the SSR server and client bundles at build time via the optimizer/qwikVite. Then we can invoke it during the build to generate html pages at build time. For this we need some smart analysis of all available (static or dynamic) routes from the router or a list of routes the developer wants to pre-render.

At runtime, the server has to handle each request accordingly. The current SSR server only renders each page on each request and serves that html. There we would have to add some logic to:

• check if the route is pre-rendered/on-demand/dynamically by calling routeRenderMode(...)
• look for pre-rendered files and load it (pre-rendered / on-demand)
• render page (on-demand / dynamically)
• write file to fs (on-demand)
• serve html (all)

Other features a SSG/Prerender plugin could have:

• QwikCity router compatibility
• Configuration which pages are what mode - e. g. a routeRenderMode implemented in src/entry.ssg.tsx
  • Optimally this function call also already includes QwikCity routing information for the current route
  • Possible signature: function routeRenderMode(url: string, routes: QwikCityRouterData): 'pre-rendered' | 'on-demand' | 'dynamic'
• CLI command to output bundles, assets and pre-rendered html files in output folder, e. g. qwik-ssg build --ssg src/entry.ssg.tsx
  • Output information which page was rendered why in which mode
• SPA mode (only render root page)

Anyways these are just some ideas.

@manucorporat Is there a way to “ask” QwikCity for the configures routes, including dynamic ones?