$page.query.get(..) returns null for prerendered pages
See original GitHub issueDescribe the bug
$page.query.get(...)
returns null
.
To Reproduce
git clone --branch issue-1 https://github.com/falsetru/sveltekit-test.git issue-1
cd issue-1
npm install
npm run build
npx sirv build/ # `npm run start` will hide the issue.
- Run above commands
- Visit http://localhost:5000/?name=abc
Expected behavior
abc
printed, but got null
.
Information about your SvelteKit Installation:
Diagnostics
- The output of
npx envinfo --system --npmPackages svelte,@sveltejs/kit,vite --binaries --browsers
System:
OS: Linux 5.8 Ubuntu 20.10 (Groovy Gorilla)
CPU: (4) x64 Intel(R) Core(TM) i7-7600U CPU @ 2.80GHz
Memory: 763.02 MB / 15.39 GB
Container: Yes
Shell: 5.8 - /usr/bin/zsh
Binaries:
Node: 12.18.2 - /usr/bin/node
npm: 7.7.6 - ~/.npm-packages/bin/npm
Browsers:
Chrome: 89.0.4389.114
Firefox: 87.0
npmPackages:
@sveltejs/kit: next => 1.0.0-next.67
svelte: ^3.29.0 => 3.37.0
vite: ^2.1.0 => 2.1.5
-
Your browser Google Chrome Version 89.0.4389.114 (Official Build) (64-bit)
-
Your adapter @sveltejs/adapter-static
Additional context
- As a workaround, I am using
new URLSearchParams(document.location.search).get('name')
. - If I modify https://github.com/sveltejs/kit/blob/4a1c04a53897ac5f4831b54254b81fa0501656b4/packages/kit/src/runtime/server/page.js#L398 to
the issue is gone. Not sure whether it’s proper way.query: new URLSearchParams(document.location.search),
Issue Analytics
- State:
- Created 2 years ago
- Comments:12 (6 by maintainers)
Top Results From Across the Web
$page.query returns empty on prerendered pages · Issue #1218 ...
Describe the bug Using $page.query sometimes returns as empty for pages with a query string. To Reproduce In my experience, any basic page...
Read more >Next.js router is returning query parameters as undefined on ...
It seems that Next.js initially gets the query object from window.__NEXT_DATA__ , which is the prerendered data from the server. And if you...
Read more >General tips and best practices - Troubleshooting - Prerender.io
Prerender gives back raw or empty content. If the prerender returns an X-Prerender-Raw-Data header, the crawler cannot render the page and ...
Read more >Next JS Pre-Rendering Pages - Page Content - YouTube
in this video we will be going over how to pre render a page that has a section that relies on external data.If...
Read more >Client-Side Routing In Next.js - Smashing Magazine
Each page is a default exported React component from the pages ... about rendering in Next.js is that each page is pre-rendered in...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
The issue here is that a prerendered page is a page that has already been rendered and saved as HTML. Since it’s been rendered, there’s no way on the server-side to use the query. You’d have to disable prerendering if you want to use the query on the server.
Right now, it’s pretty easy not to realize that there’s an issue there. There are a few options:
query
benull
or throw an exception if you try to use it during prerendering to make it more obvious that it’s something you shouldn’t do. If there’s something you want to do with the query string you should do it using thelocation
either inonMount
or behind anif (browser)
checkupdate: I think Rich’s thinking largely aligns with my proposed solution given his comment here: https://github.com/sveltejs/kit/pull/1511#issuecomment-850907659
I have no idea what you’re referring to as being my solution because I have not commented on this thread at all