Search code examples
getsveltesveltekit

How to use get parameter on sveltekit when use adapter-static?


I get error message this when build.

Cannot access url.searchParams on a page with prerendering enabled

How to load and use get parameter?

svelte.config.js

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

const config = {
      preprocess: preprocess({
      }),
    kit: {
        adapter: adapter({
                  pages: 'build',
                  assets: 'build',
                  fallback: null,
                  precompress: false
            }),
            prerender: {
                  default: true
            },
            trailingSlash: 'always'
    }
};

export default config;

qna.svelte

...
import {page} from '$app/stores';
const id = $page.url.searchParams.get('id');
...

Solution

  • You cannot use the searchParams and have a prerendered site at the same time. There would be potentially infinite variants of your searchParams, so you would have to prerender an infinte number of pages.

    If you want a dynamic site, do not prerender that page. You can mark individual pages for not prerendering

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

    Note that now you will need a fallback page and have to make sure to redirect these pages to the index.html otherwise you will get 404s