SvelteKit: Dynamic routes, static renderer

I asked the following question on the Svelte discord, but was able to solve it before anyone had a chance to look at the question (classic).

Question

I have a sveltekit app where I've defined a page as dynamic with the following svelte.config.js

import adapter from '@sveltejs/adapter-static';
...
const config = {
    kit: {
        prerender: {
            entries: [
                "/",
                "/portfolio"
            ],
        },
    }
    ...
}

because the page /blogs and /blog?file=/some/blog/file.md are populated by a fetch call to a rest API.

if I don't include the kit.prerender.entities I get the following error when I run npm run build

Error: Cannot access url.searchParams on a page with prerendering enabled

The issue is, that when I refresh the page, or route directly to the /blog?file=/some/blog/file.md it renders the index page instead of the blog page.

How should I fix this?

Here's an example https://mframe.ca/blog?file=About%20this%20blog.md

• note it should render the blog, not my index page
• you can route to that blog ("About this blog") through https://mframe.ca/blogs

Here's how the /blog page works

Answer

you have to run it in "SPA" mode. by providing a fallback to the adapter

adapter: adapter({
    pages: 'build',
    assets: 'build',
    fallback: 'index.html',
    precompress: false
}),

The issue was that it was looking for a /blog/index.html file but it of course wasn't there.

A better way to selectively prerender

<script context="module">
    export const prerender = true;
</script>

add this to the pages that you want to prerender, those without this declaration will not be prerendered. you will of course still have to 'run it in "SPA" mode' as noted above.

This is cleaner than the above solution of editing the
congif.kit.prerender.entities insvelte.config.js

More

Read more about the blog here:

https://dev.to/marcdaframe/github-as-a-cms-for-your-blog-fhh

View the source code for the blog here:

https://github.com/MarcDAFrame/SvelteGithubBlog