React/Nextのレンダリングをまとめてみた - Qiita

はじめに 業務でReact.jsやNext.jsを使用していますが、特にレンダリングに関する知識が整理できていなかったことや、React18の新しい機能や概念を今後の開発のために整理したいと考えて今回の記事を作成するに至りました。 React.jsのレンダリング React は必要な箇所のみを更新する React DOM は要素とその子要素を以前のものと比較し、DOM を望ましい状態へと変えるのに必要なだけの DOM の更新を行います。 React.jsは、JavaScriptのライブラリであり、仮想DOMを構築して実際のDOMとの差分を検知し必要な部分だけを更新することで高速なレンダリングを実現します。それにより、素早い動作をユーザーに提供することができています。一方で、SPAの場合では、Reactコンポーネント(JavaScriptファイル)はクライアントサイドで実行されるため、初回ロ