miyaoka.dev

先読み処理を追加した

以前にNext の JS を全部抜いてしまったためにページ遷移時の先読み処理が無くなってしまっていた。

Next を使っていれば next/link の処理によって自動的に router.prefetch されるのでいい感じに先読みしてくれるのだが、このサイトではランタイムを抜いて非 SPA になっているので遷移時に初めて内容をロードするというのが少し気になっていた。

なので prefetch 用の web component を作って追加した。a[data-prefetch] な要素に対して IntersectionObserver で intersect したときに prefetch link を生成するようにしている。

画面内のリンク(tags と posts) の html が先読みされている
画面内のリンク(tags と posts) の html が先読みされている

スクロールして intersect するごとに動的に link タグを追加する
スクロールして intersect するごとに動的に link タグを追加する

これは link タグによって先読みしているが、next だと router の処理でやっているので特に要素は追加されない。そして next のほうが state の json だけ読んでいるのでレンダリング後の html を読み込むより軽い。だったら普通に next で動かしたほうが良くない?的なところはある。