Tuesday, April 10, 2018

Server Side Rendering in React v16.0

React 16 improves the speed of server side rendering. React 16 provides a new hydrate() method to render components which are processed in the server side.

Server side rendering is performed with Node web servers express, using the renderToString() method which compiles the react component in the server side and send the HTML to the client.  

In React 15 we use the render method to render the server component on the client side

render(<MyPage/>, document.getElementById("domNode"));

In React 16 we should use the hydrate() method instead of render() to render components which are compiled in the server side.

import { hydrate } from "react-dom"
import MyPage from "./MyPage"
hydrate(<MyPage/>, document.getElementById("content"));

In React 16 the render() method is used for rendering the content solely on the client side, and hydrate() is used for  rendering on top of server-side rendered markup.

Search Flipkart Products:

No comments: