next-csf-over-isr

CSF Over ISR とは

Client Side Fetch Over ISR の略です。

Next.js の ISR では、revalidate 期間以内の Props 更新は無視されますが、
状況によっては常に最新の Props を参照したいケースもあるかと思います。

その際に、「一度 ISR でページを描画後、クライアントサイドで再度 Props をフェッチし、再描画する」という方式を実現する HOC を提供するライブラリです。

How it works

getStaticPropsの返り値をPropsとしてページを描画後、Next.js の API route の機能を使ってgetStaticPropsをクライアントサイドから再度実行し、その返り値を新しいPropsとしてページをクライアントサイドで再描画する仕組みです。

HOC を使い、getStaticPropsで取得したPropsをインターセプトし、client side fetch を実行してページコンポーネントを描画するプロキシコンポーネントを構成します。

このライブラリは、プロキシコンポーネントを構成する HOC と、ページのgetStaticPropsを実行する API Route を自動生成する CLI から構成されています。

Requirement

• Next.js^9.0.0
• typescript^4.3.5

Installation

npm install next-csf-over-isr

Usage

1. ISR 対象のページコンポーネントを、CSR で再描画するように書き換える

import { GetStaticProps } from "next";
+ import { CSFOverISRPage } from "next-csf-over-isr";

export const getStaticProps = async (context) => {
  // data fetch

  return {
    props: { title: "hello world!" },
    revalidate: 6000
  }
}

type Props = {
  title: string;
}
const Page = ({title}: Props) => <div>{title}</div>

- export default Page;
+ export default CSFOverISRPage(Page);

HOC でページコンポーネントをプロキシします。

2.CSR のデータフェッチ用の API handler を生成する

npm run next-csf-over-isr posts/[slug]

CLI を利用して、対象のページのgetStaticPropsを実行する API Route を生成します。
パスとしてはpages/api/csr/${対象のページまでのパスと同じもの}.tsになります。

以上。

Note

• NEXT_PUBLIC_IS_CSR_ENABLED環境変数を指定すると client side data fetch が有効になります。
• CSFOverISRPageの第二引数には client side data fetch の関数を指定できますが、返り値がundefinedになった場合更新を行わないので、この関数に CSR を行うかどうかの制御を入れることが可能です。

License

"next-csf-over-isr" is under MIT license.