Next.js 独特动态路由的渲染策略答案

【问题标题】：Next.js rendering strategy for unique dynamic routeNext.js 独特动态路由的渲染策略
【发布时间】：2022-06-22 17:57:19
【问题描述】：

我想充分利用托管我的 Next.js Web 应用程序的服务器，即使是以用户获取信息的 API 为代价。

所以我想知道渲染唯一动态路由的最佳方法是什么，例如：/post/[postId]。

我想避免 SSR 并尽可能多地使用 API 处理静态 HTML 文件，正如我为 /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 呈现独特的动态路线？欢迎任何想法！

【问题讨论】：

标签： javascript next.js

【解决方案1】：

我想一种方法是使用动态导入。这将减少你的包大小并为你的 JavaScript 代码引入延迟加载。静态 HTML 页面的一个注意事项是它们的尺寸很小，因此不需要太多优化。

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

【讨论】：