Partial Page Caching Using React Server Components

Key Concepts

• React Server Components (RSC): A specialized tool for rendering components on the server, allowing for granular control over data fetching and bundle size.
• TanStackStart: A framework that leverages RSCs as a specific tool rather than a one-size-fits-all solution.
• Flight Data: The binary format used by RSCs to transmit rendered VDOM (Virtual DOM) nodes from the server to the client.
• CDN Proxying: Using a Content Delivery Network to cache route-level responses, with RSCs enabling more granular cache invalidation.
• Code Splitting (Dynamic Loading): The ability to load JavaScript for interactive components only when the RSC that requires them is rendered, preventing "mega-bundles."
• Seroval: A serialization library used to pack data for transmission.

1. The Philosophy of RSCs as a Specialized Tool

The presenter argues against the notion that RSCs are a universal solution for every web application. Instead, they should be viewed as a "specialized tool"—analogous to a right-angle drill adapter—designed to solve specific architectural problems. They are most effective in scenarios requiring granular performance optimization, such as content-heavy sites or complex dashboards with multiple, infrequently used widgets.

2. Use Case: Granular Cache Invalidation on Content Sites

A common challenge with CDNs is that they typically cache at the route level. If a page contains both static content (e.g., articles) and dynamic content (e.g., a "Trending" sidebar), the entire route must be cache-busted whenever the dynamic content changes.

The Methodology:

• Route Separation: The main page content is cached normally.
• RSC Integration: The "Trending" sidebar is implemented as an RSC.
• Server Functions: The application uses a GET request server function to fetch the trending data. Because it is a GET request, the CDN can cache the RSC flight payload independently of the main page route.
• Invalidation: When new data is added, the system invalidates only the tag associated with the trending component. The next request triggers a cache miss for that specific component, fetching fresh data from the origin while the rest of the page remains cached.

3. Performance and Technical Advantages

The presenter highlights two primary technical advantages of using RSCs over traditional JSON-based API fetching:

• Rendering Efficiency: When fetching JSON, the client must download the data, then run the rendering logic to convert that data into the VDOM. With RSCs, the server sends the pre-rendered flight data (the VDOM nodes), which the client can "jam" directly into the existing VDOM, resulting in faster UI updates.
• Dynamic Bundle Loading: This is identified as the "key differentiator." When an RSC includes an interactive component (marked with 'use client'), the JavaScript code for that component is not included in the initial page bundle. It is only fetched and loaded when the RSC is rendered. This prevents the client from downloading a "mega-bundle" containing code for features the user may never interact with.

4. Step-by-Step Process for Implementation

1. Define the Server Function: Create a GET request server function that utilizes the renderServerComponent API (a low-level TanStackStart feature) to return flight data.
2. Wrap the Component: Use a client-side wrapper (e.g., TrendingClient) that uses useEffect to request the RSC payload from the server.
3. Handle Interactivity: For components requiring client-side logic, add the 'use client' directive. This ensures the bundler treats them as dynamic imports.
4. CDN Configuration: Configure the CDN to proxy the server function requests, allowing the binary flight data to be cached and invalidated independently of the main HTML route.

5. Synthesis and Conclusion

The core takeaway is that RSCs provide a mechanism for surgical performance optimization. By decoupling the rendering of specific page regions from the main route, developers can achieve:

• Better Cache Hit Rates: By invalidating only the specific parts of the page that change.
• Reduced Payload Sizes: By only shipping JavaScript for interactive components when they are actually needed.

The presenter concludes that while this approach is "in the weeds" and requires more manual architectural effort, it is highly effective for content-heavy sites or complex dashboards where performance and bundle size are critical constraints.