20230308 001

STREAM@SをApp Routerに移行した

2023年11月08日

STREAM@Sで採用しているフロントエンドフレームワークはNextです。そんなNextですが、13系から新しいソースコードの構造としてApp Routerが登場しており、このApp Routerは13.4でStable扱いとなっています。

STREAM@Sを作った時点でNextは13でしたが、当時App Routerはベータ版で、エコシステムが整っていないことを含めて色々あったためPages Routerを採用していました。Nextを14に上げたのを機に、App Routerに移行してみることにしました。

公式にマイグレーションガイドがあるので、それに沿って作業を行います。 クライアントで動かしたいコンポーネントには頭に"use client"を付ける、などのルールがあります。

https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration

サーバーサイドコンポーネントとクライアントコンポーネントの違いを意識して書かなければいけないので、今までのNextに慣れた人には難しいようなのですが、Astroを通っているからか特に違和感なくサッと移行できました。データの取得まわりがシンプルになっており、Nextのつらい所だと思っていたのでそこは良かったのではないかと思います。

ところで実際に使う人にメリットがあるのでしょうか？わかりやすい所としてJavaScriptの量が減ったりしているのでしょうか？Nextはビルド時にページの容量を表示するので、そこで見てみることにします。

これはPages Router。

Route (pages)                              Size     First Load JS
┌ ● /                                      7.03 kB        92.9 kB
├   /_app                                  0 B            85.8 kB
├ ○ /404                                   182 B            86 kB
├ ○ /about                                 1.61 kB        87.5 kB
├ ● /album/[id] (12535 ms)                 3.24 kB        89.1 kB
├   ├ /ja/album/cocx-38071 (511 ms)
├   ├ /ja/album/laca-15313 (500 ms)
├   ├ /ja/album/lacm-14080 (481 ms)
├   ├ /ja/album/laca-15300 (431 ms)
├   ├ /ja/album/cocc-18121 (417 ms)
├   ├ /ja/album/cocx-38075 (349 ms)
├   ├ /ja/album/cocx-38073 (327 ms)
├   └ [+297 more paths]
├ ● /allstars                              4.73 kB        90.6 kB
├ ℇ /api/og                                0 B            85.8 kB
├ ○ /cinderellagirls                       5.45 kB        91.3 kB
├ ● /millionlive                           4.77 kB        90.6 kB
├ ○ /privacy                               1.9 kB         87.7 kB
├ ● /shinycolors                           4.51 kB        90.4 kB
└ ● /sidem                                 4.51 kB        90.4 kB
+ First Load JS shared by all              213 kB
  ├ chunks/framework-bbecb7d54330d002.js   45.5 kB
  ├ chunks/main-7a2a641623898468.js        36 kB
  ├ chunks/pages/_app-541c4c9262dd55ef.js  3.46 kB
  ├ chunks/webpack-fa99431b15635937.js     836 B
  └ css/13b73eeea33139a5.css               127 kB

こちらはApp Router

Route (app)                              Size     First Load JS
┌ ○ /                                    6.66 kB         102 kB
├ ○ /_not-found                          882 B          88.3 kB
├ ○ /about                               187 B          95.1 kB
├ ● /album/[id]                          2.93 kB        97.9 kB
├   ├ /album/cocx-38070
├   ├ /album/cocx-38071
├   ├ /album/cocx-38073
├   └ [+301 more paths]
├ ○ /allstars                            187 B          95.1 kB
├ ℇ /api/og                              0 B                0 B
├ ○ /cinderellagirls                     1.73 kB        96.7 kB
├ ○ /millionlive                         187 B          95.1 kB
├ ○ /privacy                             188 B          95.1 kB
├ ○ /shinycolors                         187 B          95.1 kB
└ ○ /sidem                               187 B          95.1 kB
+ First Load JS shared by all            87.5 kB
  ├ chunks/472-95eb8c4e23cc235f.js       32.3 kB
  ├ chunks/fd9d1056-4f704d0689dc6310.js  53.2 kB
  ├ chunks/main-app-15c26fba30e6d1c2.js  232 B
  └ chunks/webpack-6cca178defc18596.js   1.73 kB

共通でロードされるJavaScriptが半分になっているように見えるのでだいぶ減ったような気がするのですが、実際はPages RouterではCSSがJavaScriptに含まれてしまっているため、CSSも含めると、利用者側にロードされるコード量はほとんど変わらないのではないかと思います。つまるところ、全くもって今まで通りということになります。