React Introduction to Server-Side Rendering Rendering components

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Extensions
> Step 2: And Like the video. BONUS: You can also share it!

Example

There are two options to render components on server: renderToString and renderToStaticMarkup.

renderToString

This will render React components to HTML on server. This function will also add data-react- properties to HTML elements so React on client won't have to render elements again.

import { renderToString } from "react-dom/server";
renderToString(<App />);

renderToStaticMarkup

This will render React components to HTML, but without data-react- properties, it is not recommended to use components that will be rendered on client, because components will rerender.

import { renderToStaticMarkup } from "react-dom/server";
renderToStaticMarkup(<App />);


Got any React Question?