関連記事#

• 第1話 Reactの初回表示が気になってNext.jsを触り始めた話 ← 今ここ
• 第2話 Next.jsをレンタルサーバーで動かそうとして、思った以上に話が大きくなった話
• 第3話 結局Reactに戻った話

ある日、Reactで作っていた画面を眺めていて少し気になることがあった。

別に遅いわけではない。

むしろ普通に動いている。

ただ、ページを開いた瞬間だけカテゴリ画像が表示されない。

一瞬だけ。

ほんの一瞬。

でも一度気になり始めると気になる。

最初に疑ったこと#

当時の構成は Django + React。

カテゴリ一覧や画像はAPIから取得していた。

ざっくりこんな感じ。

1
useEffect(() => {
2
    fetchCategoryList();
3
}, []);

つまり流れとしては、

1
ページ表示
2
↓
3
React起動
4
↓
5
API取得
6
↓
7
再描画

になる。

Reactとしては普通。

むしろ王道。

ただ、その取得が終わるまで画像は存在しない。

だから一瞬だけ空になる。

「SSRってやつでは？」#

ここで思った。

SSRってやつを使えばいいのでは？

正直この時点ではSSRをちゃんと理解していたわけではない。

ただ、

「サーバー側で先にHTMLを作る」

くらいの認識はあった。

もしサーバー側でカテゴリデータを持った状態で画面を作れれば、

最初から画像が表示される。

なんか良さそう。

Next.jsという選択肢#

ReactでSSRといえばNext.js。

名前は知っていた。

触ったことはほぼない。

でも世の中の記事を見ると、

1
ReactやってるならNext.js

みたいな空気感がある。

じゃあ今のReactをNext.jsへ移行すれば解決するんじゃないか。

そんな感じで調べ始めた。

思ったより世界が違う#

最初は

「Reactの上位互換みたいなもんやろ」

と思っていた。

違った。

思ったより別物だった。

まずルーティングの考え方が違う。

フォルダ構成も違う。

データ取得の考え方も違う。

そして記事によって書いてある内容が違う。

最初の違和感#

調べていると、

こんなコードが出てくる。

1
export async function getServerSideProps() {
2
    ...
3
}

なるほど。

これがSSRか。

と思った。

ところが別の記事では全然違う書き方をしている。

何が違うんやろう。

後から知ったこと#

後になって知った。

Next.jsには大きく分けて

• Pages Router
• App Router

がある。

そして記事によって前提が違う。

自分はそのことを知らずに、

Pages Routerの記事とApp Routerの記事を行ったり来たりしていた。

今思えば当然やけど、

当時は普通に混乱していた。

この時点ではまだ前向きだった#

ただ、この時点ではまだ楽しかった。

知らない技術を触るのは面白い。

SSRもなんかすごそう。

初回表示も速くなりそう。

SEOも良くなりそう。

なんか全部良くなりそう。

そんな気がしていた。

当時の自分メモ#

この時点では、

「ReactからNext.jsへ移行する」

ことに特に疑問は持っていなかった。

むしろ、

「ReactやるならNext.jsにした方がいいんじゃないか」

くらいに思っていた。

次回、

実際に動かし始めてから、

思った以上に話が大きくなっていく。