Skip to content

Ability to disable hydration and client routing on error pages #1942

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
GrygrFlzr opened this issue Jul 18, 2021 · 1 comment · Fixed by #2008 or #2117
Closed

Ability to disable hydration and client routing on error pages #1942

GrygrFlzr opened this issue Jul 18, 2021 · 1 comment · Fixed by #2008 or #2117
Labels
bug Something isn't working p2-nice-to-have SvelteKit cannot be used by a small number of people, quality of life improvements, etc.

Comments

@GrygrFlzr
Copy link
Member

GrygrFlzr commented Jul 18, 2021

Describe the problem

Currently, it is not possible to disable hydration and client routing for error pages. Error pages are arguably one of the best candidates for 0kB JS delivery when SSR'd, because in many cases they do not need to include any JS-powered interactivity.

This very basic error page on a fresh kit install:

<script context="module">
  export const load = ({ status, error }) => ({
    props: { status, error },
  });
</script>
<script>
  export let error;
  export let status;
</script>
<h1>{status}</h1>
<h2>{error.message}</h2>
<pre>{error.stack}</pre>

In production mode using adapter-node takes nearly 8 seconds to load on simulated Slow 3G, with a small data URI favicon embedded into app.html to prevent a favicon request. On 6x CPU slowdown on my computer it takes over 700ms to process the useless clientside JS. 11.4 kB of the total 12.8 kB transferred was for JS alone.

Describe the proposed solution

SvelteKit should respect the hydrate and router exports of the __error.svelte page.

Alternatives considered

Since __error.svelte is a core part of kit, there's not really a good user alternative.

Importance

Depends on usage - could be critical in particular regions of the world.

@benmccann
Copy link
Member

I agree error pages should be treated the same as standard pages for those options

That being said, I'm not sure it'd make a huge difference for network latency. You still need to download the CSS, logo, etc. and that happens in parallel. I also wouldn't say that the JS is useless because if you navigate to another page from the error page (or vice versa) then client-side routing means that you don't have to rerender the layout.

I think the biggest thing we can do is improve hydration, so that you don't have to hydrate a non-interactive component and that hydrating interactive components is more like the way React does it

@benmccann benmccann added the bug Something isn't working label Jul 23, 2021
@Rich-Harris Rich-Harris reopened this Jul 31, 2021
@benmccann benmccann added the p2-nice-to-have SvelteKit cannot be used by a small number of people, quality of life improvements, etc. label Aug 4, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working p2-nice-to-have SvelteKit cannot be used by a small number of people, quality of life improvements, etc.
Projects
None yet
3 participants