空雲リファレンス

Next.jsとReact18の簡単SSR-Streaming

※今回のソースコード
https://github.com/SoraKumo001/next-weather-stream

Next.js と React18 の SSR-Streaming

React18(2022/1/3 の時点で beta)と Next.js を利用することで、SSR ストリーミングが使えます。この機能によって、HTML の書き出しの途中で描画可能なコンポーネントを先にクライアントに出力し、非同期データの取得などが残っているコンポーネントに関してはローディング中のメッセージが出せます。そして準備が完了したコンポーネントの HTML データが全て書き出された時点で、ページの表示が完了となります。受け渡しは最初に張った HTML のコネクション一本です。従来の SSR に対して、非同期データを待たずに UI が表示できるのが利点です。

利用のために必要な作業

  • 対応しているバージョンの react のインストール
yarn add react@rc react-dom@rc

その他はNext.jsに必要なものをいつも通り入れてください。

  • next.config.js の設定変更
/** * @type { import("next").NextConfig} */ const config = { experimental: { concurrentFeatures: true, }, }; module.exports = config;

現時点で見つけた concurrentFeatures 有効時の Next.js@12.0.7 のバグ

  • Dynamic Routes が死ぬ
    [id]のようなアドレスで router.query を使おうと思っても、サーバ側で undefined です。また HTML は表示されるものの、コンポーネントとしてマウントされません。利用するのは諦めて qeruy パラメータで回避する必要があります
  • dev 動作時にリスニングの限界が来る
    404 エラーなどを出すとコネクションが待機中のままになり、そのうちリスニング数の限界が来て動かなくなります
  • Vercel で動かすときは設定に注意する必要がある
    concurrentFeatures と swcMinify を併用すると Vercel でエラーを出して動作しない

SSR-Streaming を使う方法

Suspense を利用する

React の Suspense コンポーネントを使います。

<Suspense> {SSR-Streamingしたいコンポーネント} </Suspense>

という構造をとり、データ取得のタイミングを Promise で返すようにして、コンポーネント内でthrow promiseを行います。promise が値を返すと、コンポーネントが再度呼び出されレンダリングが行えます。このレンダリングが完了すると、ストリーミングで追加されたHTMLがクライアントへ送られます。

Vercelのdemo(Next.js 12 React Server Components Demo (Alpha))の内容を確認する

https://github.com/vercel/next-rsc-demo
RSC with API Delays + HTTP Streaming

こちらのデモは以下の構造でSSR-Streamingを行っています。

<Suspense> <Serverコンポーネント> <Clientコンポーネント /> </Serverコンポーネント> </Suspense>

まずは各コンポーネントの特性について説明します

  • 通常コンポーネント
    いつも利用しているコンポーネント
    ServerやClientコンポーネントの配下に置くと、その特性を引き継ぐ
    Streamingで直接使うと非同期で生成したデータがpropsとして渡せないので、HTMLとして一瞬表示されるものの、その後すぐデータが消えた状態となる

  • Serverコンポーネント
    *.server.jsというファイル名で作られるコンポーネント
    サーバ側でレンダリング クライアントに渡されるときはHTMLにレンダリングされ、コンポーネントとして再マウントされない
    コンポーネントの状態にならないので、クライアントから操作することは出来ない

  • Clientコンポーネント
    *.client.jsというファイル名で作られるコンポーネント
    サーバとクライアント両方でレンダリングされる
    通常コンポーネントとの違いは、クライアント側でコンポーネントとして再マウントされ、ブラウザ上で操作可能となること
    Serverコンポーネントから渡されたpropsはJSONに変換されHTMLと共に送られるため、クライアントでデータが使用可能となる

SuspenseでStreamingを行う際は通常コンポーネントでも動作可能です。しかし通常コンポーネントだけでStreamingを構成すると、クライアントで再マウント時にデータが消えます。その理由はサーバ側で生成したpropsがHTMLの状態では渡せないからです。ストリーミング時には完成形のHTMLが送られそれがレンダリングされますが、マウント後はpropsが空なので再レンダリングで消えてしまうのです。

この問題に対処するためいったんServerコンポーネントを挟み、Clientコンポーネントを配置しているのです。ちなみにServerコンポーネントの下に通常コンポーネントを置いても、Serverコンポーネントとして扱われるのでクライアント側でマウントされません。

RSC(ReactServerComponent)を使わず、通常コンポーネントのみで SSR-Streaming を行うプログラムを作る

Serverコンポーネントを使わない理由

SSR-Streamingを行うのに、いちいち.serverや.clientコンポーネントを作るのは面倒です。理想は全てを通常コンポーネントで完結させることです。というか、初手でDemoを確認せずにSSR-Streamingをやり始めたため、気がついたら通常コンポーネントで全て実装するという力業を完遂していました。

Streaming で送った通常コンポーネントがどうなるのか

通常コンポーネントでStreamingした場合の動作を復習します

  • サーバ

    • データ取得用 promise が完了
    • throw で中断していたコンポーネントの再レンダリング
    • HTML に変換されクライアントへ
  • クライアント

    • 追加分の HTML を受け取る
    • JavaScript が必要な位置へ再配置

という流れを踏みます。さて、ここで重要な問題を理解する必要があります。クライアントに送られるのは HTML データです。そしてコンポーネントのレンダリングには非同期で取得したデータを利用しました。この状態でクライアントがコンポーネントの再レンダリングを行うと、レンダリングに必要なpropsデータが無いので表示内容が吹っ飛びます。

通常コンポーネントで内容を吹き飛ばさないためにすること

クライアント側でコンポーネントが再レンダリングされないように throw します。書き換えがストップするので、目出度く HTML の表示は吹き飛ばされずに済みます。しかしこの状態でステートやイベントはどうなるか疑問に思いますよね。dom を直接いじるという強硬手段に出ない限りはもちろん使えません。Serverコンポーネントと同じ状態になります。これが SSR-Streaming に課された制約です。

データが送られないという状況を打破する

発想の転換が必要です。SSR-Streaming で作成するコンポーネントをまともな思考で作っていたら、制約をそのまま引き継ぐことになります。引き継ぎたいのは制約ではなく、データなのです。サーバ側が持っているデータをクライアントに渡すことが出来れば、クライアント側のコンポーネントが再構築できます。つまり ServerコンポーネントがClientコンポーネントを呼び出すときと同じ事をしてやれば良いのです。

原理としては、送りたいデータを JSON にして<script>タグに貼り付けて HTML として出力し、それを受け取ったクライアントが dom から参照し props として配っています。

  • src/components/SuspenseLoader.tsx
import { createContext, MutableRefObject, ReactNode, Suspense, SuspenseProps, useCallback, useContext, useEffect, useRef, useState, } from "react"; type PropeatyType<T> = { value?: T; isInit?: boolean; isSuspenseLoad?: boolean; }; export type SuspenseDispatch = () => void; const isServer = typeof window === "undefined"; const cacheMap: { [key: string]: unknown } = {}; const SuspenseContext = createContext<unknown>(undefined); export const useSuspense = <T,>() => useContext(SuspenseContext) as T; const SuspenseWapper = <T,>({ property, idName, children, load, }: { property: PropeatyType<T>; idName: string; children: ReactNode; load: () => Promise<unknown>; }) => { if (!property.isInit) throw load(); const [isRequestData, setRequestData] = useState( property.isSuspenseLoad || isServer ); useEffect(() => setRequestData(false), []); return ( <SuspenseContext.Provider value={property.value}> {isRequestData && ( <script id={idName} type="application/json" dangerouslySetInnerHTML={{ __html: JSON.stringify({ value: property.value }), }} /> )} {children} </SuspenseContext.Provider> ); }; export const SuspenseLoader = <T, V>({ name, loader, loaderValue, fallback, onLoaded, children, dispatch, }: { name: string; loader: (value: V) => Promise<T>; loaderValue?: V; fallback?: SuspenseProps["fallback"]; onLoaded?: (value: T) => void; children: ReactNode; dispatch?: MutableRefObject<SuspenseDispatch | undefined>; }) => { const [_, reload] = useState({}); const idName = "#__NEXT_DATA__STREAM__" + name; const property = useRef<PropeatyType<T>>({}).current; if (!isServer && !property.isInit) { const value = cacheMap[name]; if (value) { property.value = value as T; property.isInit = true; property.isSuspenseLoad = false; } } const load = useCallback( () => new Promise<T>((resolve) => { if (!isServer) { const node = document.getElementById(idName); if (node) { property.isSuspenseLoad = true; resolve(JSON.parse(node.innerHTML).value); return; } } loader(loaderValue as V).then((v) => { property.isSuspenseLoad = false; resolve(v); }); }).then((value) => { property.isInit = true; property.value = value; cacheMap[name] = value; onLoaded?.(value); }), [loader, onLoaded] ); if (dispatch) { dispatch.current = () => { property.value = undefined; property.isInit = false; delete cacheMap[name]; reload({}); }; } return ( <Suspense fallback={fallback || false}> <SuspenseWapper<T> idName={idName} property={property} load={load}> {children} </SuspenseWapper> </Suspense> ); };

SuspenseLoader でデータ諸々を管理し、SuspenseWapper で JSON データとコンポーネントを同時に送るようにしています。取得したデータは ContextAPI で配る形にして、専用の hook を作ります。大したコード量にはなりませんでした。

通常コンポーネントのみで天気予報を SSR-Streaming

以下が、先ほど作った SuspenseLoader を使って天気予報を表示するシステムです。

  • src/pages/index.tsx

気象庁からエリア情報を持ってくるコードです。

import React, { Ref, RefObject, useRef } from "react"; import Link from "next/link"; import { SuspenseDispatch, SuspenseLoader, useSuspense, } from "../libs/SuspenseLoader"; interface Center { name: string; enName: string; officeName?: string; children?: string[]; parent?: string; kana?: string; } interface Centers { [key: string]: Center; } interface Area { centers: Centers; offices: Centers; class10s: Centers; class15s: Centers; class20s: Centers; } const AreaList = () => { const area = useSuspense<Area | undefined>(); if (!area) return <>読み込みに失敗しました</>; return ( <div> {Object.entries(area.offices).map(([code, { name }]) => ( <div key={code}> <Link href={`/weather/?id=${code}`}> <a>{name}</a> </Link> </div> ))} </div> ); }; const Page = () => { const dispatch = useRef<SuspenseDispatch>(); const loader = () => fetch(`https://www.jma.go.jp/bosai/common/const/area.json`) .then((r) => r.json()) //1秒の遅延を仕込む .then(async (v) => (await new Promise((r) => setTimeout(r, 1000))) || v) .catch(() => undefined); return ( <> <button onClick={() => dispatch.current()}>Reload</button> <SuspenseLoader dispatch={dispatch} //リロード用dispatch name="Weather/130000" //SSR引き継ぎデータに名前を付ける loader={loader} //Promiseを返すローダー fallback={<div>読み込み中</div>} //読み込み中に表示しておくコンポーネント onLoaded={() => console.log("読み込み完了")} //読み込み完了後に発生するイベント > <AreaList /> </SuspenseLoader> </> ); }; export default Page;
  • src/pages/weather/index.tsx

エリアごとの天気情報を表示するコードです

import { useRouter } from "next/dist/client/router"; import Link from "next/link"; import React, { useRef } from "react"; import { SuspenseDispatch, SuspenseLoader, useSuspense, } from "../../libs/SuspenseLoader"; export interface WeatherType { publishingOffice: string; reportDatetime: Date; targetArea: string; headlineText: string; text: string; } // Next.jsのconcurrentFeaturesが有効になっていない場合はCSRで動作 const Weather = () => { const weather = useSuspense<WeatherType | undefined>(); if (!weather) return <>読み込みに失敗しました</>; return ( <div> <h1>{weather.targetArea}</h1> <div>{new Date(weather.reportDatetime).toLocaleString()}</div> <div>{weather.headlineText}</div> <pre>{weather.text}</pre> <div> <Link href="/"> <a>戻る</a> </Link> </div> </div> ); }; const Page = () => { const router = useRouter(); const id = router.query["id"]; const dispatch = useRef<SuspenseDispatch>(); if (!id) return null; const loader = (id: number) => fetch( `https://www.jma.go.jp/bosai/forecast/data/overview_forecast/${id}.json` ) .then((r) => r.json()) //1秒の遅延を仕込む .then(async (v) => (await new Promise((r) => setTimeout(r, 1000))) || v) .catch(() => undefined); return ( <> <button onClick={() => dispatch.current()}>Reload</button> <SuspenseLoader dispatch={dispatch} //リロード用dispatch name={`Weather/${id}`} //SSR引き継ぎデータに名前を付ける loader={loader} //Promiseを返すローダー loaderValue={Number(id)} //ローダーに渡すパラメータ(不要なら省略可) fallback={<div>読み込み中</div>} //読み込み中に表示しておくコンポーネント onLoaded={() => console.log("読み込み完了")} //読み込み完了後に発生するイベント > <Weather /> </SuspenseLoader> </> ); }; export default Page;

動作の確認

ソースコードの具体的な内容や動作確認は以下で行えます

https://codesandbox.io/s/zen-williamson-z9201?file=/src/pages/index.tsx

動作内容

「読み込み中」の表示で一旦停止し、1 秒後に残りの HTML が吐き出されます。Reloadを押すかエリアをクリックしてページ遷移した場合は、CSRによるクライアントからのデータの読み込みに切り替わります。また、SSR-StreamingやCSRで読み込んだデータはキャッシュされるので、無駄な再読込は発生しません。

SSR-Streaming が無茶苦茶簡単に実現できる

SSR-Streaming のハードルは小石ほどになりました。躓くポイントとしては Next.js のバグがそれなりに残っていることです。

現在、SSR/SSR-Streaming/CSR を自由に切り替えられる SuspenseLoader を開発中です。React17 系でも SSR-Streaming が使えなくはなりますが、コードを一切変更せずに動くように作っているので、乗り換えも簡単になると思います。こちらも完成次第、記事にします。

Login