React 走出新手村 — Next ISR

15th鐵人賽 front-end nextjs isr react

LucianoLee

2023-09-25 09:54:45

566 瀏覽

分享至

ISR概念

ISR（Incremental Static Regeneration）是 Next.js 在（SSG）的基礎上做出的改進方法，讓頁面在構成之後根據需求進行重構，有助於提高網站性能。

ISR 的核心思想是：

預生成靜態頁面： Next.js 會在建構時生成靜態 HTML 頁面，就像SSG一樣。這些頁面是不會變的，可以被 cache，並可以在不經過server的情況下直接提供給用戶端。
增量再生成： 與 SSG 不同，ISR 可以讓你在頁面構建之後，依據某些條件觸發頁面的重新生成。也就是說你可以在不重新構建整個網站的情況下，僅重新生成部分頁面。

下面是 ISR 的主要精神：

提高性能： 預先產生靜態頁面可以確保使用者快速載入頁面，因為它們是純靜態的，不需要伺服器運算。
即時性： ISR 允許你根據需要更新頁面，以確保內容的及時性。例如，在電商網站上，你可以每小時重新產生商品頁面，以顯示最新的庫存和價格。
減少伺服器負擔： 與 SSR 不同，ISR 不需要伺服器為每個請求重新渲染頁面，只有在觸發再生成時才需要伺服器的參與。

實作範例

我們來擴充一下原本範例的功能，讓原本的表單長出各個角色細節的陳列頁面，透過 ISR 來完成以下功能：

在構建時生成列表第一頁範圍的所有角色細節的靜態頁面，讓首次訪問時的用戶可以快速看到畫面。
每當有新的角色細節發布或現有角色更新時，只需重新生成該角色的頁面，而不是整個網站。

// 路徑位置在 src/pages/characters/[id]/index.tsx

import { RickandmortyCharacter } from '@/pages'
import { GetStaticPaths, GetStaticProps } from 'next';
import { useRouter } from 'next/router'
import React, { useEffect, useState } from 'react'
// 我保留csr的部分讓大家好對比
// const Character = () => {
//   const [roleDetail, setRoleDetail] = useState<RickandmortyCharacter | null>(null)
//   const router = useRouter()
//   useEffect(() => {
//     const controller = new AbortController();
//     const signal = controller.signal;
//     fetch(`https://rickandmortyapi.com/api/character/${router.query.id}`, {
//       signal: signal
//     })
//     .then((response) => response.json())
//     .then((response: RickandmortyCharacter) => {
//       // 成功之後的處理
//       setRoleDetail(response)
//     });
//     return () => controller.abort();
//   }, [router.query.id])
//   return (
//     <div>
//       <h2>here is {router.query.id}</h2>
//       <div>{roleDetail?.name}</div>
//     </div>
//   )
// }

// 下面是SSG/ISR
interface CharacterProps {
  roleDetail: RickandmortyCharacter;
}

const Character: React.FC<CharacterProps> = ({roleDetail}) => {
  const router = useRouter()
  
  return (
    <div>
      <h2>here is {router.query.id}</h2>
      <div>
        <p>Name: {roleDetail?.name}</p>
        <p>status: {roleDetail?.status}</p>
        <p>species: {roleDetail?.species}</p>
        <p>gender: {roleDetail?.gender}</p>
        <p>origin: {roleDetail?.origin.name}</p>
        <p>location: {roleDetail?.location.name}</p>
      </div>
    </div>
  )
}

// 預先生成的路徑
export const getStaticPaths: GetStaticPaths = async () => {
  const numArr = (num: number) => {
    if (num > 0) {
      let result = [];
      for(let i = 1; i <= num; i++) {
        result.push(i)
      }
      return result
    }
  }
	// 這裡我本來就知道第一頁是1 - 20才這樣處理
  const possibleIds = numArr(20);
  
  const paths = possibleIds!.map((id) => ({
    params: { id: id.toString() },
  }));

  return {
    paths,
    fallback: 'blocking',// 可以設定為 false, true, blocking
  };
};

export const getStaticProps: GetStaticProps<CharacterProps> = async ({ params }) => {
  const characterId = params?.id;

  if (!characterId) {
    return {
      notFound: true,
    };
  }

  const response = await fetch(`https://rickandmortyapi.com/api/character/${characterId}`);
  const roleDetail: RickandmortyCharacter = await response.json();

  return {
    props: {
      roleDetail,
    },
    revalidate: 60 // 代表每60秒會重發確認頁面資訊是否有異動需要重新生成
  };
};

export default Character

在這個範例中：