Next.jsのページ遷移・ページロードの仕組みをコードリーディングで追いかけた

Next.jsのLinkとRouterの挙動がよく分からなかったので、Next.jsのコードリーディングをした。ページ遷移やページロードの仕組みが結構つかめたのでメモ。

• LinkではクリックするとsingletonRouterのpushを呼んでいる
• pushはchangeメソッドを呼んでいる
• next/next-server/lib/router/router.ts change
  • pathnameやqueryは、url、つまりLinkのhrefから抽出している
  • routeはただpathnameから最後の/を消しただけ
  • dynamic routeの場合(/posts/[id]みたいになっているやつ)なら、hrefとasを比べてパラメータを抜き出して、queryに突っ込んでいる
  • このへんでgetRouteInfoを使って、routeとかpathnameからコンポーネントを特定しようとしてそう
  • getRouteInfoではfetchComponentでrouteからコンポーネントを特定する。routeだけがルーティングに関係ありそう
    • fetchComponentではthis.pageLoader.loadPageに処理を移譲
      • pageLoaderはこのへんで作られていて、routerに渡される
      • pageLoader.loadPageはこの辺が実体。routeに書かれた情報からpages/以下のjsのファイルパスを探している様子が伺える。このあたりでいろいろごにょごにょして、next.jsのPageのコンポーネントを見つけていそう
  • RouteInfoが取得できたら、Routerをsetで更新する
    • set内ではインスタンスの更新 & routeInfoをnotifyしている
    • notifyはrouterのインスタンス化の時に受け取ったSubscriptionに通知
    • Subscriptionを作ってるのはこの辺。通知を受け取ると、fetchComponentで取得されたComponentなどを使って再レンダー。これで新しいページがレンダーされるはず。
      • renderの実体はdoRender
      • doRenderはAppContainerに包んでReactElementをrenderする
      • AppContainerはRouterContext.Providerでrouterを入れているので、更新されたrouterがコンポーネントから参照できる