【Next.js】RSCから見るレンダリングの変遷（MVC〜RSC）

はじめに 最近、「App Routerで開発すること多いけど、RSCを最大限活用できていないのでは？」と思ったので、MVCアーキテクチャからRSCにかけてのレンダリングの変遷を調べ、どのようにしたら、RSCにおける良い実装ができるかを学習したので、その内容をまとめたいと思います。 本記事では、MVC〜RSCの変遷を記述しているのですが、具体的には、以下の順で解説しています。 1.MVC 2.SPA 3.SSR 4.RSC これらのレンダリングの変遷を見ていき、RSCでどのように実装したら、よりパフォーマンスの良いフロントエンドを開発できるかを解説しようと思います。 MVCアーキテクチャ まず、MVCではどのようにレンダリングしていたかを解説します。 図にすると以下のようになるかと思います。 MVCでは以下の順で処理を行っていました。 1.クライアントからリクエスト 2.Routingに基づ