Next.jsとReact18の簡単SSR-Streaming

1yarn add react@rc react-dom@rc

1/**
2 * @type { import("next").NextConfig}
3 */
4const config = {
5  experimental: {
6    concurrentFeatures: true,
7  },
8};
9module.exports = config;

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

1<Suspense>
2    <Serverコンポーネント>
3        <Clientコンポーネント />
4    </Serverコンポーネント>
5</Suspense>

1import {
2  createContext,
3  MutableRefObject,
4  ReactNode,
5  Suspense,
6  SuspenseProps,
7  useCallback,
8  useContext,
9  useEffect,
10  useRef,
11  useState,
12} from "react";
13
14type PropeatyType<T> = {
15  value?: T;
16  isInit?: boolean;
17  isSuspenseLoad?: boolean;
18};
19export type SuspenseDispatch = () => void;
20const isServer = typeof window === "undefined";
21const cacheMap: { [key: string]: unknown } = {};
22const SuspenseContext = createContext<unknown>(undefined);
23export const useSuspense = <T,>() => useContext(SuspenseContext) as T;
24
25const SuspenseWapper = <T,>({
26  property,
27  idName,
28  children,
29  load,
30}: {
31  property: PropeatyType<T>;
32  idName: string;
33  children: ReactNode;
34  load: () => Promise<unknown>;
35}) => {
36  if (!property.isInit) throw load();
37  const [isRequestData, setRequestData] = useState(
38    property.isSuspenseLoad || isServer
39  );
40  useEffect(() => setRequestData(false), []);
41  return (
42    <SuspenseContext.Provider value={property.value}>
43      {isRequestData && (
44        <script
45          id={idName}
46          type="application/json"
47          dangerouslySetInnerHTML={{
48            __html: JSON.stringify({ value: property.value }),
49          }}
50        />
51      )}
52      {children}
53    </SuspenseContext.Provider>
54  );
55};
56
57export const SuspenseLoader = <T, V>({
58  name,
59  loader,
60  loaderValue,
61  fallback,
62  onLoaded,
63  children,
64  dispatch,
65}: {
66  name: string;
67  loader: (value: V) => Promise<T>;
68  loaderValue?: V;
69  fallback?: SuspenseProps["fallback"];
70  onLoaded?: (value: T) => void;
71  children: ReactNode;
72  dispatch?: MutableRefObject<SuspenseDispatch | undefined>;
73}) => {
74  const [_, reload] = useState({});
75  const idName = "#__NEXT_DATA__STREAM__" + name;
76  const property = useRef<PropeatyType<T>>({}).current;
77  if (!isServer && !property.isInit) {
78    const value = cacheMap[name];
79    if (value) {
80      property.value = value as T;
81      property.isInit = true;
82      property.isSuspenseLoad = false;
83    }
84  }
85  const load = useCallback(
86    () =>
87      new Promise<T>((resolve) => {
88        if (!isServer) {
89          const node = document.getElementById(idName);
90          if (node) {
91            property.isSuspenseLoad = true;
92            resolve(JSON.parse(node.innerHTML).value);
93            return;
94          }
95        }
96        loader(loaderValue as V).then((v) => {
97          property.isSuspenseLoad = false;
98          resolve(v);
99        });
100      }).then((value) => {
101        property.isInit = true;
102        property.value = value;
103        cacheMap[name] = value;
104        onLoaded?.(value);
105      }),
106    [loader, onLoaded]
107  );
108  if (dispatch) {
109    dispatch.current = () => {
110      property.value = undefined;
111      property.isInit = false;
112      delete cacheMap[name];
113      reload({});
114    };
115  }
116  return (
117    <Suspense fallback={fallback || false}>
118      <SuspenseWapper<T> idName={idName} property={property} load={load}>
119        {children}
120      </SuspenseWapper>
121    </Suspense>
122  );
123};

1import React, { Ref, RefObject, useRef } from "react";
2import Link from "next/link";
3import {
4  SuspenseDispatch,
5  SuspenseLoader,
6  useSuspense,
7} from "../libs/SuspenseLoader";
8
9interface Center {
10  name: string;
11  enName: string;
12  officeName?: string;
13  children?: string[];
14  parent?: string;
15  kana?: string;
16}
17interface Centers {
18  [key: string]: Center;
19}
20interface Area {
21  centers: Centers;
22  offices: Centers;
23  class10s: Centers;
24  class15s: Centers;
25  class20s: Centers;
26}
27
28const AreaList = () => {
29  const area = useSuspense<Area | undefined>();
30  if (!area) return <>読み込みに失敗しました</>;
31  return (
32    <div>
33      {Object.entries(area.offices).map(([code, { name }]) => (
34        <div key={code}>
35          <Link href={`/weather/?id=${code}`}>
36            <a>{name}</a>
37          </Link>
38        </div>
39      ))}
40    </div>
41  );
42};
43
44const Page = () => {
45  const dispatch = useRef<SuspenseDispatch>();
46  const loader = () =>
47    fetch(`https://www.jma.go.jp/bosai/common/const/area.json`)
48      .then((r) => r.json())
49      //1秒の遅延を仕込む
50      .then(async (v) => (await new Promise((r) => setTimeout(r, 1000))) || v)
51      .catch(() => undefined);
52  return (
53    <>
54      <button onClick={() => dispatch.current()}>Reload</button>
55      <SuspenseLoader
56        dispatch={dispatch} //リロード用dispatch
57        name="Weather/130000" //SSR引き継ぎデータに名前を付ける
58        loader={loader} //Promiseを返すローダー
59        fallback={<div>読み込み中</div>} //読み込み中に表示しておくコンポーネント
60        onLoaded={() => console.log("読み込み完了")} //読み込み完了後に発生するイベント
61      >
62        <AreaList />
63      </SuspenseLoader>
64    </>
65  );
66};
67export default Page;

1import { useRouter } from "next/dist/client/router";
2import Link from "next/link";
3import React, { useRef } from "react";
4import {
5  SuspenseDispatch,
6  SuspenseLoader,
7  useSuspense,
8} from "../../libs/SuspenseLoader";
9
10export interface WeatherType {
11  publishingOffice: string;
12  reportDatetime: Date;
13  targetArea: string;
14  headlineText: string;
15  text: string;
16}
17
18// Next.jsのconcurrentFeaturesが有効になっていない場合はCSRで動作
19const Weather = () => {
20  const weather = useSuspense<WeatherType | undefined>();
21  if (!weather) return <>読み込みに失敗しました</>;
22  return (
23    <div>
24      <h1>{weather.targetArea}</h1>
25      <div>{new Date(weather.reportDatetime).toLocaleString()}</div>
26      <div>{weather.headlineText}</div>
27      <pre>{weather.text}</pre>
28      <div>
29        <Link href="/">
30          <a>戻る</a>
31        </Link>
32      </div>
33    </div>
34  );
35};
36
37const Page = () => {
38  const router = useRouter();
39  const id = router.query["id"];
40  const dispatch = useRef<SuspenseDispatch>();
41  if (!id) return null;
42  const loader = (id: number) =>
43    fetch(
44      `https://www.jma.go.jp/bosai/forecast/data/overview_forecast/${id}.json`
45    )
46      .then((r) => r.json())
47      //1秒の遅延を仕込む
48      .then(async (v) => (await new Promise((r) => setTimeout(r, 1000))) || v)
49      .catch(() => undefined);
50  return (
51    <>
52      <button onClick={() => dispatch.current()}>Reload</button>
53      <SuspenseLoader
54        dispatch={dispatch} //リロード用dispatch
55        name={`Weather/${id}`} //SSR引き継ぎデータに名前を付ける
56        loader={loader} //Promiseを返すローダー
57        loaderValue={Number(id)} //ローダーに渡すパラメータ(不要なら省略可)
58        fallback={<div>読み込み中</div>} //読み込み中に表示しておくコンポーネント
59        onLoaded={() => console.log("読み込み完了")} //読み込み完了後に発生するイベント
60      >
61        <Weather />
62      </SuspenseLoader>
63    </>
64  );
65};
66
67export default Page;