DEV Community

Marc Frame
Marc Frame

Posted on


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).


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: [
Enter fullscreen mode Exit fullscreen mode

because the page /blogs and /blog?file=/some/blog/ 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/ it renders the index page instead of the blog page.

How should I fix this?

Here's an example

  • note it should render the blog, not my index page
  • you can route to that blog ("About this blog") through

Here's how the /blog page works


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
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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


Read more about the blog here:

View the source code for the blog here:

Top comments (0)