Questions about server components

[paper gyro]

I have done more reading on next's server components have got a few questions which I didn't really find the answers to:

1. If I pass a server component to a client component, and render it inside the client component, will the nested server component be shown on the browser before the client components or the interactive elements are rendered?
2. Do I lose the server components benefits (like SEO) if I use UI frameworks for React that aren't ready for server components?
3. If the server components render once, why does the data in them change when I revalidate the tags?

[lean fractal]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[granite oxide]

1. No, passing server components inside client components as children wont make them run on the browser, that would be weird

2. All components are run on the server once, irrespective of client or server. So you wont lose seo, howver you will lose server specific stufff.

3. Revalidating works diffferently from where you call,
   In Route Handlers they will update on the next render, now if you force a refresh it will show instantly

In Server actions, it uses the same network request to both do the action and also get the new data, so yes while they only render once, nextjs can like rerun the backend code and get new data

@paper gyro

[paper gyro]

Thanks for the answers. I found another answer online saying that client components also render on the server and that the children server components will also render on the server and shown on the first paint of the site but the client components will only be interactive only after the js loads on the client

Thanks for clarifying other questions 😅

[granite oxide]

This is correct, I never said that client components didn't get rendered on the server

[granite oxide]

See

[paper gyro]

Okay, yeah sorry, makes sense now

One more thing, coming from vue, I used state management a lot, if I would like to have a global theme state for tailwind, how would I go about it? All solutions I found on google used dirty hacks and third party libraries

[granite oxide]

If you want it in house, and optimized, use local storage for stuff like themes, user selected type shit

For like user data you make a function to fetch the user data in server components and call it anywhere you want the data, nextjs will memoize and cache the calls so it will only run oncr

[granite oxide]

@paper gyro anything else?

[lean fractal]

✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1270783468091215902 message)