search

pauldotknopf / react-aspnet-boilerplate

A starting point for building isomorphic React applications with ASP.NET Core, leveraging existing techniques.
MIT License
288 stars 52 forks source link

Update server.js to use renderToStaticMarkup #23

Closed fa10 closed 8 years ago

fa10 commented 8 years ago

This is actually a question is there any reason why not to use ReactDOM.renderToStaticMarkup ?

pauldotknopf commented 8 years ago

I'm not familiar with that method.

Every boilerplate I've seen uses renderToString, for example, react-redux-universal-git-example does.

What benefits do you get using that method?

fa10 commented 8 years ago

By using ReactDOM.renderToStaticMarkup the server-side rendered components doesn't include the data-reactid tag. But i dont know if it trigger other errors?

Similar to renderToString, except this doesn't create extra DOM attributes such as data-react-id, that React uses internally. This is useful if you want to use React as a simple static page generator, as stripping away the extra attributes can save lots of bytes.

https://facebook.github.io/react/docs/top-level-api.html

bradchristensen commented 8 years ago

The reason to use renderToString is exactly as the documentation says :smile:

As I understand it, by adding 'data-react-id' attributes, this allows the client-side React to effectively sync with the server-generated React markup. This means you don't take as significant a performance hit on the page's initial render, because React recognises that it doesn't need to perform any DOM manipulation.

You would use renderToStaticMarkup if you were rendering the page server-side, but not then running React on the client-side too (which I imagine is a fairly uncommon use case as even the simplest pages these days have some dynamic elements).

pauldotknopf commented 8 years ago

@bradchristensen, thanks for the clarification.