Skip to content
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.

Sign up for GitHub

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

Jump to bottom

[Bug]: Intermediate loading.tsx + ThemeProvider in the layout breaks SSR Suspense #325

Open
cirex-web opened this issue Nov 13, 2024 · 1 comment
Open

[Bug]: Intermediate loading.tsx + ThemeProvider in the layout breaks SSR Suspense #325

cirex-web opened this issue Nov 13, 2024 · 1 comment
Labels
bug Something isn't working triage

Comments

@cirex-web
Copy link

cirex-web commented Nov 13, 2024 •
edited
Loading

What happened?

Next JS does server-side rendering on all components by default. If a component throws a promise during the server-side render, the client should see the nearest suspense boundary and the component shouldn't run client-side until the promise is resolved.

However, with the following setup (all on the root level), the Page component runs client-side as well even though the thrown promise never resolves. Removing ThemeProvider fixes the issue. I should note that removing loading.tsx also fixes the issue, although that's probably not the desired fix.

This is a dealbreaker for anyone using SSR + streamed hydration, since we want all components to fully render on the server (eg. with data) before being rendered on the client.

Minimum reproducible example: https://github.com/cirex-web/next-theme-ignored-suspense

layout.tsx

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  );
}

loading.tsx

export default function Loading() {
  return <div>Loading...</div>;
}

page.tsx

"use client";

export default function Home() {
  console.log(
    "you shouldn't see this client-side! (should only be logged on the server)"
  );
  throw new Promise(() => {});
}

Version

0.4.3

What browsers are you seeing the problem on?

Chrome
@cirex-web cirex-web added bug Something isn't working triage labels Nov 13, 2024
@nicanordlc
Copy link

I think using suppressHydrationWarning just to make it work feels bad 😢

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working triage
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@nicanordlc @cirex-web