プリレンダリング

プリレンダリングを使用すると、静的なコンテンツのページ読み込みを高速化するために、サーバーではなくビルド時にページをレンダリングできます。

設定

設定にprerenderオプションを追加します。3つのシグネチャがあります。

import type { Config } from "@react-router/dev/config";

export default {
  // all static route paths
  // (no dynamic segments like "/post/:slug")
  prerender: true,

  // any url
  prerender: ["/", "/blog", "/blog/popular-post"],

  // async function for dependencies like a CMS
  async prerender({ getStaticPaths }) {
    let posts = await fakeGetPostsFromCMS();
    return ["/", "/blog"].concat(
      posts.map((post) => post.href)
    );
  },
} satisfies Config;

データローディングとプリレンダリング

プリレンダリングのための特別なアプリケーションAPIはありません。プリレンダリングは、サーバーレンダリングと同じルートローダーを使用します。

export async function loader({ request, params }) {
  let post = await getPost(params.slug);
  return post;
}

export function Post({ loaderData }) {
  return <div>{loaderData.title}</div>;
}

デプロイされたサーバーへのルートへのリクエストの代わりに、ビルドはnew Request()を作成し、サーバーと同じようにアプリを通じて実行します。

サーバーレンダリング時、プリレンダリングされていないパスへのリクエストは、通常どおりサーバーレンダリングされます。

静的ファイル出力

レンダリングされた結果は、build/clientディレクトリに書き込まれます。パスごとに2つのファイルがあることに気づくでしょう。

• [url].html 初期のドキュメントリクエスト用のHTMLファイル
• [url].data クライアント側のナビゲーションブラウザリクエスト用のファイル

ビルドの出力は、どのファイルがプリレンダリングされたかを示します。

> react-router build
vite v5.2.11 building for production...
...
vite v5.2.11 building SSR bundle for production...
...
Prerender: Generated build/client/index.html
Prerender: Generated build/client/blog.data
Prerender: Generated build/client/blog/index.html
Prerender: Generated build/client/blog/my-first-post.data
Prerender: Generated build/client/blog/my-first-post/index.html
...

開発中、プリレンダリングはレンダリングされた結果をpublicディレクトリに保存しません。これはreact-router buildの場合のみ発生します。