RSCをちゃんと理解できなかったばっかりにトンチンカンなミスをしてしまった私です…。
Reactにいたもう一段詳しくなるためRSCについて理解を深めたいと思います。
RSCとは？
長い単語なので会話ではよく省略されることが多い印象ですが、「React Server Components」のことを指します。
クライアントサイドではなく、サーバーサイドでレンダリング（SSR）できるコンポーネントのことです。
ページリクエスト時にサーバー内で実行が可能でデータレイヤーに直接アクセスできます。
そのためコンポーネントの中で直接データを読み取ってレンダーできます。
useStateのようなAPIは利用できないことに注意してください。
useStateを利用したコンポーネントをサーバーサイドで利用しようとするとエラーが出ます。
その場合は対象のコンポーネントをクライアントサイドで利用するコンポーネントを定義しているファイルの一番はじめにuse clientを記述することでエラーを解消できます。
use clientを使えば全てのエラーが解消できるわけではないと思います。
場合によっては本質的な解決になり得ないのであくまでも知識の一環として記憶いただけると良いと思います。
また、async/awaitを利用してコンポーネントを作れるのもサーバーサイドコンポーネントの特徴です。
RSCを理解するためのヒント①：多段階計算stage0の追加
詳しくは下記の記事を一読ください！
全てを理解できたわけではありませんが、わからないながらも理解を進めるヒントになりました！
「新しいステージが追加された」という考え方
しかし、筆者はどちらかというと、「新しいステージが追加された」という理解をしています。従来のReactアプリケーションは、stage 1だけが存在しました。クライアント用のReactアプリケーションひとつだけが存在したのです。SSRという技術もありましたが、これはクライアント向けのコードを無理やりサーバーサイドでも実行するものです。
個人的には非常にわかりやすい考え方だとしっくりきました！
一方、RSCでは従来のReactアプリケーション（stage 1）の前段に、新ステージとしてstage 0が追加されたのです。stage 0では、stage 1に比べて、ステートが無いなどの制限があります。よって、最も自然なRSCの受容の仕方は、「とりあえず全部stage 1（クライアント用）にしておけば従来通り。そこにstage 0（Server Component）を足していく」というものになるでしょう。
既存のものに追加していくと考えると少し難しいと思っていたSRCのことが少し身近に感じられました。
しかし、現在RSCを利用する簡単な方法であるNext.js（のappディレクトリ）では、デフォルトがstage 0で、stage 1のファイルには"use client"という宣言を書かないといけないことになっています。つまり、従来とはデフォルトのステージが変わっているのです。ここにメンタルモデルの飛躍があり、一部の人々にとっては混乱の原因になっているのではないかと思います。
私も混乱していました…。
理解することを後回しにしていましたが、この記事を読んだことで頭の中をずいぶん整理ができました！
いろんなレンダリング手法についても理解する
CSRの概要（Reactの場合）
- CSR（client-side-rendering）は、クライアントでレンダリングする手法
- Reactは中身が空のHTMLファイルを受け取り、JSの解析→Reactが動作→DOMを空の
<div id="root"></div>に格納 - JSはバンドルが大きいのでUIの初期表示に時間がかかる（年月が経てばファイルサイズはどんどん大きくなる）
SSRの概要
- サーバーで初期のHTMLをレンダリングする
- HTMLに含まれる
<script>タグで記述されたJSによってハイドレーション1が行われる - 初期表示速度、ページの主要コンテンツが表示されるまでの速度はCSRに比べて早い
- ページ単位でデータの取得とレンダリングが実行される
【まとめ】ReactServerComponentsについて理解する
RSCについて調べてみてReactやNext.jsのことをさらに理解できました。
正直一度で全て頭に入る量ではないので定期的に読み直したいと思います！
今回参考にさせていただいた記事2つを利用すると理解を進めやすいと思うので一度確認してみてください！
参考にした記事