この記事は何
社内勉強会用の資料のメモです。
React Server Componentsについてまとめています。
React Server Componentsとは
React Server Componentsとは、文字通りサーバーでコンポーネントの生成を行い、そのコンポーネントデータをクライアントで取得、レンダリングするという技術です。
↑の記事がわかりやすいので参考にしてみてください。
サーバーで実行を行うため、以下のような特徴があります。
- useStateやuseContext、useEffectなど、コンポーネントをリレンダーする処理は実行できない(propsは受け取れる)
- async/awaitなどを使うことが可能（呼び出し元では
Suspenseを用いて非同期的に描画を行う） - Server ComponentsからClient Componentsを呼ぶことが可能
簡単なイメージだとこんなことができるようになります。
const ServerComponent = async ({ id }) => {
const { data } = await axios.get(`/endpoints/${id}`)
return(
<ClientComponent data={data} />
)
}
const ClientComponent = ({ data }) => {
return(
<div>Hello {data.name}</div>
)
}
何が嬉しいの？
得られるメリットは設計面、パフォーマンス面の二つの側面であります。
設計面のメリット
設計面で一番大きなメリットは、「データの取得処理とそのデータを用いたDOMの表現が簡潔になる」ことです。
今まではReactでデータのフェッチなど、外部アクセスを行おうと思うと、以下のような実装をする必要がありました。
const Component = (id) => {
const [data, setData] = useState(null)
useEffect(() => {
axios.get(`/endpoints/${id}`)
.then(result => {
setData(result.data)
})
}, [])
return data ? (<div>Hello {data.name}</div>) : null
}
このように、データを取得して表示を行うだけでも、状態、副作用（非同期処理）という二つの概念を意識して実装する必要があります。
今回の例はシンプルですが、実際の開発現場ではこのような実装が大量にあり、なかなか直感的にやっていることを理解するのが難しい場面も多いのではないでしょうか。
また、JSのコードはすべてブラウザに配信されてしまうため、DBへの直接のアクセスなどはできず、毎回APIを用意し、アクセスを行う必要が出てきます。
Server Componentsはこの「処理（データアクセス）を行い、処理の結果を元にDOMを作る」という処理をより簡潔かつコンポーネントという単位に閉じた実装へと変えていきます。
これはいわゆる今までのフルスタックフレームワークにあったような「ビジネスロジックの処理→描画」というステップを文字通り一方向のステップで行っていくのと近い体験を提供します。
以下の記事により詳しい解説が書かれていたので参考にしてください。
パフォーマンス面のメリット
Server Componentsはパフォーマンス面にも色々メリットがあります。
メリットは以下の通りです。
JSのバンドルサイズの削減
Server ComponentsはクライアントではJSコードを持っておく必要はないため、単純にクライアントで持っておくJSファイルのサイズはその分削減できます。
ただ、Server Componentsのデータサイズが元のJSのコードサイズよりも大きくなってしまうパターンもあるようです。
データのフェッチスピードの高速化
Server Componentsは文字通りサーバーで実行されるので、同じサーバー内などにAPIがあればクライアントからリクエストを送るよりフェッチのスピードは高速化しやすい特性があります。DBへのアクセスなども直接行うことが可能です。
これにより全てをクライアントで実装するより、描画のスピードを上げることが可能です。
その他
そのほかにも、「Code splittingの自動化」「コンポーネントマウント時の処理のスピード」など、いろいろパフォーマンス面でのメリットがあるようです。
参考文献