SSR issues with using UI frameworks in Next.js

[FerretAngel]

Summary

Problems encountered

When using some UI frameworks, when configuring dark mode, you need to nest a Provider in the top-level component, or use some reactive variables to switch dark mode. However, if 'use client' is used at the top level, all nested components will become client-side rendered. This also loses the meaning of SSR.

Existing solutions (not ideal)

1. Split the application into client/server boundaries (often need components to nest each other, losing the advantage of component nesting)
2. Give up using SSR for pages with UI frameworks (but almost all pages will use them, can't just wrap every small module in a provider)
3. Do not use UI frameworks (not practical for many projects)

Additional information

No response

Example

No response

[denis23x]

Hi @FerretAngel

Can you tell us which UI framework are you using? (also good thing to provide some code snippets)

For example, I'm using shadcn/ui and there is a guide for dark mode https://ui.shadcn.com/docs/dark-mode/next where is no need to use "use client"

[FerretAngel]

Thank you for your response, but this is not just a dark mode issue. There are similar issues in other scenarios as well. For example, a layout component (a blog menu scenario) that displays normally on a PC without needing any responsive data, but on a mobile phone, a variable is needed to recognize whether the menu is open. If I use responsive variables (such as useState) in the layout, I cannot use ssr, resulting in the content not being ssr. But if I don’t use variables, how should I handle the issue of whether the mobile phone menu is open?

[denis23x]

Oh, there is a many ways to do that.

As example you can make a static layout for everything, and hide menu by default. For now you will have a static html version with links, which is fast and good for SEO.

Then make your client component (or service), which will find your button and attach click to it and make your actions.

Another trick is, you can pass part of server layout into client components:

export default async function Page() {
  return (
    <ClientComponent>
      <div>Your layout..</div>
    </ClientComponent>
  );
}

And your client component make looks like this, and you can do whatever you want 😁

"use client";

export default function ClientComponent({ children }) {
  return <div>{children}</div>;
}

Another option is to use <Suspense>, please read about it here https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming

And if you need to have a connection between server and client, you can use cookies 🍪

[FerretAngel]

Thank you for your reply. I am not sure if I fully understand what you mean. Are you saying to separate the menu bar that needs interaction from the content? The menu bar is client-rendered, while the content is server-rendered.

[FerretAngel]

Hi 你好@FerretAngel

Can you tell us which UI framework are you using? (also good thing to provide some code snippets)您能告诉我们您使用的是哪个 UI 框架吗？（提供一些代码片段也是个好东西）

For example, I'm using shadcn/ui and there is a guide for dark mode https://ui.shadcn.com/docs/dark-mode/next where is no need to use 例如，我正在使用并且有一个暗模式 https://ui.shadcn.com/docs/dark-mode/next 指南，其中不需要使用"use client"

I'm sorry to bother you again.
I encountered this problem while using nextui.

Does this provider marked with "use client" mean that my entire page is no longer SSR, since it is used at the top-level layout?

[viii47]

Hi 你好@FerretAngel
Can you tell us which UI framework are you using? (also good thing to provide some code snippets)您能告诉我们您使用的是哪个 UI 框架吗？（提供一些代码片段也是个好东西）
For example, I'm using shadcn/ui and there is a guide for dark mode https://ui.shadcn.com/docs/dark-mode/next where is no need to use 例如，我正在使用并且有一个暗模式 https://ui.shadcn.com/docs/dark-mode/next 指南，其中不需要使用"use client"

I'm sorry to bother you again. I encountered this problem while using nextui.

Does this provider marked with "use client" mean that my entire page is no longer SSR, since it is used at the top-level layout?

No, this is completely fine - your page will still be hydrated on the server-side still. Providers are generally marked with "use client" but will work fine in the SSR-context.