🐡

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

2022/11/01に公開約1,400字

前提となる用語

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

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