5 ms·

React has become the most popular way to build front ends that are interactive. Many sites still need rendering on the server side for SEO purposes (CSR and SEO

React has become the most popular way to build front ends that are interactive. Many sites still need rendering on the server side for SEO purposes (CSR and SEO do not mix). So when your content needs to be highly indexable but has many interactive elements SSR react seems like a good choice. In this scenario, Next.js is the most "standardized" choice.

mr_toad 8y ago
React can render static markup without additional frameworks. You can basically run your React code in Node.js and either cache the HTML to disk or have it run on request. ReactDOMServer.renderToStaticMarkup();
- mharroun 8y ago
  This ignores the "has many interactive elements" part of my comment. Having server-side render react code that can also hydrate and then be interactive (or at least parts of it) is not that simple.
  - mpeg 8y ago
    Hydration is also built-into React [0] I'm curious about what you consider complex about an SSR setup with React, I'm becoming very familiar with the internals of React and frameworks like Next and they're often relatively thin wrappers over the built-in features. [0]: https://reactjs.org/docs/react-dom.html#hydrate https://reactjs.org/docs/react-dom.html#hydrate
geofft 8y ago
If I can ask a somewhat ignorant question... is there no way to render a traditional HTML page from a normal (Django/Rails/PHP-style) server-side template, and then add React on top for interactivity? Is it that everything has to be built in React and it can't work with exising DOM elements? or just that it's easier to do everything in React and not have a separate static template, or something? Is the answer any different for React Native? (I guess you lack a server-side renderer at that point, so maybe it's easier to plan to do everythig in React if you plan on using React Native?)
- mharroun 8y ago
  This is a way to go in many use cases. This though doesn't work super well if the same content/components in some contexts/pages needs to be rendered on the client side and in other cases needs to be rendered server side.
- acemarke 8y ago
  You can absolutely add React piecemeal to an existing page. That's actually how Facebook does it. You just call `ReactDOM.render()` multiple times, with different target parent nodes. I'm doing it at work in an app that's still 80% Backbone. We're replacing Backbone Views piecemeal, with each chunk becoming a separate React component tree [0]. It's certainly easier if it's all one big React app from page load, though. I haven't used React Native myself, but I _think_ you can use RN in a similar way. I think I remember reading that the Facebook app uses RN for certain pages, but not others. [0] https://blog.isquaredsoftware.com/2017/07/react-redux-backbone-integration/ https://blog.isquaredsoftware.com/2017/07/react-redux-backbo...
- scaryclam 8y ago
  Yep, and this is actually the method I'd recommend for a variety of reasons. When we were looking for a modern framework for a project a while ago, the ability to do this was actually one of the main reasons we gave react the thumbs up.

mr_toad 8y ago

React can render static markup without additional frameworks. You can basically run your React code in Node.js and either cache the HTML to disk or have it run on request. ReactDOMServer.renderToStaticMarkup();

mharroun 8y ago
This ignores the "has many interactive elements" part of my comment. Having server-side render react code that can also hydrate and then be interactive (or at least parts of it) is not that simple.
- mpeg 8y ago
  Hydration is also built-into React [0] I'm curious about what you consider complex about an SSR setup with React, I'm becoming very familiar with the internals of React and frameworks like Next and they're often relatively thin wrappers over the built-in features. [0]: https://reactjs.org/docs/react-dom.html#hydrate https://reactjs.org/docs/react-dom.html#hydrate

geofft 8y ago

If I can ask a somewhat ignorant question... is there no way to render a traditional HTML page from a normal (Django/Rails/PHP-style) server-side template, and then add React on top for interactivity? Is it that everything has to be built in React and it can't work with exising DOM elements? or just that it's easier to do everything in React and not have a separate static template, or something? Is the answer any different for React Native? (I guess you lack a server-side renderer at that point, so maybe it's easier to plan to do everythig in React if you plan on using React Native?)

mharroun 8y ago
This is a way to go in many use cases. This though doesn't work super well if the same content/components in some contexts/pages needs to be rendered on the client side and in other cases needs to be rendered server side.
acemarke 8y ago
You can absolutely add React piecemeal to an existing page. That's actually how Facebook does it. You just call `ReactDOM.render()` multiple times, with different target parent nodes. I'm doing it at work in an app that's still 80% Backbone. We're replacing Backbone Views piecemeal, with each chunk becoming a separate React component tree [0]. It's certainly easier if it's all one big React app from page load, though. I haven't used React Native myself, but I _think_ you can use RN in a similar way. I think I remember reading that the Facebook app uses RN for certain pages, but not others. [0] https://blog.isquaredsoftware.com/2017/07/react-redux-backbone-integration/ https://blog.isquaredsoftware.com/2017/07/react-redux-backbo...
scaryclam 8y ago
Yep, and this is actually the method I'd recommend for a variety of reasons. When we were looking for a modern framework for a project a while ago, the ability to do this was actually one of the main reasons we gave react the thumbs up.