Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React - What is the difference between renderToString and renderToStaticMarkup

Tags:

reactjs

In React there's a renderToString and renderToStaticMarkup.

As far as I know renderToString retains all the react-id attributes which makes it slower to load. So when is using renderToString actually better?

like image 318
yangli-io Avatar asked Oct 30 '15 00:10

yangli-io


People also ask

What is renderToString in React?

renderToString(element) Render a React element to its initial HTML. React will return an HTML string. You can use this method to generate HTML on the server and send the markup down on the initial request for faster page loads and to allow search engines to crawl your pages for SEO purposes.

Is React client-side rendering or server side rendering?

React along with other framework like angular and vue. js are traditional client side framework ,they run in browser but there are technology to run this framework on server side, and next. js is a solution for running react application server side.It also makes react development very simple.

What is a static markup?

React - Static Markup (renderToStaticMarkup) This is same output than the server-rendered markup (the ToString function) but without any react attribute. You use React as a simple Static Web Generator. You can also create static page with dynamic content by pre-rendering server-rendered markup.

What is new in React 17?

React 17 deletes the optimization of “event pooling” from React. In major browsers, it does not improve efficiency and confuses even experienced react users. React reused the event objects for output in older browsers between separate events and set all event fields to null.


1 Answers

renderToString() is for when you want to pre-render on the server and eventually run the same React code on the client, re-using the DOM which was generated from the server markup instead of rendering from scratch.

The top-level component rendered this way includes a checksum the initial client render can use to determine that the DOM it would have generated matches what was sent from the server.

like image 188
Jonny Buchanan Avatar answered Sep 20 '22 06:09

Jonny Buchanan