Client Side rendered prod build with bigger lighthouse score than RSC where possible?
Unanswered
Pin-tailed Snipe posted this in #help-forum
Pin-tailed SnipeOP
Hello, and thanks in advance for your help and opinion on that matter,
A couple of months ago we decided to switch from React to NextJS. We started with new app, using 'use client' directive everywhere in the beginning, in order to ship something faster to the client (not the best approach, but was a needed compromise while the whole team learns NextJS, RSC, etc.). Now that we have more free time and while the code complexity is not too big, we are switching to RSC where possible based on NextJS docs best practices. The biggest thing that amazed me, was that production build of Client Side code had better performance in lighthouse tests compared to RSC? Mostly the LCP went up from 1.2 to 2s with the RSC one, everything else is kind of the same.
We are also using a custom backend framework, so all requests are going to it in the end in this second app (both prod apps are in the same data warehouse).
For fetching we are using Tanstack query.
I know that it's almost impossible to give good advice with this information, but I cannot show the code. Nevertheless, I would love to hear your ideas and also - how do you manage to test the real benefit of RSC?
A couple of months ago we decided to switch from React to NextJS. We started with new app, using 'use client' directive everywhere in the beginning, in order to ship something faster to the client (not the best approach, but was a needed compromise while the whole team learns NextJS, RSC, etc.). Now that we have more free time and while the code complexity is not too big, we are switching to RSC where possible based on NextJS docs best practices. The biggest thing that amazed me, was that production build of Client Side code had better performance in lighthouse tests compared to RSC? Mostly the LCP went up from 1.2 to 2s with the RSC one, everything else is kind of the same.
We are also using a custom backend framework, so all requests are going to it in the end in this second app (both prod apps are in the same data warehouse).
For fetching we are using Tanstack query.
I know that it's almost impossible to give good advice with this information, but I cannot show the code. Nevertheless, I would love to hear your ideas and also - how do you manage to test the real benefit of RSC?
1 Reply
Pin-tailed SnipeOP
It might be good to share that we also are trying to prefetch the initial infiniteQuery get request in the RSC component while doing this migrations to RSC components where possible. The prefetch looks to work with no issues. We implemented it following official Tanstack query docs (v5).