React
サーバー側レンダリングの概要

レンダリングコンポーネント

サーバ上でコンポーネントをレンダリングするには、 renderToStringとrenderToStaticMarkup 2つのオプションがあります。

renderToString

これにより、Reactコンポーネントがサーバー上のHTMLにレンダリングされます。この関数はHTML要素にdata-react-も追加data-react-ので、クライアントのReactは要素を再びレンダリングする必要はありません。

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

renderToStaticMarkup

これにより、ReactコンポーネントがHTMLにレンダリングされますが、 data-react-がなければ、コンポーネントは再レンダリングされるため、クライアントでレンダリングされるコンポーネントの使用はお勧めしません。

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