Next.js 13のapp/Directory(beta)と従来のpagesの違い

前提となる用語

ServerComponents で出てくるコンポーネントは以下の三種類です

• Server Components
  HTML で出力され、Streaming 以外での書き換えは不可
  サーバ側で非同期データを扱える
  取得したデータはClient Componentsに引き渡すことが出来る
• Client Components
  サーバ側では動作しないので、初期 HTML には含まれない
  　クライアント上のみで動作
• Shared Components
  一般のコンポーネント
  配置した場所によってServer Componentsになったり、Client Componentsになったりする

Next.js の機能を比較するにはもう一種類付け足す必要があります

• Mix Components 　 ← 　勝手に命名
  HTML で出力され、クライアント側で Component としてマウントされる

Next.js でプログラムを組む際は、Mix Componentsを当たり前のように使っていますが、app ではその機能が無くなります。

app と pages の違い

• app
  デフォルトでServer Components、宣言追加でClient Components
Mix Componentsは使えない
• pages
  Mix Componentsで開始
  HTML 出力抑止のためにはdynamic(…, { ssr: false })などの対応が必要
  Server ComponentsやClient Componentsを使うことも可能

Next.js で SSR を使う場合の従来のプログラムの組み方は、静的 HTML を吐き出した後にその内容をコンポーネントから操作するという流れです。ところが app フォルダにコンポーネントを配置するとMix Componentsが使えません。動かざること山のごとしなServer Componentsを使うか、初期 HTML には含まれないClient Componentsを使うかという二択になります。

「非同期の初期データをレンダリングに含めたいけど、後から動的に変更したい」という場合、データの取得と配布をServer Componentsに、後はClient Componentsに任せるという形になります。ただ、Client Componentsに任せた部分は、初期 HTML には含まれないので注意が必要です。

初期 HTML に含まれないと問題になるのが、モバイルレンダリングの高速化や JavaScript を理解しない旧式の bot 対策です。「ぶっちゃけどうするのコレ？」という感想です。

もちろん作るものによっては「動かざること山のごとし」や「初期 HTML イラネ」というものもあります。それならばたぶん、Server ComponentsかClient Componentsのうち、片方に全振りすれば大丈夫です。しかし両方を必要とする場合は、バランス取りで苦労することになるでしょう。

まとめ

app/Directory(beta)はあくまで beta 機能なので、今後便利に扱えるようになる可能性があります。しかし現在あるシステムを颯爽と app フォルダに移動しようとすれば、茨の道が待っていることは間違いありません。知恵と勇気をもって茨を抜けた先に待っている姫はビッグ・マムかもしれません。