So I've been googling this for a while. With all the rendering improvements added to next it becomes harder to manage larger apps and their optimization. I was wondering: Is there some extension, library, or something similar, that allows us to easily show:
- Which parts of the page were present in initial response?
- Which parts of the page were streamed in?
- Which components are hydrated (essentially which are client components)?
- Which components are static and which are dynamic (assuming ppr: true)?

Next has really cool visualizations in their videos and docs to explain those concepts, but I'd love to see that in live page as togglable overlay. It would tremendously help in adapting new versions and features that next have and while I have a good understanding how to use those concepts, I still find it hard to have a good overview of how the page was rendered without reading the code top-to-bottom and browsing network responses.

One of the examples of the visualization / overlay I was mentioning lives on the Partial Prerendering docs:
https://nextjs.org/docs/app/building-your-application/rendering/partial-prerendering