nextjs-utils-chromium-extension
A Google Extension that allows for easily viewing the size of the windows.__NEXT_DATA__ static data that is downloaded with every server-side load from the open source NextJS framework (server-side rendering create-react-app replacement built by vercel.com)
Getting Started
Simply go to the chrom store and download the extension titled "NextJS Utils Extension"
Compatability
Works with all versions of NextJS that I know of. Please create an issue if you find one that does not work. Tested with V7 and V8.
Inspiration
Building server-side rendered React apps requires that after all the HTML generated from the node server is generated, that HTML must be hydrated. That is to say, all the events must be added back and the data (or state) associated with all elements must be reloaded. The most popular way to do this (which is how NextJS does it) is to create a static object declaration window.__NEXT_DATA__ that gets downloaded in a script tag of the initial download. Then, when the client side JavaScript does eventually run, that JavaScript uses that static data to hydate all the HTML.
If you want to learn more about this, I (Peter Kellner) have two courses on Pluralsight that talk about this. The first is titled Server Side Rending and is a 2 hour primer on using the NextJS framework for bulding your apps. The second course, though not specifically about server side rendering, uses NextJS and server side rendered code for all it's examples (Using React Hooks).
Installing
https://chrome.google.com/webstore/detail/nextjs-utilities-extensio/ffcogmoganomoabikgmcmckdgojnpldo
Authors
Peter Kellner, 73rd Street Associates
License
This project is licensed under the MIT License - see the LICENSE.md file for details
Acknowledgments
- Chromium Team including Simeon Vincent