結論

「React」のレンダリングと「ブラウザ」のレンダリングは違う

なぜ調べたか

Next.jsのドキュメント内Data Fectching overviewの項目で
SSR(サーバーサイドレンダリング)やCSR(クライアントサイドレンダリング)などの言葉が出てきます。
ブラウザのレンダリングとReactのレンダリングについて、違いをわかっておらず混乱したことがあるのでまとめました。

ドキュメント

この記事はReact(2022.11.17現在BETA版)ドキュメント内Render and Commitの説明を自分なりに言語化したものです。
間違ってたらご指摘ください！

Reactのレンダリングとは

ドキュメントではレンダリングのステップを3つに分けて説明しています。

1. Trigger a render（レンダリングのきっかけ）
2. React renders your components（コンポーネントのレンダリング）
3. React commits changes to the DOM（DOMの反映）

Step 1: Trigger a render（レンダリングのきっかけ）

コンポーネントがレンダリングするきっかけは下記2つ。

• 初回のレンダリング
• コンポネート（または親など祖先コンポーネント）のstateが変わった時

初回レンダリング

アプリケーション起動→createRootを呼び出す→renderメソッド（レンダリングメソッド）を呼び出す。

import Image from './Image.js';
import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'))
root.render(<Image />);

再レンダリング（stateに変更があったとき）

2回目以降のレンダリングは、set関数を使用することで再レンダリングさせることが可能。
set関数の例↓

const [name, setName] = useState('Edward');

Step 2: React renders your components（コンポーネントのレンダリング）

After you trigger a render, React calls your components to figure out what to display on screen. “Rendering” is React calling your components.

「レンダリング」はReactがコンポーネントを呼び出すこと。

• 初回のレンダリングでは、Reactはrootコンポーネントを呼び出す。
• 2回目以降のレンダリングは、レンダリングのきっかけとなった関数コンポーネントが呼び出される。

これらのプロセスは、ネストされたコンポーネントがどんどんレンダリングされていき、処理が終わるまでずっと続く。

Step 3: React commits changes to the DOM（DOMの反映）

Reactは、コンポーネントをレンダリング後、DOMを反映する。
初回レンダリングでは、appendChild()でDOMノードをスクリーンに表示する。

• 再レンダリングでは、必要最小限の操作で、DOMを最新のレンダリングと一致させる。
• レンダリングでDOMに差異がある場合のみDOMが反映がされる。（差分がなければ反映なし）

Epilogue: Browser paint（エピローグ：ブラウザー描画）

After rendering is done and React updated the DOM, the browser will repaint the screen.
Although this process is known as “browser rendering”, we’ll refer to it as “painting” to avoid confusion in the rest of these docs.

レンダリングとReactのDOM生成終了後、ブラウザーがスクリーンに表示します。このプロセスは「ブラウザレンダリング」として知られていますが、私たちは混乱を避けるためにドキュメント内では「描画」と呼びます。

参考記事

Reactのレンダリングを理解する

以上です！