关于静态/混合和 SSR 构建的一些 NextJS 问题

Question

所以，我是 NextJS 的新手，我在某种程度上了解 getStaticProps、getServerSideProps 等的用法……但是，用例的细微差别我并没有考虑清楚。我希望根据以下条件，您可以告诉我要使用哪种类型的代。

产品页面： ---大部分是通过产品id检索的，数据变化不大 --- 有一些“动态内容”，但它是次要的。例如在某些条件下应用百分比折扣？

哪个？

主页： --- 大部分都是静态的..即评论/产品信息等..但是 --- 有一个标题（显示在所有页面上）显示用户名，如果他们登录。 哪个？

Answer 1

我建议在基本层面上理解 getStaticProps 与 getServerSideProps。

听起来比实际更复杂。一个简单的规则是问自己：

1. 我是否希望每次更改内容时都在构建时生成特定页面？这意味着您的 CI 服务器 构建页面，即您的 Vercel、AWS Amplify、GitHub 操作、GitLab 管道等会在每次内容更改时重新生成静态页面。使用 getStaticProps。

或

2. 我是否希望网络服务器在每次浏览器请求时实时生成页面？使用 getServerSideProps。

这是出色性能（构建时间）和内容新鲜度（实时）之间的权衡。

Next.js 的策略是将尽可能多的渲染转移到静态（构建时间），然后根据需要以智能方式刷新相关内容。这就是 revalidate 选项的用武之地，产品页面是这里的教科书用例。

Answer 2

我认为在两个页面上都应该使用 getStaticProps。 在这种情况下 1：您使用 getStaticPaths 按 id 导出所有生产页面。由于您的需求数据不会在产品页面上定期更改，因此您可以使用 revalidate 属性更新内容或重建项目。

此处参考：https://nextjs.org/docs/basic-features/data-fetching