React is already equipped to handle rendering on Node servers. A special version of the DOM renderer is available that follows the same pattern as the client side.
import ReactDOMServer from 'react-dom/server'
import App from './App'
ReactDOMServer.renderToString()
This method outputs plain HTML as a string, which can then be placed in the body of the page as part of the server response. On the client side, React detects the pre-rendered content and seamlessly picks up where it left off.
- SSR (Server-Side Rendering) — rendering the client-side or universal application into HTML on the server;
- CSR (Client-Side Rendering) — rendering the application on the client side (in the browser), usually via the DOM;
- Rehydration — "loading" JavaScript components on the client in such a way that they reuse the DOM tree and HTML data generated on the server side;
- Prerendering — running the client application at build time in order to save its initial state as static HTML.
Advantages of server-side rendering
- Faster loading
Applications rendered on the server side load faster than comparable applications rendered on the client. And since the server does the most expensive part of the work, they also load quickly on less powerful devices.
- Much better SEO.
The SEO benefits of server-side rendering. Google rewards sites that load faster with higher page rankings. Google and other search crawlers will have no trouble indexing your server-rendered websites.
Disadvantages of server-side rendering
- Expensive to host
Compared with applications rendered on the client side, hosting server-rendered applications costs more. For every request to your server, it will have to make API calls and then render the HTML before sending it to the client side.
- More complex development
Setting up server-side rendering with React on your own can be a tricky task. However, it becomes much easier if you use one of the frameworks designed for it, such as NextJS.
Comments