関連記事
- 第1話 Reactの初回表示が気になってNext.jsを触り始めた話
- 第2話 Next.jsをレンタルサーバーで動かそうとして、思った以上に話が大きくなった話
- 第3話 結局Reactに戻った話 ← 今ここ
第2話の続き。
Next.jsを触り始めてからしばらく経った。
ルーティング。
ビルド。
デプロイ。
Node。
レンタルサーバー。
localhost問題。
気が付けば、
「カテゴリ画像を早く表示したい」
という話からだいぶ遠くまで来ていた。
ここまで来て思った
ある時ふと思った。
俺は何を解決したかったんやっけ。
SSR？
違う。
SEO？
別に困ってない。
Node環境が欲しかった？
それも違う。
元々やりたかったのは、
ページを開いた時にカテゴリ画像を最初から表示したい。
ただそれだけだった。
問題が増えている
この時点で、
最初に抱えていた問題は1個だった。
カテゴリ画像が一瞬表示されないだけ。
ところが今はどうか。
App RouterPages RouterSSRビルドNodeレンタルサーバーfetchlocalhostみたいな話になっている。
気付いた。
問題を解決しようとして、
問題を増やしている。
本当に必要だったこと
改めて整理してみる。
欲しかったのは、
- カテゴリ一覧
- サブカテゴリ一覧
- カテゴリ画像
この辺の初期データ。
逆に言うと、
これさえ最初から持っていればいい。
ページ全体をSSRする必要はない。
Next.jsである必要もない。
Djangoで渡せばよくない？
そこで発想を変えた。
どうせDjangoがいる。
だったら、
最初のHTMLを返す時に、
必要なデータも一緒に渡せばいい。
例えば、
<script>window.initialData = {...}</script>みたいな形でもいい。
Contextに流し込んでもいい。
やり方はいくらでもある。
重要なのは、
初回表示時点でデータがあること。
それだけだった。
Reactのまま解決した
最終的には、
Django側で初期データを持たせて、
React側で利用する形にした。
ざっくり書くと、
Django↓初期データ埋め込み↓React↓各コンポーネントで利用みたいな構成。
結果として、
最初に気になっていた
画像が一瞬表示されない問題は解決した。
Next.jsが悪かったわけではない
一応書いておく。
今回の結論は
Next.jsはダメではない。
むしろ、
最初からNext.js前提で作るなら全然アリやと思う。
実際便利な機能も多い。
ただ今回の自分のケースでは、
- Reactで既にある程度作っていた
- Djangoも動いている
- サーバー構成も決まっている
という状態だった。
そこへSSRのためだけに大規模な変更を入れる必要はなかった。
というだけの話。
当時の自分メモ
技術選定をしている時、
つい
何を使うかに意識が向きがちになる。
でも今回振り返ると、
本当に考えるべきだったのは
何を解決したいのかだった。
あの時一回立ち止まらなかったら、
今も別のエラーと戦っていた気がする。
死にゲーで、 とりあえず行けそうな道を進んでみたら、 正面から行くと絶対やられるボスに突っ込んでたみたいな。
結局引き返すことになった。
でも、足腰は少しムキムキになった。
今回はそんな感じだった。