rsc-diagnostics

RSC Diagnostics

🚨 Everybody hide! Here come the RSC police!

This is a package that helps indentify and diagnose the causes of large RSC payloads in Next.js. The goal is to avoid situations where users inadvertently DoW themselves due to unnecessary bandwidth usage.

What does this solve?

When a large RSC payload is sent from the server to the client, it incurs bandwidth usage. This is tricky to detect, especially when you don't have access to the source code. Even when you do, dynamically generated RSC payloads are impossible to predict unless you know exactly what data will be used. Most of the time this comes from an upstream provider and most of the time it

What does this not solve?

It does not diagnose RSC payloads that are:

• Dynamically created
• Prefetched from the client
• probably a lot more

Usage

As a CLI

The package exports a binary rsc-diagnostics that can be run as a postbuild script on Vercel or your CI provider. This command takes no options and emits a list of static RSC files with a size larger than the threshold defined in the staticRscPayload configuration option.

As a HOC

It also exports a React higher order component withRscDiagnostics that can be used to wrap a client component (specifically, one that acts as a client entry point, i.e has 'use client'). It is a minimal shell that inspects each prop and outputs its size to the console if it exceeds the threshold set in

future (???):

• rsc parsing and cool data viz
  • drill down into why the payload is large
• docs
• cli runtime options instead of config file
• limit usage of HOC to VERCEL_ENV !== 'preview'
• webpack plugin for adding HOC to client entrypoints automatically
  • iteration 0: walk through source code and find components w the 'use client' directive, list them for the user
• somehow get runtime metrics for RSCs returned from prefetches
  • prob can build on rsc-parser extension for this