Conversation
Size changesDetails📦 Next.js Bundle Analysis for react-devThis analysis was generated by the Next.js Bundle Analysis action. 🤖
|
| Page | Size (compressed) |
|---|---|
global |
115.14 KB (🟡 +50 B) |
Details
The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!
Five Pages Changed Size
The following pages changed size from the code in this PR compared to its base branch:
| Page | Size (compressed) | First Load |
|---|---|---|
/404 |
126.49 KB (🟡 +108 B) |
241.63 KB |
/500 |
126.5 KB (🟡 +108 B) |
241.63 KB |
/[[...markdownPath]] |
128.93 KB (🟡 +108 B) |
244.07 KB |
/errors |
126.74 KB (🟡 +108 B) |
241.88 KB |
/errors/[errorCode] |
126.71 KB (🟡 +108 B) |
241.85 KB |
Details
Only the gzipped size is provided here based on an expert tip.
First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 10% or more, there will be a red status indicator applied, indicating that special attention should be given to this.
|
you might find https://github.com/gaearon/rscexplorer helpful, I'm relatively sure it works correctly but it has a bunch of stuff you don't need |
|
thanks @gaearon yeah i gave that to claude as a reference as well as @lubieowoce's branch |
eps1lon
left a comment
eps1lon
left a comment
There was a problem hiding this comment.
Super exciting to get these going.
/learn/rsc-sandbox-test produces a 404 when deployed. Works locally though.
I think something fucky is happening
What's that referring to?
does this stream? can it?
It does the way you structured it now. Each Flight chunk is sent separately with postMessage which is the streaming way on the Server. It wouldn't stream if you'd accumulate all chunks before sending them. The Client puts the chunks into a stream as well that's passed to the Client for decoding before all chunks have. So the Client is streaming as well.
Editing sandboxes can get into a broken state
Seems fine from my random testing locally.
| After modifying `worker-server.source.js` or `webpack-shim.source.js`: | ||
|
|
||
| ```bash | ||
| node scripts/buildRscWorker.mjs | ||
| ``` |
There was a problem hiding this comment.
Can we do this in CI to validate this has been done? Pretty easy to forget otherwise.
There was a problem hiding this comment.
it will automatically run on yarn build
There was a problem hiding this comment.
We could add a CI check for it, but not sure if it's worth running a CI check on every diff for somthing that will in all likelyhood almost never need to run again?
There was a problem hiding this comment.
worker-server.source is a product of rsc-server? There's plenty of things we might change there. Definitely for when we showcase console replaying.
| var msg = err && err.message ? err.message : String(err); | ||
| var stack = err && err.stack ? err.stack : ''; | ||
| console.error('[RSC Server Error]', msg, stack); |
There was a problem hiding this comment.
| var msg = err && err.message ? err.message : String(err); | |
| var stack = err && err.stack ? err.stack : ''; | |
| console.error('[RSC Server Error]', msg, stack); | |
| console.error('[RSC Server Error]', err); |
That way browsers can display the error correctly (including other properties like cause) while ensuring ignore-listing works.
There are more places that needlessly dissect the error instead of logging it as-is.
There was a problem hiding this comment.
Updated on the server, on the client we need to access digest because the server is actually running the prod build. I tried to get it to run the client version, but I couldn't get it to work.
|
@eps1lon thanks! rsc-sandbox-test is gated to DEV only. The something fucky part is old, i don't remember what it was though |
|
OK feedback updates done, I think this is ready for final feedback |
Gotcha, so we need an actual page where we demo it to test deploy behavior? |
|
Yeah, I confirmed it works in a preview deploy on an earlier commit before I made it dev-only. I'll add it to an actual docs page next and we can confirm it works in that preview deploy too. |
3 participants
Overview
Adds browser-only
<SandpackRSC>component for RSC sandboxes.This uses the browser version of
react-server-dom-webpackto run RSCs in a web worker, so there's no custom sandpack bundler. In the worker, we usesucraseto transpile JSX and then send it back to the client.It currently does not support opening it in an external sandbox, but we can set that up with a new custom template (might need help from the sandpack folks).