How to load mutable properties during initialization?

[bbhxwl]

Summary

For example, I have a blog page where I page load a list. After obtaining data from the server, I use useState to display the blog list. But useState must also be a client-side component, is this beneficial for SEO?

Additional information

No response

Example

No response

[icyJoseph]

SEO is not necessarily a property of Server/Client Components.

Technically, what you want is bots/crawlers to be able to see your content. Clients Components, as of now, are SSR'd, so bots will see that, including SEO bots/crawlers.

There's some nuance, some of the changes you make to that list, for example, by adding or removing inputs to the data client side, won't be discoverable by SEO, right? cuz the bot would need to do those changes in order to see that content.

[bbhxwl]

SEO is not necessarily a property of Server/Client Components.

Technically, what you want is bots/crawlers to be able to see your content. Clients Components, as of now, are SSR'd, so bots will see that, including SEO bots/crawlers.

There's some nuance, some of the changes you make to that list, for example, by adding or removing inputs to the data client side, won't be discoverable by SEO, right? cuz the bot would need to do those changes in order to see that content.

Perhaps I have studied Vue and Nuxt a lot and have been using them for several years, but I don't quite understand the client components of NextJS. Isn't the client component loading all the code under this component as<script>tags?

[icyJoseph]

Client Components, all things being equal are SSR'd.

Maybe this resource can help reinforce that:

• https://demystifying-rsc.vercel.app/client-components/

This component was delivered as javascript to the browser where it ran, generated html, and then that html was inserted into the DOM.

But if you View Source you will see that static html was returned from this client component. Why would that happen if it's a client component?

Because by default, client components are pre-rendered on the server, and their html is included in the static output. This is called SSR and has been around for a while. It's different than RSC.

[bbhxwl]

Client Components, all things being equal are SSR'd.

Maybe this resource can help reinforce that:

• https://demystifying-rsc.vercel.app/client-components/

This component was delivered as javascript to the browser where it ran, generated html, and then that html was inserted into the DOM.
But if you View Source you will see that static html was returned from this client component. Why would that happen if it's a client component?
Because by default, client components are pre-rendered on the server, and their html is included in the static output. This is called SSR and has been around for a while. It's different than RSC.

I have a general understanding, but it may not be easy for me to delve into it with translation software. The only thing I want to know is whether the client component pre renders the HTML and merges it before returning to the browser? Is it still JavaScript code returning to the browser? After entering the browser, generate HTML through JavaScript in the browser?

[icyJoseph]

I think you are maybe missing the concept of Hydration. The Client Components should be included into the HTML sent by the server.

JavaScript is also downloaded, and roughly speaking, hydration happens, by walking the tree, replaying the JavaScript, to know where to attach event handlers and what not. If there's a mismatch here, the dreaded hydration error is triggered. Then the JavaScript for effects, is run, and then React goes basically dormant, until state updates happen.

[bbhxwl]

I think you are maybe missing the concept of Hydration. The Client Components should be included into the HTML sent by the server.

JavaScript is also downloaded, and roughly speaking, hydration happens, by walking the tree, replaying the JavaScript, to know where to attach event handlers and what not. If there's a mismatch here, the dreaded hydration error is triggered. Then the JavaScript for effects, is run, and then React goes basically dormant, until state updates happen.

Is there a recommended place for real-time communication? Some questions may not feel good to ask here, they may be simple questions, but they can be difficult for newcomers to understand. I feel that the development structure of NextJS's app router is very comfortable and more intuitive than when I use Nuxt.js. NextJS allows specific components on a certain page to be defined in the corresponding directory for easy searching. Also, may I ask, what directory should I create the JS logic that needs to be encapsulated on a certain page?
For example, I want to define custom global types, or I want to define a page specific ts logic.