question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Navigating from prerendered page to non-prerendered page does not trigger hooks

See original GitHub issue

Describe the bug

When a site has a mix of prerendered and non-prerendered pages, if the first page a client lands on is a prerendered page, getSession will not be called when the client navigates to a non-prerendered page.

This means that if you have a site with a landing page (which is the same for all users) and personalized content (log in to save your todo lists), prerendering becomes a trap. Because if you use getSession to look up the users’ data in the database and load their todo lists, that will break as soon as you decide to prerender your landing page.

Reproduction

https://github.com/rmunn/prerender-and-hooks-repro

Run pnpm run dev, then go to / first, which is prerendered. Then click on the navigation link to /userpage, and notice that getSession is not called, so the user page would not be able to present its personalized content.

Navigating directly to /userpage works.

Logs

Actual:
  Handle hook ran for URL /
  getSession was called for URL /

Expected:
  Handle hook ran for URL /
  getSession was called for URL /
  Handle hook ran for URL /userpage
  getSession was called for URL /userpage

System Info

System:
    OS: Linux 5.4 Linux Mint 19.1 (Tessa)
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
    Memory: 6.51 GB / 62.58 GB
    Container: Yes
    Shell: 4.4.20 - /bin/bash
  Binaries:
    Node: 16.14.0 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/bin/yarn
    npm: 7.23.0 - ~/.local/bin/npm
  Browsers:
    Chrome: 74.0.3729.169
    Firefox: 96.0.3
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.33 
    @sveltejs/kit: next => 1.0.0-next.302 
    svelte: ^3.44.0 => 3.46.4

Severity

serious, but I can work around it

Additional Information

I can work around this by adding router = false to the landing page which I’ve marked as prerender = true. But the current behavior, where prerendering one page changes the behavior of a different page (whose handle and getSession hooks no longer run) seems wrong to me. The https://kit.svelte.dev/docs/hooks documentation is quite clear that hooks for prerendered pages run at build time, but I expected that that meant that handle and getSession hooks would only run for non-prerendered pages, not that they would never run at all if a prerendered page was the first page visited on the site.

So either this is a bug, or it’s a case of unclear documentation.

Issue Analytics

  • State:closed
  • Created a year ago
  • Reactions:2
  • Comments:8 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
Nickersoftcommented, May 4, 2022

👋🏻

I’d just like to chime in here and say I’ve run into this same issue! I almost opened a ticket for it awhile back, but wasn’t sure if this was intended behavior or not. I’m currently using goto() to navigate my users post-login, but getSession() is never called, so the session in my landing page’s load() function doesn’t have any user data.

Right now I’m just calling document.location.replace() manually to trigger a full-page reload. It’d be nice if getSession() could be called without forcing a full re-render, or if there’s a way to specify this without fully disabling routing.

Also, I think there are similar discussions happening over in #3722 and #1726.

0reactions
WhyAsh5114commented, Jul 22, 2022

I am also struggling with this, I thought it was my code that messed up 🙃

Read more comments on GitHub >

github_iconTop Results From Across the Web

Prerender pages in Chrome for instant page navigations
The Chrome team has been working on options to bring back full prerendering of future pages that a user is likely to navigate...
Read more >
How to trigger useEffects before render in React?
I want to trigger a data fetch in the child component when that prop changes before the child component is rendered. How can...
Read more >
prerender config - vite-plugin-ssr
vite-plugin-ssr shows a warning that a page cannot be pre-rendered, when the page has a parameterized route (e.g. a Route String /movie/@movieId ,...
Read more >
Angular Universal: Server-Side Rendering and Pre ... - Medium
Angular Universal is a toolkit that allows us to do server-side rendering (SSR) and pre-rendering for our Angular applications.
Read more >
Prerender | RedwoodJS Docs
So before your deploy your web side, Redwood will render your pages into HTML, ... You can also prerender your not found page...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found