If you're not already familiar, React Server Components allow you to split server and client rendering out between individual components, rather than having your entire app be one or the other. This means that on the server, you can securely call server-only APIs without leaking keys to the client. On the client, you can use browser APIs knowing that your code will only be run in the browser.
And for the optimization nerds (it's us, we're the optimization nerds) you can drop server-only dependencies from your client bundle, significantly reducing how much code you send down the pipe. All of this is only scratching the surface of RSC — you can read more about the benefits of RSC in Vercel's blog post Understanding React Server Components.
But let’s assume for the moment that you already know about RSC and you’re here to read a case study containing Significant Perf Gains. We have you covered there:
We recently launched a free visual catalog of industry best-practices for product onboarding, which can be found on (you guessed it!) productonboarding.com. The project leverages the latest version of Next.js as well as React Server Components served through the new App Router. We use Frigade to power the email subscription flow at the top of the index page.
To test the performance of using Frigade with RSC, we built both an RSC Version of the website and a non-RSC version that uses the Pages Router. We then deployed the two different websites to Vercel and measured performance using the Pingdom Speedtest as well as Google's PageSpeed Insights test.
We saw a whopping 62% reduction in bundle size as well as as 63% improvement in Google's Speed Index on the RSC Version of the website. While we expected an improvement in the RSC version, we were surprised to see such a significant impact. While the served page size increased in the RSC version, it still got to the first contentful paint significantly faster than the client-side version, which had a smaller page size and a larger bundle.
Conclusion and what's next
Given the results of the experiment on our own code, we see demand for RSC-compatible libraries growing going forward. You really can’t argue with dropping more than half your bundle.