2024年の年始にNext.jsのコードベースを読むことにしました。その際に得た知識をアウトプットすることを考えていましたが、初めはどのように読み進めたらよいのか迷い、なかなか整理することができませんでした。最近になって「最初のコミットから差分をすべて読んでいく」という方法が自分には馴染むと分かってきました。そういうわけで特に興味深いと感じたコミットについて、メモを取っていくことにしました。
コミット差分はSourceTreeを使って追いかけています。ソースコード全体はcloneしたrepositoryをIntelliJで開いて読んでいます。
最初のコミット
記念すべき最初のコミットは2016年10月。Readme.mdのみのコミット。SSRのための軽量なフレームワークとして誕生したようです。Pages routerも目玉だったぽい。
~1.2まで省略
Next.jsの基本構造を学ぶ上で興味深い内容が沢山ありましたが、全部書いていくのは大変なので割愛。初期のSSRやハイドレーションの仕組みなどがわかります。この頃はReact Hooksも無く、JavaScriptを前提としていて、結構読むのは大変。CSS関連も現在は使ってない仕組みを利用しているのであまり深入りしても得るものは少ないかも。
prefetchサポート (~v2.0.0)
2016/12/16のコミット。 github.com
prefetchを行うLinkコンポーネントと、prefetchを明示的に行う関数を追加しています。Service Workerを用いて、prefetch対象のURLをCacheStorageに事前に保存します。
Next.jsはSSRを行った際に、ハイドレーションのためのJSONデータをページに埋め込んでいて、クライアントサイドでそのデータを取り出して使っています。画面遷移の際はnext/routerがページのJSONデータを取り出すAPI*1にXHRでリクエストして、取得したJSONを使って再レンダリングをしています。
prefetchではLinkコンポーネントをレンダリングしたタイミングで、遷移先のJSONデータを取りに行ってCacheStorageに保存しています。XHRでリクエストするとService Workerのfetchイベントがトリガーされ、そこでキャッシュがあればそれを利用するという仕組みになっているので、next/routerがページ遷移する際に、prefetchしたキャッシュを使うといった動作になるようです。
こんな感じで
面白かったコミットをメモっていきます。ペース的に最新に追いつけるのかちょっと不安ですが、古すぎるものはできるだけスキップできればと思っています。
*1:pagesに対して自動で生える
