Next.js的唯一动态路由渲染策略

Question

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

所以我想知道渲染独特动态路由的最佳方法是什么，例如:/post/[postId].

我想避免SSR，并有静态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代码引入延迟加载。静态HTML页面的一个注意事项是，它们的大小很小，所以不需要大量的优化。

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