🐡

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

2022/11/01に公開

前提となる用語

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 ComponentsClient 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 ComponentsClient Componentsのうち、片方に全振りすれば大丈夫です。しかし両方を必要とする場合は、バランス取りで苦労することになるでしょう。

まとめ

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

GitHubで編集を提案

Discussion

ログインするとコメントできます