Four interesting points about React Server Components: 1
Four interesting points about React Server Components:
1. All components are server-side rendered (SSR) by default, (even client components!) SSR renders two things:
- HTML (yes even components marked 'use client')
- A virtual DOM representation that re-hydrates the HTML on the client.
2. SSR can be disabled for client components via useEffect. (useful to resolve hydration mismatch errors):
3. A client component can't import a server component. But it can render a server component as a child.
4. All children of a client component automatically become a client component. But, a client component can import components that don't specify 'use client' as long as:
- The component doesn't "import server-only"
- The component doesn't contain code that can only run on the server.
So a client component "quietly" converts a server component into a client component when it is imported. React throws an error if the server component cannot be imported due to the constraints above.
This works!
To try these things out, check out https://demystifying-rsc.vercel.app/ by @matt_kruse.
This is a fantastic resource to better understand all the nuances around RSC with Next, especially the VDOM implementation.