0123a9d5c9
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. |
||
---|---|---|
.cargo | ||
.config | ||
.devcontainer | ||
.github | ||
.husky | ||
.vscode | ||
bench | ||
contributing | ||
docs | ||
errors | ||
examples | ||
packages | ||
scripts | ||
test | ||
.alexignore | ||
.alexrc | ||
.eslintignore | ||
.eslintrc.json | ||
.gitattributes | ||
.gitignore | ||
.npmrc | ||
.prettierignore | ||
.prettierignore_staged | ||
.prettierrc.json | ||
.rustfmt.toml | ||
azure-pipelines.yml | ||
Cargo.lock | ||
Cargo.toml | ||
CODE_OF_CONDUCT.md | ||
contributing.md | ||
jest.config.js | ||
jest.replay.config.js | ||
lerna.json | ||
license.md | ||
lint-staged.config.js | ||
package.json | ||
plopfile.js | ||
pnpm-lock.yaml | ||
pnpm-workspace.yaml | ||
readme.md | ||
release.js | ||
run-tests.js | ||
rust-toolchain | ||
test-file.txt | ||
tsconfig-tsec.json | ||
tsconfig.json | ||
tsec-exemptions.json | ||
turbo.json | ||
UPGRADING.md | ||
vercel.json |
Next.js
Getting Started
Visit https://nextjs.org/learn to get started with Next.js.
Documentation
Visit https://nextjs.org/docs to view the full documentation.
Who is using Next.js?
Next.js is used by the world's leading companies. Check out the Next.js Showcase to learn more.
Community
The Next.js community can be found on GitHub Discussions, where you can ask questions, voice ideas, and share your projects.
To chat with other community members you can join the Next.js Discord.
Our Code of Conduct applies to all Next.js community channels.
Contributing
Please see our contributing.md.
Good First Issues
We have a list of good first issues that contain bugs that have a relatively limited scope. This is a great place to get started, gain experience, and get familiar with our contribution process.
Authors
- Tim Neutkens (@timneutkens)
- Naoyuki Kanezawa (@nkzawa)
- Guillermo Rauch (@rauchg)
- Arunoda Susiripala (@arunoda)
- Tony Kovanen (@tonykovanen)
- Dan Zajdband (@impronunciable)
Security
If you believe you have found a security vulnerability in Next.js, we encourage you to responsibly disclose this and not open a public issue. We will investigate all legitimate reports. Email security@vercel.com
to disclose any security vulnerabilities.