Next.jsのAppRouterを使い、ClientComponentsのみで非同期データのSSRを行う
最初に
今回のサンプルコードのリンク
AppRouter使用時の一般的な非同期データのSSR
AppRouterで非同期データを含んだSSRを行う場合、ServerComponentsでデータを取得して自身でレンダリングするか、それをClientComponentsに渡すかする必要があります。ブラウザ側でユーザの入力に合わせて柔軟に表示内容を変えようとするとServerComponentsとClientComponentsのやり取りをそれぞれ記述しなければならず、PagesRouter上でgetServerSidePropsからデータを渡していたときと労力に差がありません。
ClientComponentsで非同期データを扱えば、コードの記述が楽になる
ServerComponentsを使えば、その部分のコンポーネントのjsコードをクライアントに渡す必要がなくなり、少しだけ通信量が節約できます。ただ、微々たるものです。そのためにデータ取得用コンポーネントとUI用コンポーネントを分離するのは手間になります。だったらClientComponentsで非同期データを扱えるようにすれば良いのです。
必要なもの
Next.jsでSSRを簡単に行うためのパッケージ
https://www.npmjs.com/package/next-ssr
以下のような形でNext.js環境下に追加でパッケージを入れます。
yarn add next-ssr単純な非同期SSRのサンプル
src/app/layout.tsx
SSR用のデータを取り扱うProviderをlayoutに設置します。これで配下のコンポーネントから、簡単SSR機能が使えるようになります。
import { SSRProvider } from 'next-ssr';
export const metadata = {
title: 'samples of next-ssr',
description: 'SSR with AppRouter.',
};
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<SSRProvider>{children}</SSRProvider>
</body>
</html>
);
}src/app/simple/page.tsx
非同期データを扱うための最小限のコードです。非同期関数から'Hello world!'を渡しています。もちろんfetchなどで取得したデータも使えます。
'use client';
import { useSSR } from 'next-ssr';
/**
* Page display components
*/
const Page = () => {
const { data } = useSSR(async () => 'Hello world!');
return <div>{data}</div>;
};
export default Page;出力されたHTML
bodyタグの直後に、<div>Hello world!</div>が入っています。非同期データのSSRに成功しています。
天気予報のサンプル
気象庁のサイトからデータをfetchして内容を表示しています。SSR後はClientComponentsなので、UIイベントで再ロードも行えます。その際はクライアント側でfetchが行われます。
src/app/weather/page.tsx
'use client';
import { useSSR } from 'next-ssr';
export interface WeatherType {
publishingOffice: string;
reportDatetime: string;
targetArea: string;
headlineText: string;
text: string;
}
/**
* Data obtained from the JMA website.
*/
const fetchWeather = (id: number): Promise<WeatherType> =>
fetch(`https://www.jma.go.jp/bosai/forecast/data/overview_forecast/${id}.json`)
.then((r) => r.json())
.then(
// Additional weights (500 ms)
(r) => new Promise((resolve) => setTimeout(() => resolve(r), 500))
);
/**
* Components for displaying weather information
*/
const Weather = ({ code }: { code: number }) => {
const { data, reload, isLoading } = useSSR<WeatherType>(() => fetchWeather(code), { key: code });
if (!data) return <div>loading</div>;
const { targetArea, reportDatetime, headlineText, text } = data;
return (
<div style={isLoading ? { background: 'gray', position: 'relative' } : undefined}>
{isLoading && (
<div style={{ position: 'absolute', color: 'white', top: '50%', left: '50%' }}>loading</div>
)}
<h1>{targetArea}</h1>
<button onClick={reload}>Reload</button>
<div>
{new Date(reportDatetime).toLocaleString('ja-JP', {
timeZone: 'JST',
})}
</div>
<div>{headlineText}</div>
<div style={{ whiteSpace: 'pre-wrap' }}>{text}</div>
</div>
);
};
/**
* Page display components
*/
const Page = () => {
return (
<>
{/* Chiba */}
<Weather code={120000} />
{/* Tokyo */}
<Weather code={130000} />
{/* Kanagawa */}
<Weather code={140000} />
</>
);
};
export default Page;
出力されたHTML
天気予報の内容がSSRされています。
まとめ
AppRouterの本来の機能をガン無視しています。そのためpage.tsxに記述している内容は、PagesRouter上にそのまま持って行ってもファイル名だけ直せば同じ動きをします。
そもそのもところで、Next.jsがReactのレンダリングに使っているreact-dom/serverのrenderToPipeableStreamは、コンポーネントのthrow promiseで非同期待ちしてくれるので、ServerComponentsとClientComponentsの種別に関わりなく非同期待ちが可能です。あとは必要に応じて、データを配るコードを足してやれば便利に動くようになります。
ちなみにここのBlogシステムは今回紹介した動作原理をUrqlのプラグインとして実装して運用していますが、コードを書くのも楽だし、特になんの問題もなくキビキビ動いています。
PagesRouter版
https://github.com/SoraKumo001/md-blogAppRouter版
https://github.com/SoraKumo001/md-blog/tree/AppRouter
ほとんどコードに違いがないので、PagesからAppの移植は簡単です。ただ、ページ遷移時にPagesの方がファイルの読み取り頻度が低いので、最終的にPagesのままにするという結論に至りました。ちなみにPagesRouter版でもAppRouterをAPIRouteの代替としては使ってます。
今のところAppRouterにメリットは感じないので趣味でいじりつつ、しばらくは様子見したいと思っています。