こんにちは。
今回はnext.js13で
ページ遷移速度が速いと言われているが、
どうやってその速さを実現しているのかを調べてみました。
SSRとクライアントサイドナビゲーションを使う
next.js では、
ページの表示に
SSR(サーバーサイドレンダリング)やクライアントサイドナビゲーションが使われています。
SSRは、
サーバー側でもうレンダリングしたものをクライアント側に送るので、
クライアント側では表示するだけだから表示までの時間が短縮される。
クライアントサイドナビゲーションでは、
ページ遷移時、クライアント(ブラウザ)側で処理を行う機能です。
これによって、ページ１からページ２に動くとき、
その差分(ページ２で新しく必要なcomponent)を計算して、
必要な情報だけをとってきて表示することが出来ます。
このSSRとクライアントサイドナビゲーション
の使用タイミングは設定することも出来そうですが、
デフォルトでは、
1番最初にサイトに訪れる際のみ、SSR。
そこからのページ遷移は、クライアントサイドナビゲーションが使われます。
1番最初に全ての情報をとってくるSPAは、
メリットとして、情報をロードした後のページ遷移は速いが、
デメリットに初速表示が遅い
という問題点がありましたが、
SSRによってこれは改善されました。
Linkタグによるプリフェッチ
ですが、
上でもわかる通り、
ページ１からページ２に遷移する際には、
結局必要なデータを取ってくる必要があります。
そこで、「プリフェッチ」です。
next.js 13 では、
いつも使っている<a>タグと同じようにページ遷移の機能を持つ
<Link>タグがあります。
こいつが、
ビューポート内に現れた時、
バックグラウンドでレンダリングを開始します。
なので、いざそのリンクを押すときには、
もうレンダリングがされているので、
爆速ですよみたいなことが起こります。
他にも、
1度読み込まれたcomponentは
cashされるので、
ページ１とページ２のcomponentが似てるほど、
ページの遷移速度は上がりますね。
例えば、
ページ1でcomponent1, component2, component3の3つのコンポーネントが使われていて、
ページ2でcomponent2, component3, component4の3つのコンポーネントが使われている場合、
ページ1からページ2への遷移時にはcomponent4のみが新たに非同期にロードされます。
既にロードされているcomponent2とcomponent3は再度ロードされません。
以上より、
SSRとクライアントサイドナビゲーション、
Linkタグによるプリフェッチ
によってページ遷移は速くなっています。
コメント