🐈
RemixでuseLoaderDataを使わずにSSR
※ こちらでも同じ記事を書いています
今回のサンプル
SSR の実験用に気象庁からデータを取り寄せてレンダリングしています
-
Vercel にデプロイしたもの
https://remix-weather.vercel.app/ -
GitHub に置いてあるソースコード
https://github.com/SoraKumo001/remix-weather
Remix の useLoaderData はものすごく不便
Remix が一般に開放されてフロント界隈が少し賑やかになったのを感じます。ということで少しだけ触ってみました。やはり比較対象は Next.js ということになるのですが、Remix はまず初期コードが多く、パッケージだけ入れて颯爽とページ表示までたどり着ける Next.js と比べると、なかなか腰が重くなりそうです。
初期コードの大半は Next.js が隠蔽していじれなくしている部分なので、Remix は一段下のレイヤーの操作が可能でカスタマイズ性と考えることが出来ます。そういうものを必要としている人には大変ありがたい反面、そうでない人には面倒な記述が増えるだけとなってしまいます。
気を取り直してデータの fetch と SSR を試してみます。公式では loader を作って外部からのデータを取得し、useLoaderData を使ってコンポーネントで受け取る形になります。その動きを確認すると Next.js の getServerSideProps のそれと同じです。サーバ側で動作し SSR のデータとして使われ、さらにルーティングによってそのページが再表示されると、キャッシュの有無など関係なくクライアントからのサーバへの再要求と強制ロードがかかるアイツです。
「やめて、データは手元にあるから再ロードやめて！」
そんな声はヤツには届きません。容赦なくルーティング発生とともにデータは再ロードされます。
Remix に Next.js の getInitialProps 的なのは無いのか？
ありません。
くそ、技術でぶん殴ってやる
無いものは仕方が無いので、自分でなんとかします。要するに getInitialProps を Remix で再現すれば良いだけです。構造を見れば何をやれば良いのかは想像が付くので早速実装作業に入ります。推奨される方法でプログラムを作る気など微塵もありません。
結構便利なのに誰も使ってくれないオレオレライブラリを使用します。元々 Next.js を前提に作ってあるのですが、Remix で使えるように、少し手を入れました。
https://www.npmjs.com/package/@react-libraries/use-ssr
原理的にはこれです。
https://www.apollographql.com/
サーバでコンポーネントを実行し、結果として生成されたキャッシュを元に SSR、そしてデータをクライアントに引き渡して辻褄を合わせます。この動作の何が良いかというと、外部と通信する部分がサーバとクライアントでバラバラに書く必要が無いということです。ただ、これをやってくれるライブラリが apollo-graphql しか存在しなかったので、やりたければ GraphQL という選択しか残されていなかったのです。しかし use-ssr は fetch だろうが GraphQL だろうが Firebase だろうが、好きなもので通信して SSR 化することが出来ます。
ぶん殴った結果
- entry.server.tsx
キャッシュの生成と配布を entry.server.tsx で行います。Remix 低レイヤー操作の利点が光ります。
import { renderToString } from "react-dom/server";
import { RemixServer } from "remix";
import type { EntryContext } from "remix";
import { getDataFromTree, Provider } from "@react-libraries/use-ssr";
export default async function handleRequest(
request: Request,
responseStatusCode: number,
responseHeaders: Headers,
remixContext: EntryContext
) {
// 仮レンダリングでキャッシュを作成
const cache = await getDataFromTree(
<RemixServer context={remixContext} url={request.url} />
);
//キャッシュを使ってレンダリング
const markup = renderToString(
<Provider value={cache}>
<RemixServer context={remixContext} url={request.url} />
{/* Next.jsがpropsを配る動作を再現 */}
<script
id="__REMIX_DATA"
type="application/json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(cache) }}
/>
</Provider>
);
responseHeaders.set("Content-Type", "text/html");
return new Response("<!DOCTYPE html>" + markup, {
status: responseStatusCode,
headers: responseHeaders,
});
}
- entry.client.tsx
document にはサーバから送った HTML が入っているので、キャッシュデータをそこから取り出します。
import { createCache } from "@react-libraries/use-ssr";
import { hydrate } from "react-dom";
import { RemixBrowser } from "remix";
const cache = document.querySelector("script#__REMIX_DATA")?.innerHTML;
cache && createCache(JSON.parse(cache));
hydrate(<RemixBrowser />, document);
- routes/index.tsx
都道府県一覧を出す部分です。fetch で読んで state に突っ込めば SSR されます。サーバとクライアントのコードは統一された状態です。
import { useSSR } from "@react-libraries/use-ssr";
import { Link } from "remix";
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 Page = () => {
const [state, setState] = useSSR<Area | null | undefined>(
"area",
async (state, setState) => {
if (state !== undefined) return;
setState(null);
const result = await fetch(
`https://www.jma.go.jp/bosai/common/const/area.json`
)
.then((r) => r.json())
.catch(() => null);
setState(result);
}
);
return (
<div>
<button onClick={() => setState(undefined)}>Reload</button>
{state &&
Object.entries(state.offices).map(([code, { name }]) => (
<div key={code}>
<Link to={`/weather/${code}`}>{name}</Link>
</div>
))}
</div>
);
};
export default Page;
- routes/weather/$id.tsx
コードに対応した気象データの表示をする部分です
import { useSSR } from "@react-libraries/use-ssr";
import { Link, useParams } from "remix";
export interface Weather {
publishingOffice: string;
reportDatetime: Date;
targetArea: string;
headlineText: string;
text: string;
}
const Page = () => {
const params = useParams();
const id = params.id;
const [state, setState] = useSSR<Weather | null | undefined>(
["weather", String(id)] /*CacheKeyName*/,
async (state, setState) => {
// When this function finishes, the server side will finish processing and SSR will be performed.
if (state !== undefined) return;
setState(null);
const result = await fetch(
`https://www.jma.go.jp/bosai/forecast/data/overview_forecast/${id}.json`
)
.then((r) => r.json())
.catch(() => null);
setState(result);
}
);
return (
<div>
<button onClick={() => setState(undefined)}>Reload</button>
{state && (
<>
<h1>{state.targetArea}</h1>
<div>{new Date(state.reportDatetime).toLocaleString()}</div>
<div>{state.headlineText}</div>
<pre>{state.text}</pre>
</>
)}
<div>
<Link to="/">戻る</Link>
</div>
</div>
);
};
export default Page;
無事 SSR 完了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="/build/_assets/global-AKFP5T7A.css" />
<link
rel="stylesheet"
href="/build/_assets/dark-APYDFYJA.css"
media="(prefers-color-scheme: dark)"
/>
<link rel="stylesheet" href="/build/_assets/remix-5PPS2YMF.css" />
</head>
<body>
<div class="remix-app">
<header class="remix-app__header">
<div class="container remix-app__header-content">
<a title="Remix" class="remix-app__header-home-link" href="/">
<svg
viewBox="0 0 659 165"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
aria-labelledby="remix-run-logo-title"
role="img"
width="106"
height="30"
fill="currentColor"
>
<title id="remix-run-logo-title">Remix Logo</title>
<path
d="M0 161V136H45.5416C53.1486 136 54.8003 141.638 54.8003 145V161H0Z M133.85 124.16C135.3 142.762 135.3 151.482 135.3 161H92.2283C92.2283 158.927 92.2653 157.03 92.3028 155.107C92.4195 149.128 92.5411 142.894 91.5717 130.304C90.2905 111.872 82.3473 107.776 67.7419 107.776H54.8021H0V74.24H69.7918C88.2407 74.24 97.4651 68.632 97.4651 53.784C97.4651 40.728 88.2407 32.816 69.7918 32.816H0V0H77.4788C119.245 0 140 19.712 140 51.2C140 74.752 125.395 90.112 105.665 92.672C122.32 96 132.057 105.472 133.85 124.16Z"
></path>
<path
d="M229.43 120.576C225.59 129.536 218.422 133.376 207.158 133.376C194.614 133.376 184.374 126.72 183.35 112.64H263.478V101.12C263.478 70.1437 243.254 44.0317 205.11 44.0317C169.526 44.0317 142.902 69.8877 142.902 105.984C142.902 142.336 169.014 164.352 205.622 164.352C235.83 164.352 256.822 149.76 262.71 123.648L229.43 120.576ZM183.862 92.6717C185.398 81.9197 191.286 73.7277 204.598 73.7277C216.886 73.7277 223.542 82.4317 224.054 92.6717H183.862Z"
></path>
<path
d="M385.256 66.5597C380.392 53.2477 369.896 44.0317 349.672 44.0317C332.52 44.0317 320.232 51.7117 314.088 64.2557V47.1037H272.616V161.28H314.088V105.216C314.088 88.0638 318.952 76.7997 332.52 76.7997C345.064 76.7997 348.136 84.9917 348.136 100.608V161.28H389.608V105.216C389.608 88.0638 394.216 76.7997 408.04 76.7997C420.584 76.7997 423.4 84.9917 423.4 100.608V161.28H464.872V89.5997C464.872 65.7917 455.656 44.0317 424.168 44.0317C404.968 44.0317 391.4 53.7597 385.256 66.5597Z"
></path>
<path
d="M478.436 47.104V161.28H519.908V47.104H478.436ZM478.18 36.352H520.164V0H478.18V36.352Z"
></path>
<path
d="M654.54 47.1035H611.788L592.332 74.2395L573.388 47.1035H527.564L568.78 103.168L523.98 161.28H566.732L589.516 130.304L612.3 161.28H658.124L613.068 101.376L654.54 47.1035Z"
></path>
</svg>
</a>
<nav aria-label="Main navigation" class="remix-app__header-nav">
<ul>
<li>
<a href="/">Home</a>
</li>
<li>
<a href="https://remix.run/docs">Remix Docs</a>
</li>
<li>
<a href="https://github.com/remix-run/remix">GitHub</a>
</li>
</ul>
</nav>
</div>
</header>
<div class="remix-app__main">
<div class="container remix-app__main-content">
<div>
<button>Reload</button>
<h1>東京都</h1>
<div>11/25/2021, 12:44:00 PM</div>
<div>伊豆諸島では、強風や高波に注意してください。</div>
<pre>
日本付近は、冬型の気圧配置となっています。
東京地方は、晴れています。
２５日は、冬型の気圧配置となるため、晴れるでしょう。
２６日は、引き続き冬型の気圧配置となるため、晴れる見込みです。
【関東甲信地方】
関東甲信地方は、おおむね晴れていますが、長野県では雨や雪の降っている所があります。
２５日から２６日は、冬型の気圧配置が続くため、おおむね晴れますが、長野県や関東地方北部の山沿いでは、気圧の谷や寒気の影響により、雨か雪の降る所がある見込みです。
関東地方と伊豆諸島の海上では、２５日から２６日にかけて、波が高いでしょう。船舶は高波に注意してください。</pre
>
<div>
<a href="/">戻る</a>
</div>
</div>
</div>
</div>
<footer class="remix-app__footer">
<div class="container remix-app__footer-content">
<p>© You!</p>
</div>
</footer>
</div>
<script>
let STORAGE_KEY = "positions";
if (!window.history.state || !window.history.state.key) {
window.history.replaceState(
{
key: Math.random().toString(32).slice(2),
},
null
);
}
try {
let positions = JSON.parse(sessionStorage.getItem(STORAGE_KEY) ?? "{}");
let storedY = positions[window.history.state.key];
if (typeof storedY === "number") {
window.scrollTo(0, storedY);
}
} catch (error) {
console.error(error);
sessionStorage.removeItem(STORAGE_KEY);
}
</script>
<link rel="modulepreload" href="/build/_shared/chunk-BGANRL77.js" />
<link rel="modulepreload" href="/build/_shared/chunk-NP5RH25Q.js" />
<link rel="modulepreload" href="/build/root-EBR73I36.js" />
<link rel="modulepreload" href="/build/routes/weather/$id-UOFJWJPH.js" />
<script>
window.__remixContext = {
matches: [
{
params: {
id: "130000",
},
pathname: "/",
route: {
id: "root",
path: "",
module: "/build/root-EBR73I36.js",
hasAction: false,
hasLoader: false,
hasCatchBoundary: true,
hasErrorBoundary: true,
},
},
{
params: {
id: "130000",
},
pathname: "/weather/130000",
route: {
id: "routes/weather/$id",
parentId: "root",
path: "weather/:id",
module: "/build/routes/weather/$id-UOFJWJPH.js",
hasAction: false,
hasLoader: false,
hasCatchBoundary: false,
hasErrorBoundary: false,
},
},
],
componentDidCatchEmulator: {
trackBoundaries: true,
trackCatchBoundaries: true,
catchBoundaryRouteId: "root",
renderBoundaryRouteId: null,
loaderBoundaryRouteId: "root",
error: undefined,
catch: undefined,
},
routeData: {
root: null,
"routes/weather/$id": null,
},
actionData: undefined,
};
</script>
<script src="/build/manifest-E90BAC30.js"></script>
<script type="module">
import * as route0 from "/build/root-EBR73I36.js";
import * as route1 from "/build/routes/weather/$id-UOFJWJPH.js";
window.__remixRouteModules = {
root: route0,
"routes/weather/$id": route1,
};
</script>
<script src="/build/entry.client-EA7RYRFN.js" type="module"></script>
</body>
</html>
<script id="__REMIX_DATA" type="application/json">
{
"[@react-libraries/use-ssr][weather][130000]": {
"publishingOffice": "気象庁",
"reportDatetime": "2021-11-25T21:44:00+09:00",
"targetArea": "東京都",
"headlineText": "伊豆諸島では、強風や高波に注意してください。",
"text": " 日本付近は、冬型の気圧配置となっています。\n\n 東京地方は、晴れています。\n\n ２５日は、冬型の気圧配置となるため、晴れるでしょう。\n\n ２６日は、引き続き冬型の気圧配置となるため、晴れる見込みです。\n\n【関東甲信地方】\n 関東甲信地方は、おおむね晴れていますが、長野県では雨や雪の降っている所があります。\n\n ２５日から２６日は、冬型の気圧配置が続くため、おおむね晴れますが、長野県や関東地方北部の山沿いでは、気圧の谷や寒気の影響により、雨か雪の降る所がある見込みです。\n\n 関東地方と伊豆諸島の海上では、２５日から２６日にかけて、波が高いでしょう。船舶は高波に注意してください。"
}
}
</script>
ということで、無事に簡単なコードで SSR が出来るようになりました。ぶん殴ったことは反省していません。
Discussion