next-csf-over-isr
v1.0.7
Published
# CSF Over ISR とは
Downloads
4
Readme
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.