Introduction :
With the increased in popularity, React is the most used UI library in Web Application. React can only flex its muscles in the client-side.
React can do great job in CSR. However, in case of Server Rendering,it does not come with smooth DX. It carries the burden of server side configuration stuff.
So comes the “The React’s Meta Framework”. There are few popular meta framework in the react’s ecosystem like, Nextjs, Remix, Fresh,etc.
All these framework have the common agenda i.e SSR. There are different components for SSR lile routing, bundling,transpiling,etc but the common thing is react’s hydration process.
What is hydration?
Hydration is the process of using client-side JavaScript to add application state and interactivity to server-rendered HTML.
but instead of having an empty DOM to render all of our react components into (CSR), we have a DOM that has already been built, with all our components rendered as HTML.
A typical React application relies on client-side rendering. Instead of parsing HTML to create the DOM, client-side rendering uses JavaScript to create it. A minimal HTML document serves as the application container, and only contains links to the JavaScript and CSS necessary to render the application.
hydrate lets you display React components inside a browser DOM node whose HTML content was previously generated by react-dom/server
hydrate expects the rendered content to be identical with the server-rendered content.
Server-Side:
ReactDOMServer — to render components to static markup.
renderToString() :Render a React element to its initial HTML. React will return an HTML string
renderToStaticMarkup() : Similar to renderToString() , except this doesn’t create extra DOM attributes that React uses internally, such as data-reactroot. This is useful if you want to use React as a simple static page generator, as stripping away the extra attributes can save some bytes.
Client-side:
ReactDOM - ReactDOM is a package that presents DOM-specific methods
render()- It returns a reference to the component after rendering a React element into the DOM in the provided container
hydrate()-to hydrate a container whose HTML contents were rendered by ReactDOMServer. React will attempt to attach event listeners to the existing markup.
Benefits of using Hydration
Improves SEO
Decreases the initial load times
References:
[https://beta.reactjs.org/apis/react-dom/hydrate]
https://blog.saeloun.com/2021/12/16/hydration.html
Top comments (0)