Table of Content
Intro
React Server Components enable React components to run exclusively on the server for the first time.
History
CSR Limitations
The primary issue with client-side rendering (CSR) is the delay caused by the need for JavaScript to download and parse, often resulting in a blank screen for users. This problem escalates as the application grows.
Understanding Server Side Rendering (SSR)
SSR enhances user experience by generating the initial HTML on the server, which eliminates the wait for JavaScript to load before the content becomes visible.
Hydration Analogy
Described by Dan, hydration is akin to watering the static HTML with interactivity, transforming it into dynamic content. Once the initial HTML is loaded, client-side React hydrates it, attaching event handlers and enabling interactivity. This allows React to “adopt” the pre-rendered HTML instead of starting anew.
Server Side Rendering (SSR)
SSR involves a server generating the initial HTML for a website upon receiving a user request. Typically, a Node.js server renders the React application and sends the resulting HTML to the client.
SSG
SSR may also entail generating HTML during the build process, known as static site generation (SSG). Here, HTML for different routes is pre-rendered during the build rather than on-demand.
SSR as an Umbrella Term
SSR encompasses multiple rendering strategies, including on-demand rendering (traditional SSR) and compile-time rendering (SSG), using ReactDOMServer APIs.
getServerSideProps
This function executes on the server when a request is received. It returns a props object passed into the component, which is first rendered on the server and then hydrated on the client.
SSR Limitations
- Only applicable at the route level, not for individual components deeper in the hierarchy.
- Variability in implementation across frameworks like
Next.js,Gatsby, andRemix, leading to a lack of standardization. - All React components still require client-side hydration.
React Team’s Solution
The React team developed React Server Components to address these limitations, introducing a new paradigm where components can integrate server-side logic directly.
React Server Components
Characteristics
- Render once on the server and remain unchanged on the client.
- Immutable, hence incompatible with React APIs like state and effects.
Benefits
- Do not require careful management of effects since they render only once.
- Simplify the integration with traditional React components, now referred to as Client Components.
Client Components
These components can render on both the client and server, despite the name suggesting otherwise.
Current Limitations and Compatibility
React Server Components require significant integration with tools like bundlers, servers, and routers, and are currently compatible with Next.js 13.4+ using the “App Router.”
Future Framework Support
Expected to be incorporated into more React-based frameworks in the future.
React Server Components by Default
Components are treated as Server Components by default, with an “opt-in” required for Client Components using the 'use client' directive.
Understanding the Limitation
- Client Components Restriction: Client Components cannot render Server Components, which might seem restrictive if you need to use state high up in the application tree. Consider you need to add color theme at the root level. Since this requires to change the state we define it as Client Component. Thus all children will become implicitly Client Component. To solve this we move the color theme logic to a parent component and then at the root we import our component.
Understanding Client Boundaries
Client Boundaries Concept:
- The ‘use client’ directive establishes client boundaries at the file/module level.
- Parent/child relationships within these boundaries do not force child components to become Client Components if the importing module is a Server Component.
- In other words, a component implicitly becomes a Client Component if it is imported by another Client Component.
Directive Scope
IMORTANT: The 'use client' directive works at the file/module level, ensuring that any modules imported in a Client Component file are also treated as Client Components during bundling.
General Rule for Component Type
Components should default to Server Components unless client-side interactivity is necessary.
Performance Benefits
Server Components can improve the Page Interactive (TTI) metric by reducing the JavaScript bundle size, enhancing load times and interactivity.
Balance in Component Selection
It’s beneficial to use Server Components for performance but maintain Client Components for necessary state or effects.
Conclusions
- Utilize React Server Components (RSC) for content-heavy applications to optimize performance and reduce JS bundle sizes.
- RSC enables the inclusion of server-exclusive features without enlarging the JS bundle.
- Simplifies development by eliminating concerns about dependency management in React components.
- Marks a significant innovation in React’s approach to integrating server-side logic within components.
Key Words
- CSR
- SSR
- SSG
- RSC
- React Server Component
- Client Component
- Client Boundary
- Directive Scope
- use client
- use server
- Prism
- Bright