Questions about server components
Answered
andrei posted this in #help-forum
andreiOP
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?
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?
Answered by Arinji
1. No, passing server components inside client components as children wont make them run on the browser, that would be weird
14 Replies
1. No, passing server components inside client components as children wont make them run on the browser, that would be weird
Answer
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
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
@andrei
@Arinji 1. No, passing server components inside client components as children wont make them run on the browser, that would be weird
andreiOP
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 😅
@andrei 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
This is correct, I never said that client components didn't get rendered on the server
andreiOP
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
@andrei 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
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
@andrei anything else?
andreiOP
No thanks a lots