How to achieve SSG?

[RickStanley]

Hello, I want to create static pages with Preact and have began to toy around with Vike.

The thing is, Vike has its own complexity and things that I can not work around at this moment. Then I thought I'd go look for a scaffold with: Vite + Preact SSG project, but couldn't find one. Ideally I did not want to make one myself. The npm init preact one uses Vike for a SSG setup.

I have some specific needs for my configuration (see: vikejs/vike#1345, if interested), and I would rather begin with a minimal setting to see how things work out.

As I've said, I looked for examples, and found some for SSR, for instance: https://github.com/bluwy/create-vite-extra/tree/master/template-ssr-preact

And others for SSG, but not specifically for Preact, example: https://github.com/vitejs/vite-plugin-vue/tree/main/playground/ssr-vue

And finally, today I found out about preact-iso, but I'm a bit unsure how to approach the solution, I feel like this is an already solved problem, and I have the tools to assemble it, I just can't quite figure it out; I'd appreciate any guidance.

[JoviDeCroock]

We have the SSR starter in create-preact https://github.com/preactjs/create-preact/tree/master/templates/ssr this uses vike so it can be used for SSG as well.

Apart from that SSG could be achieved by invoking preact-render-to-string at build time

[rschristian]

Not released yet, but you might want to take a look at preactjs/preset-vite#86 (and if you do, let me know how it goes!)

Edit: This has since been released. You can use it by creating a new project with create-preact or by setting it up yourself with @preact/preset-vite.

[RickStanley]

When adding:

                rollupOptions: {
                        external: ['preact', 'preact/hooks',]
                }

And executing npm run build, yields:

vite v5.0.8 building for production...
✓ 19 modules transformed.
[headless-prerender] Cannot find package 'preact' imported from /tmp/headless-prerender-UFzqlJ/index-nDD8L_Im.js
✓ built in 255ms
error during build:
Error: Cannot find package 'preact' imported from /tmp/headless-prerender-UFzqlJ/index-nDD8L_Im.js
    at new NodeError (node:internal/errors:405:5)
    at packageResolve (node:internal/modules/esm/resolve:916:9)
    at moduleResolve (node:internal/modules/esm/resolve:973:20)
    at defaultResolve (node:internal/modules/esm/resolve:1193:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:403:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:372:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:249:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:39)
    at link (node:internal/modules/esm/module_job:75:36)

I can imagine why this is happening. But I wonder: should this setting interfere with pre-rendering at all?

[rschristian]

I suppose I need to ask why you're setting preact to be external to the app?

[RickStanley]

I want to provide Preact through import map. When adding it to exclude, Vite uses import in scripts that consume it.

[rschristian]

I suppose we can move the tmp dir local, into node_modules or something.

[rschristian]

Just to circle back on this, the prerendering functionality was recently released in @preact/preset-vite and you can find the instructions here or create a new project with create-preact to get started with prerendering.