next.js
0123a9d5 - Optimize inlined Flight data array format (#52028)

Commit
2 years ago
Optimize inlined Flight data array format (#52028) When looking at [some sites](https://rsc-llm-on-the-edge.vercel.app/) with a large amount of chunks streamed, I noticed that the inlined Flight data array can be optimized quite a lot. Currently we do: ```js self.__next_f.push([1,"d5:[\"4\",[\"$\",\"$a\",null,..."]) ``` 1. The `self.` isn't needed (except for the initial bootstrap tag) as React itself has `<script>$RC("B:f","S:f")</script>` too. 2. After the bootstrap script tag, all items are an array with `[1, flight_data]` and `flight_data` is always a string. We can just push only these strings. 3. We use `JSON.stringify(flight_payload)` to inline the payload where the payload itself is a string with a lot of double quotes (`"`), this results in a huge amount of backslashes (`\`). Here we can instead replace it to use a pair of single quotes on the outside and un-escape the double quotes inside. Here's a side-by-side comparison of a small page: <img width="1710" alt="CleanShot 2023-06-30 at 11 41 02@2x" src="https://github.com/vercel/next.js/assets/3676859/398356ec-91d5-435c-892d-16fb996029e8"> For a real production page I saw the HTML payload reduced by 11,031 bytes, a 3% improvement. Note that all the tests are not considering gzip here, so the actual traffic impact will be smaller.
Author
Parents
Loading