Checking NextJS Hydration on chrome

Mohammad Mehadi Hasan — Thu, 19 Jan 2023 22:46:50 +0000

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:

chromium docs

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

Generating a whole database script in MySQL workbench #databases #MySQL #MySQL_workbench

Mohammad Mehadi Hasan — Sat, 24 Apr 2021 03:14:24 +0000

Hello there devs! I hope you guys are doing well and staying safe in this pandemic. So, as I took a database course at my university this semester and our teacher asked us to go for SQL first then learning NoSQL databases such as MongoDB.After the first half of the course, we had to create&design a whole working database in SQL and present it to the teacher as a project. As I knew MySQL syntax before I preferred to make my project in MySQL and as I am primarily a Windows user I am writing my SQL scripts in MySQL workbench.But it took me by surprise when our teacher asked us to send him only one SQL script which has everything he asked for in the first place.So to describe it a bit more I had to send him only one SQL script when executed it should create the database at the first place then the tables, views,stored procedures and functions as well.I was a little bit surprised because usually in the professional work environment you are supposed to make them in separate scripts and put them under source control so that your teammates can also work on it without messing up with the data inside. Anyway as I had to do it for my grades I had to look for this up on the internet and took me some time to get how to do it properly even tho I thought I knew how to use MySQL Workbench.So I am writing this just in case you are looking for it for the first time.
so at first we will go to the MySQL Workbench and connect a server you connected to before.Then go to the main menu and go to Server and then go to Data Export

After that, you will see the list of Database schemas you can select to export.In my case, I had to select only one.

So after selecting the Database Schema you can select the associated objects with it like the tables,views and stored procedures.Go ahead and select the objects you want to export in the SQL script.

Okay. This part is a little bit important.
You have 3 choices.

Dump Structure and Data
Dump Data only
Dump Structure only

So you probably can understand by the names what each option would do for you.If you only want to export the structure with no data you can select that or you can only export the data if that's what your task is.But in my case, I had to export both the structure and the data along with it so I went with Dump Structure and Data.

okay, we are almost done. Now we have the choice of putting our script in a folder or in a single file(depends however you prefer) and there is also a box where you can check it to include create schema meaning the Data Definition Language(DDL) or not.

So after selecting according to your needs you just have to click the

Start Export

button to generate a sql script of the whole schema and you can either put it under source control and share the link or you can directly send the .sql file by email.
I hope it helped you in some way.

DEV Community: Mohammad Mehadi Hasan

Checking NextJS Hydration on chrome

Generating a whole database script in MySQL workbench #databases #MySQL #MySQL_workbench