Next.js Discord

Discord Forum

Will the providers of`next-intl`, `next-themes` and `@tanstack/react-query` remove SSR of my app?

Unanswered
Asian black bear posted this in #help-forum
Open in Discord
Asian black bearOP
import { notFound } from "next/navigation";

import Providers from "./Providers";
import Footer from "@/components/Footer";
import NavBar from "@/components/layout/navbar";

const inter = Inter({ subsets: ["latin"] });

export const metadata = {
title: "Festival Chooselife",
description: "Site oficial do festival Chooselife",
};

export function generateStaticParams() {
return [{ locale: "en" }, { locale: "pt" }];
}

export default async function RootLayout({
children,
params: { locale },
}: {
children: React.ReactNode;
params: { locale: "en" | "pt" };
}) {
let messages;
try {
messages = (await import(../../messages/${locale}.json)).default;
} catch (error) {
notFound();
}

return (
<html lang={locale} suppressHydrationWarning>
<body
className={min-h-screen bg-white px-2 text-gray-700 dark:bg-gray-900 dark:text-gray-400 md:px-0 ${inter.className}}
>
<Providers locale={locale} messages={messages}>
#Unknown Channel
<NavBar />
{children}
<Footer />
</>
</Providers>
<Analytics />
</body>
</html>
);
}
```

continue....

10 Replies

Asian black bearOP
And created the Providers.tsx

"use client";

import type { ReactNode } from "react";
import { ThemeProvider } from "next-themes";
import { type AbstractIntlMessages, NextIntlClientProvider } from "next-intl";

import { ReactQueryProvider } from "@/components/ReactQueryProvider";

interface Props {
  locale: "en" | "pt";
  messages: AbstractIntlMessages;
  children: ReactNode;
}
function Providers({ locale, messages, children }: Props) {
  return (
    <ReactQueryProvider>
      <NextIntlClientProvider locale={locale} messages={messages}>
        <ThemeProvider>{children}</ThemeProvider>
      </NextIntlClientProvider>
    </ReactQueryProvider>
  );
}

export default Providers;


Will the use client inside Providers.tsx make all my application client side?

I'm also getting a lot of errors like 

react-dom.development.js:15463 Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.


I was thinking that suppressHydrationWarning would resolve as I followed the documentation for the instalation, but nop. https://github.com/pacocoursey/next-themes#with-app
joulev
Will the providers ofnext-intl, next-themes and @tanstack/react-query remove SSR of my app?
No.
Asian black bearOP
At overral, I think this solution is crapping. But I don't know what to do. I was thinking that I knew Next, I'm wrong.
only components imported to client components implicitly become client components
even if you mark a layout as a client component with use client, pages inside that layout are still server components by default
about SSR: client components are also SSR'd (prerendered on the server)
Asian black bearOP
Perfect! Thx joulev.
Did you found any potential problems with the code? I'm very scpetical about the suppressHydrationWarning key. I installed the next-themes library because I wasn't able to make my preferable option for dark theme with TailwindCSS that is adding some code to the <head />
https://tailwindcss.com/docs/dark-mode#supporting-system-preference-and-manual-selection

The errors:
1/3 AND 2/3
Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching <circle> in <svg>.


3/3
Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.


Thx in advance!!
Asian black bearOP
Oops, solved!!

https://github.com/pacocoursey/next-themes#avoid-hydration-mismatch

This conversation is closed. Thx!!