If you're a web developer and you write your frontend in NextJS then you will probably be interested to see how the Hydration Process works for your app. Honestly I do not want to get into the nitty gritty of this in this specific blog post because I believe NextJS documentation explains it very well.Check out this documentation to understand more on this.
And this thread from Stackoverflow for Questions Regarding this
But I want to answer one thing before you start scratching your head about it(trust me we all have been there!)
So the question you have to ask yourself is why would these performance metrics matters and why should you check out the tracing tool provided by Google Chrome??
The simple answer would be :
When diagnosing performance problems it can be valuable to see what Chrome is doing "under the hood." One way to get a more detailed view into what's going on is to use this tool by Chrome.
A bit elaboration :
The tracing tool by chrome records the activity in Chrome's multi-process architecture processes to see what each process is doing in a hierarchical view. This could have a lot of information depending on your application size but sifting through it can help identify performance bottlenecks, slow operations, and JavaScript events with irregular lengths.
Check out this links to learn more on tracing:
Tracing Ecosystem Explainer docs
So now let's get back to Checking NextJS Hydration on chrome. After your nextJS application is running on chrome:
Right Click on your mouse and Click "Inspect"
Find "Performance Insights tab" and Click on it
Helpful link
There you should see two options under a red button like this:
If you click on the "Start Recording" and do some activity on your application and then stop recording chrome will record the trace events regarding your actions.After you're done recording you should see a nice timeline visualization of activity and if you click on the "Measure Page load" then there will be a similar timeline with trace events but only for the page you're on.
In both cases I invite you to play around and try to understand what is going on and if you don't understand anything there will be a details tab where you can click and check the details of a specific event or check the links I have provided you in this blog.
And finally if you really want to get to the bottom of your performance analytics you can either "Start recording an activity" or "Measure A specific page load" then on the same row where you have the buttons for it you can click "export" and it will export a profile.json file for you.Then go to chrome://tracing and Click on "load" or go here for better visualization.
In both cases you will need to upload your Profile.Json file and the use WASD keys on your keyboard to get into little details.
But you will need to understand about Scheduling Algorithms to grasp the whole picture of what is exactly going on "Behind the Scene".
That's all for today. #happyHacking
Top comments (0)