Next.jsのAppRouter/PagesRouter実行中に、Server/Client/Pagesのどのモジュールなのかを識別する
厄介なコンポーネントの状態
Next.jsのAppRouterではデフォルトでServerComponentの状態から始まり、"use client"を先頭につけることによって、ClientComponentsとして動作させることができます。また、コンポーネントを記述したファイルに"use xxxxx"を付けなかった場合は、呼び出し元のコンポーネントの状態を継承します。
つまり呼び出されたコンポーネントは、自分がServerComponentかもしれないし、ClientComponentの可能性もあります。
Server/Client両用コンポーネントを作りたい場合、現在の状態によって処理を切り替えたいという時が来るかもしれません。ということで、現状で可能な識別方法のサンプルを紹介します。
app/CheckComponent.tsx
import React from "react";
export const CheckComponent = () => {
return (
<div>
{!React["useState"]
? "Server"
: React["createServerContext"] || !React["useOptimistic"]
? "Pages"
: "Client"}
</div>
);
};
app/Server.tsx
"use server";
import { CheckComponent } from "./CheckComponent";
export const Server = () => {
return <CheckComponent />;
};app/Client.tsx
"use client";
import { CheckComponent } from "./CheckComponent";
export const Client = () => {
return <CheckComponent />;
};app/page.tsx
import { Client } from "./Client";
import { Server } from "./Server";
const Page = () => {
return (
<>
<div>-- App --</div>
<Server />
<Client />
<div>-- Pages --</div>
<iframe src="/pages" />
</>
);
};
export default Page;pages/pages.tsx
import { CheckComponent } from "../app/CheckComponent";
const Page = () => {
return <CheckComponent />;
};
export default Page;出力結果
一画面に収めたかったので、PagesRouterはiframeで表示しています
識別方法の解説
Server/ClientでそれぞれCheckComponentを呼び出しています。CheckComponentではReact.useStateが存在するかどうかをチェックしています。ServerComponentsではuseStateがundefinedとなるため、識別が可能となります。
さらにpagesに置かれているかどうかという判定を加えると、少々面倒です。
ServerComponentsはuseStateがない
ClientComponentsはuseStateがある
PagesではuseStateがある
ClientComponentsではcreateServerContextが取り除かれる
PagesではcreateServerContextは取り除かれない
createServerContextはreact@canary以降に存在する
useOptimisticはreact@canary以降に存在する
AppRouterはreact@canary以降で実行される
PagesRouterは[email protected]以前とreact@canaryのどちらかで実行される
という条件を満たすように判定する必要があります。
これはあくまでNext.jsの仕様です。ServerComponentsでuseStateがモジュールバンドラの設定で除去されるのはNext.jsが勝手にやっているだけです。Reactの仕様ではありません。そのため、あらゆるフレームワークで状況に応じて柔軟に対応できる汎用的なコンポーネントを作るのはほぼ不可能です。本来であればReactの基本機能として判別するための機能を用意するべきなのですが、Next.jsで動けば良いというのが垣間見えてフレームワークが一強化したことによる弊害が出てきた状態です。