Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
December 18, 2022 12:27 pm GMT

Hydration in React

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 Reacts Meta Framework. There are few popular meta framework in the reacts 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 reacts 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 doesnt 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


Original Link: https://dev.to/mohammedimtiyaz/hydration-in-react-25d7

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To