/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- 生成した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で抽象化した(したい)
client.jsの分割