Can't NextJS control better server-side rendering?

[bbhxwl]

Summary

I have a blog feature that returns JavaScript when rendering on the server
It seems that JavaScript cannot perform SEO

Additional information

No response

Example

No response

[icyJoseph]

It is like you are doing some variation of this: https://demystifying-rsc.vercel.app/client-components/no-ssr/ (preventing SSR from rendering anything further)

We'd need to see a repo to be able to help, otherwise its just guessing

[bbhxwl]

You should be able to control this. Something is totally wrong here 😢 - an empty div like that and no content is unexpected to say the least.
Let me read more onto this Cesium thing but with this much info it is a bit hard to know what happening. I bet the problem is in the layout level. Could you share some pseudocode of how that root layout or any parent layout of this route works?

You can ignore my cesium, I use the Heroui component to support themes, but I have to use the client Is it related to this client component package? So I have a new question. If we use components and events, we must use the client. Does this mean that any page with buttons cannot be rendered on the server side?

You should be able to control this. Something is totally wrong here 😢 - an empty div like that and no content is unexpected to say the least.

Let me read more onto this Cesium thing but with this much info it is a bit hard to know what happening. I bet the problem is in the layout level. Could you share some pseudocode of how that root layout or any parent layout of this route works?

I asked Gemini and he analyzed it this way。
There is a problem with my Providers component in my task. The 'mounted' component does not exist and returns null. The Gemini says this will cause the server to render null,

[icyJoseph]

That is what I had linked initially:

It is like you are doing some variation of this: https://demystifying-rsc.vercel.app/client-components/no-ssr/ (preventing SSR from rendering anything further)

'use client'
import {useEffect, useState} from "react";

export default ()=>{
  const [isServer,setServer] = useState(true);
  useEffect(setServer,[]);

  return (
      <p class={"client-component"}>
        This content is generated client-side. Datestamp: {isServer ? '' : Date.now()}
      </p>
  );
}

I see that the page maybe is not 100% conveying that... but you see, how the effect does the same thing you have in your Provider. That's why I was asking about it!

Why do you need this? is it because you get a hydration error from next-theme? or something like that?

[icyJoseph]

So I have a new question. If we use components and events, we must use the client. Does this mean that any page with buttons cannot be rendered on the server side?

No. use client doesn't mean, no SSR. Client Components are SSR'd. You just applied a pattern where you opt-out from that. Likely didn't have to do that at all. https://www.heroui.com/docs/frameworks/nextjs#setup-provider this page doesn't show any of that at all either, it looks like it should just work.

Again, reactwg/server-components#4

Client Components are the components we've always had, in Pages Router, technically speaking everything is a client component, and they can be SSR'd. But they are also send to the client, even if they are not interactive at all. With Server Components, you can define components that only live in the server, and never include their in JavaScript client bundles.

[bbhxwl]

So I have a new question. If we use components and events, we must use the client. Does this mean that any page with buttons cannot be rendered on the server side?

No. use client doesn't mean, no SSR. Client Components are SSR'd. You just applied a pattern where you opt-out from that. Likely didn't have to do that at all. https://www.heroui.com/docs/frameworks/nextjs#setup-provider this page doesn't show any of that at all either, it looks like it should just work.

Again, reactwg/server-components#4

Client Components are the components we've always had, in Pages Router, technically speaking everything is a client component, and they can be SSR'd. But they are also send to the client, even if they are not interactive at all. With Server Components, you can define components that only live in the server, and never include their in JavaScript client bundles.

Gemini seems to have helped me solve this problem, but there will be a warning.
I commented out this code and you can see it in HTML. Do you know how to fix it besides ignoring warnings? At present, I understand that returning null means that everything has been loaded and rendered from the client.

[icyJoseph]

Nice, as said above, my first guess was correct

As for the hydration issue the overlay should have more info, in recent versions it points exactly at what is different.

Did you follow the instructions though? https://github.com/pacocoursey/next-themes?tab=readme-ov-file#with-app:

// app/layout.jsx
import { ThemeProvider } from 'next-themes'

export default function Layout({ children }) {
  return (
    <html suppressHydrationWarning>
      <head />
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  )
}