Why is a page with only client components requesting a RSC Payload?

[nareshbhatia]

Summary

I am trying to understand a performance issue when using only React Client Components on a page (+ App Router). It's a master-detail page. When I click on different items in the master list, the client hits the Next.js server for an RSC Payload on every click. I don't understand why? I would have assumed that all code for that page should be on the client after the first render, and then on client should not have to load anything from the server. Any help in understanding this behavior and a potential workaround would be very helpful.

Please see details below.

My Use Case

1. Application data is changing frequently – data freshness is important. So data caching should be disabled.
2. Data is obtained from an external service that exposes a REST or GraphQL API.
3. FCP, TTI are not important (not a marketing or shopping site).
4. Responsiveness to user interactions is most important - as the user clicks on items in the master, we want to show the LATEST detail as soon as possible – the application should not feel sluggish.
5. Application is to be used in the field. Assume a Fast 3G connection at best.

Here's a screenshot of my POC – a movie list on the left and the selected movie's detail on the right. Granted this is not fast changing data, but it will do for the POC 😃

Implementation Details

I have implemented the requirements 4 ways to compare the performance:

1. Server Components: The entire page is built using React Server Components. Both master and detail data are fetched on the server.
2. Client Components: The entire page is built using React Client Components. Both master and detail data are fetched on the client. This is the preferred option give the requirements.
3. Fake Child: A variation of option 2, to improve performance (not successful). Here we are faking the nested child component by returning undefined (see here). This allows us to maintain the URL structure as /movies/id, but serve the detail as a hard-coded child (see here).
4. Query Params: Abandon the nested layout approach. Use a query parameter to get the detail. This approach also did not improve the performance.

Also, to meet the requirements, I have done the following:

1. Server-side fetches use the no-store option – see here.
2. Router Cache has been disabled - see here.

Example

https://nextjs-nested-layouts-ruby.vercel.app/

Steps to Reproduce

Given that Client Components is my preferred option (option 2), let's first demonstrate the issue.

1. Point your browser to the live demo, which is the production build.
2. Open the Chrome Dev Tools (right click > Inspect).
3. Click on the Network tab.
4. Change network speed to Fast 3G.
5. In the application, click on the Client Components tab. The movie list appears on the left. The initial display may be slow because the API server may be cold starting, however subsequent loads should be fast.
6. Now start clicking on different movies in the movie list. You will see a loading indicator and then the movie detail appearing after ~1200 ms. This is the interaction that I am trying to speed up.

Analysis

Again, this analysis is focused on the Client Components option (option 2).

1. The parent layout is marked as a client component using 'use client' – see here.
2. The nested child is also marked as a client component using 'use client' – see here.

In spite of this entire page consisting of client components only, the browser is making two network calls on each movie click:

1. Call to the Next.js server to get the RSC Payload
2. Call to the external API to get the movie data

See the Chrome Dev Tools snapshot below for clarity:

The first call to get an RSC Payload seems completely unnecessary for every click. We are wasting 572 ms per click! Since we are rendering the same client component repeatedly (just with different data), we shouldn't have to download the RSC payload again and again. I can understand if this Payload is requested just the first time a movie is clicked.

I would love to get a good explanation of this behavior and a workaround if possible. All we should see is one call to the API server for each click. What I am asking for seems reasonable – it would be a no-brainer to implement it as a traditional React SPA!

[nareshbhatia]

Sorry, posted this in the wrong location

[pawlean]

@nareshbhatia No worries, where did you post this? 😄

[nareshbhatia]

@pawlean it was meant for Next.js discussions. I posted it here: vercel/next.js#67401

[github-actions[bot]]

This discussion was automatically locked because the community moved to a new site. Please join us at vercel.community