Next.js 獨特動態路由渲染策略

Question

我想充分利用托管我的 Next.js web 應用程序的服務器，即使它是以用戶獲取信息的 API 為代價的。

所以我想知道呈現唯一動態路由的最佳方法是什么，例如： /post/[postId] 。

我想避免 SSR，並讓 static HTML 文件盡可能頻繁地被 API 水化，就像我為/home/[page]所做的那樣，我在其中做了一些 ISR 以避免像這樣頻繁重新渲染：

export async function getStaticProps(context = {}) { 
    return {
        props: {},
        revalidate: 120, //cache page for 120s
      }
}
// No prerender of paths <=> "paths: []"
export async function getStaticPaths(context = {}) { 
    return {
    paths: [],
      fallback: 'blocking'
    }
}

/post/[postId]的問題是 postId 是唯一標識符，因此緩存頁面沒有真正的意義，並且無法進行預呈現。

問題是/post/id1和/post/id2沒有真正的 HTML 差異，因為 [postId] 屬性僅在 useEffect 中用於獲取數據，因此 SSR 完全是服務器資源的浪費。

所以問題是有什么方法可以優化 Next.js 呈現獨特的動態路線？ 歡迎任何想法！

Answer 1

我想一種方法是使用動態導入。 這將減少您的包大小並為您的 JavaScript 代碼引入延遲加載。 static HTML 頁的一個注意事項是它們的大小很小，因此不需要大量優化。

const SomePage = dynamic(
  () => import('@modules/some-page/index'),
  {
    ssr: false,
  }
);