SSRとSSGを自前実装してみた。

記事

• /ssrでSSRの結果が、/ssgでSSG結果が帰ってくる。
  • 詳細はsrc/server/index.ts
  • SSGは実装中

起動法

• Devサーバー起動 npm run dev
• ビルド(サーバーサイド・クライアントサイド) npm run build
• [WIP] ビルド結果を使って立ち上げ npm run start

起動

npm i
npm run dev

仕組み

SSR

• 生成したHTMLを<div id="root"></div>配下に置いている。
• クライアント側のJSでReactDOM.hydrateすることで、生成済みのHTMLにイベントリスナーを設定している。

データ受け渡し

• root要素にデータ属性で初期ページデータを渡している。
  • これはレスポンスが遅くなることでなんらかが表示されるまでの時間(FCP)の低下につながるので、スケルトンにしてクライアント側でフェッチするほうが一般には良い気もする。
  • next.jsだと<script id="__NEXT_DATA__" type="application/json">にJSONで入れていた。
• クライアント側でページ遷移するときはページで必要な情報をフェッチしてCSRしている。
• ページ側でSSRなのかデータをフェッチしてCSRなのかをハンドリングするのはしんどいのでPageWrapper.tsxで抽象化した(したい)

TODO

• client.jsの分割

参考URL

https://ui.dev/react-router-server-rendering