- URL: React.jsのSSRをTypeScriptで自前で実装してみた
- 公開日: 2022-03-18
いつ読むか？
- React で SSG をやりたくなったときに OSS のライブラリでは要件が満たせないとき
読書メモ
概要
Next.js などのフレームワークを使わず、React + TypeScript で SSR を自前実装する方法の解説。
主要な技術スタック
React v17, React-Router v6, TypeScript, Webpack, Express
実装の要点
- 共通ルート定義: サーバー・クライアントで共有する
routes.tsを作成し、各ルートにgetServerSidePropsを定義 - サーバー側:
ReactDOMServer.renderToString()で HTML 生成、data 属性に初期データを埋め込み - クライアント側:
ReactDOM.hydrate()で SSR 済み HTML にイベントリスナーを付与 - PageWrapper: SSR・初期 hydrate・CSR の 3 状態を吸収するコンポーネントで、ページコンポーネントをシンプルに保つ
活用場面
- SSR の仕組みを根本から理解したいとき
- Next.js の内部動作を理解したいとき
- フレームワークなしでカスタム SSR が必要なとき