在 NextJS 应用程序中使用 React Context API 会禁用静态站点生成器吗？

Posted 2023-04-14

【中文标题】在 NextJS 应用程序中使用 React Context API 会禁用静态站点生成器吗？

【英文标题】：Does Using React Context API In NextJS App Disable Static Site Generator?

【发布时间】：2021-08-27 15:48:57

【问题描述】：

我有一些关于 nextJS 和 SSG（静态站点生成器）的问题

1 - 我想全局管理我的应用程序状态，所以我想使用 react 的上下文 api。据我了解，在下一个 js 应用程序中使用 redux 会禁用 SSG。如果我使用 react context api 是否也会禁用？

2 - 我知道我可以进行服务器端渲染，但我想拥有一个从头开始创建的自定义 nodejs 服务器。我想从客户端的 nodeJS 服务器获取数据。这样做会禁用 SSG 并且对性能不利吗？

【参考方案1】：

documentation 将帮助您阐明对 Next.js 如何处理自动静态优化的理解。查看该文档中的 caveats 以了解它何时在全局级别被禁用。

除此之外，每个单独的页面是否表现为 SSG、ISR、SSG + CSR 或 s-s-r 取决于各个页面的数据要求。请参阅此documentation，以更好地了解 Next.js 根据数据要求处理每个页面的不同方式。

现在，直接回答你的两个问题：

我找不到任何迹象表明在 Next.js 中使用 Redux 会禁用 SSG。实际上，这里是 an official example using Redux 来说明 SSG 和 s-s-r Next.js 页面实现。反应上下文 API 也是如此。另一方面，您完全有可能通过使用 Redux/react context 同时在页面中需要动态数据来无意中禁用 SSG。阅读上面第二段中链接的文档以更好地理解这一点。

从您的自定义 NodeJS 服务器客户端获取数据不一定会禁用 SSG。如果您在每个页面加载时需要动态数据，它将禁用 SSG。您可以选择静态生成您的页面（SSG + CSR），然后请求您的数据客户端发布页面加载（想想 axois / 浏览器获取 API + 加载指示器）；或者，如果您需要在页面加载时立即显示数据（SSG 和 s-s-r），您可以使用 getStaticProps + getStaticPaths 在构建时 (SSG) 注入该数据，或者使用 getServerSideProps 在每个页面上注入数据页面加载 (s-s-r)。