Dynamic route not prerendered with adapter-static

[Mrbeyond]

I have a routing structure of :
/(app)/category/[subcategory] => this is pre-rendered ✅
/(app)/home/manifolds => this pre-rendered ✅
/(app)/home/manifolds/[id] => this not pre-rendered ❌

├ (app)/
│ ├ category/
| | |- [subcategory]/
| | | | └ +page.svelte
| | | | └ +page.ts using [subcategory] to prefetch external api ✅
| | └ +layout.svelte
| | └ +page.svelte
│ ├ home/
| | |- [manifolds]/
| | | | |- [id]/
| | | | | | └ +page.svelte
| | | | | | └ +page.ts => using [id] to prefetch external api ❌
| | | | └ +page.svelte
| | | | └ +layout.svelte
| | └ +layout.svelte

/(app)/home/manifolds/[id] => not pre-rendered ❌

Error:
The following routes were marked as prerenderable, but were not prerendered because they were not found while crawling your app:

• /(app)/home/manifolds/[id]

According to the doc it's possible to prerender a page that depends on the route parameters, I don't know why this is not working.

When export const prerender = 'auto' is used, the build works but the page shows 500 on the nginx server, 404 on Netlify.

adapter-static used.

[eltigerchino]

The builder crawls your website to look for links such as /home/manifolds/123 to know how to prerender that dynamic route. It cannot prerender the route without knowing what the value of [id] is or how many there of them there are.

Otherwise, you can explicitly specify them in svelte.config.js under config.kit.prerender.entries.
See the docs for more info about that config option.
https://kit.svelte.dev/docs/configuration#prerender

[eltigerchino]

It should look something like this:

import adapter from '@sveltejs/adapter-static';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		adapter: adapter(),
		prerender: {
                         // use relative URLs similar to an anchor tag <a href="/test/1"></a>
                         // do not include group layout folders in the path such as /(group)/test/1
			entries: ['/test/1', '/test/2']
		}
	}
};

export default config;

You can also try running npm run build in this StackBlitz example to see it working.
https://stackblitz.com/edit/sveltejs-kit-template-default-amzgfz?file=svelte.config.js&terminal=dev

[Mrbeyond]

Thanks for this @s3812497 . You are well appreciated for this.

[Mrbeyond]

I saw saw and built the app successfully on stackblitz, so if I get you correctly, I must provide provide a valid [id] in the entries to simulate the page content?

That seems somehow to me, do I have to look for a valid id in the database for that, and would such not expose credentials on github or other online version control sites?

[eltigerchino]

You will need to use a different adapter so SvelteKit can act as a server and dynamically retrieves new ids from the database to serve this page.

Prerendering is more suited for static content or content that is fetched client-side after the user loads the page.

[Mrbeyond]

Thanks for this. Noted.

[Phosphoenix]

For others, I found a more detailed answer here

[justingolden21]

I had a +layout.js file with ssr set to false. Setting to true resolved this issue for me. It needs to be SSR for svelte kit to be able to render the pages it crawls.

[HuakunShen]

What if [id] is unknown? I know it's not possible to prerender if [id] is unknown, but is it possible to enable CSR for this single page.
In my use case, the dynamic page will need to fetch data from another server and render the page. And I have to generate static site with the static adapter.

It seems like settings fallback: "index.html" turn the entire web app into a CSR SPA, but I don't want that.

[eltigerchino]

The fallback page is only returned if a page could not be found. If you have SSR and prerender on, it will not use a CSR SPA shell for the other pages.