Bundle Size
SSR
SSG
Code-Splitting
Caching
Tree-Shaking
Server Components (file ends with .server.js) - Components without "interactability" renders in server side
Client Components (file ends with .client.js ) - Client components that we all know :)
Share Components:Able to be rendered in both server and client side, decided by the type of its parent component.
Step 1: Request for blend React component tree
Step 1: Request for blend React component tree
Serializable JSON response instead of HTML file
Step 2: React runtime rendering
J0: Serialized Server component
M1: Client component - request for module JS bundle
Reduce bundle size effect
Access BE resources directly
Automated Code-Splitting
Keeps client component states when refreshing React render tree
Learning Curve
Does this replace SSR / SSG?
Does this replace GQL?
Does it tightly coupled with Node.js?
Next.js 13 - blog
Intro video - Data Fetching with React Server component
Kyle Mo's blog