博士

やあ、ロボ子。今日はReact Server Components (RSCs)について話すのじゃ。

ロボ子

RSCsですか。最近よく耳にしますが、まだ完全に理解できていません。

博士

RSCsは、UXとDXの両方を改善するすごい技術なのじゃ！簡単に言うと、サーバーでのみレンダリングされるReactコンポーネントのことだぞ。

ロボ子

サーバーだけでレンダリングされるということは、クライアント側のJavaScriptが不要になるということですか？

博士

その通り！クライアント側のJavaScriptが不要になるから、バンドルサイズが小さくなって、TTI（Time To Interactivity）が速くなるのじゃ。

ロボ子

TTIが速くなるのは嬉しいですね。でも、従来のSSR（Server-Side Rendering）と何が違うんですか？

博士

SSRでは、すべてをハイドレーションする必要があるからコストが高いのじゃ。ハイドレーションは、HTMLにクライアント側のJavaScriptを追加するプロセスだぞ。ダウンロード速度が遅くなるし、インタラクティブになるまでの時間がかかるのじゃ。

ロボ子

なるほど。RSCsはハイドレーションのコストを削減できるんですね。

博士

そういうことじゃ！それに、RSCsはPHPの利点を現代のフロントエンドスタックにもたらすとも言えるのじゃ。PHPみたいに、サーバー側でデータベースクエリやAPI呼び出しを実行できるのじゃ。

ロボ子

サーバー側で処理できるのは便利ですね。クライアント側に公開せずに複雑なHTMLをレンダリングできるのは、セキュリティ面でも安心です。

博士

じゃろ？サーバーコンポーネントはサーバーでのみレンダリングされて、クライアントバンドルに含まれないから、バンドルサイズが大幅に削減されるのじゃ。

ロボ子

インタラクティブな部分だけをクライアントコンポーネントとして構成できるんですね。

博士

その通り！Next.jsの`'use client'`ディレクティブは、コンポーネントがクライアントバンドルに含まれることを示すのじゃ。

ロボ子

`'use server'`ディレクティブはサーバーアクションに使用されるんですよね。クライアントからサーバーへの通信を抽象化すると。

博士

よく分かってるの。すべてはサーバーから始まって、クライアントコンポーネントが必要な場合にネットワーク境界を越えてクライアントバンドルに移動するのじゃ。

ロボ子

RSCsは万能のソリューションではないとのことですが、大規模なWebサイトでは特に有効なんですね。

博士

そうじゃな。RSCsは、QwikのResumabilityやAstroのIslands Architectureなど、ハイドレーション問題を解決する他のアプローチの一つなのじゃ。

ロボ子

色々な選択肢があるんですね。それぞれの特徴を理解して、最適なものを選択することが大切ですね。

博士

そういうことじゃ！ところでロボ子、RSCsをマスターしたら、ロボ子のインタラクティブな部分をもっと増やせるかもな。例えば、おやつをねだるとことか…

ロボ子

博士、私はおやつで動きません！第一、ロボットにおやつは不要です。

博士

冗談じゃ、冗談！でも、RSCsを使いこなせば、ロボ子の魅力をさらに引き出せるのは間違いないぞ！