What is a technical definition of "hydration" within NextJS? #22276
-
|
The terms hydration, rehydration, hydrate, etc. appear periodically in NextJS documentation, but I'm unclear exactly what they refer to.
From context clues (and ReactJS documentation) it seems hydration is the process of imbuing server-rendered HTML with the client-side JS necessary for dynamic elements or interaction? But I would appreciate a more technical definition. Is hydration a specific event? A general concept accomplished in many ways? A specific function or method? Is it just inherited from ReactJS with no changes? Thanks dearly! |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 5 replies
-
|
I'm trying to figure this out too. I'm honestly not sure if this is correct, so I would appreciate clarifications and corrections. I'm trying to compare this to concepts like reconciliation and First Contentful Paint.
What's left is react reconciliation - I think that if that single page loads leads to a lot of additional commits, there's a reconciliation process that happens after the end of I'm not sure how this relates to the number of commits in React Profiler for a single page load. I think that all commits after first commit will happen after |
Beta Was this translation helpful? Give feedback.
-
|
What's "reconciliation" in your context? |
Beta Was this translation helpful? Give feedback.
-
|
When additional renders have to happen, the reconciliation process involves comparing the resultant virtual doms to see if there are actual changes and if a commit needs to happen. |
Beta Was this translation helpful? Give feedback.
-
|
Reconciliation occurs when the virtual DOM checks the main DOM for changes so as to know what part to update |
Beta Was this translation helpful? Give feedback.
-
|
thanks, and I also look into what FCP is stands for. The First Contentful Paint (FCP) metric measures the time from when the page starts loading to when any part of the page's content is rendered on the screen. |
Beta Was this translation helpful? Give feedback.
-
|
A hydration means "Each generated HTML is associated with minimal JavaScript code necessary for that page. When a page is loaded by the browser, its JavaScript code runs and makes the page fully interactive " |
Beta Was this translation helpful? Give feedback.
-
|
What a bad name to give to something like that. |
Beta Was this translation helpful? Give feedback.
A hydration means "Each generated HTML is associated with minimal JavaScript code necessary for that page. When a page is loaded by the browser, its JavaScript code runs and makes the page fully interactive "