javascript - 为什么 Next.js 自定义服务器禁用自动静态优化?

标签 javascript node.js reactjs next.js

我无法理解为什么 in the docs据说拥有自定义服务器会禁用 Automatic Static Optimization .

Before deciding to use a custom server, please keep in mind that it should only be used when the integrated router of Next.js can't meet your app requirements. A custom server will remove important performance optimizations, like serverless functions and Automatic Static Optimization.

我的理解是,多亏了它,在构建阶段 ( next build ) 它将自动生成一个 HTML 文件(用于符合条件的页面),然后在以后的请求中提供该文件。

我尝试过的

  • 我创建了一个没有 getServerSideProps 的静态页面或 getInitialProps由于自动静态优化,应该在构建阶段预渲染。
  • 我添加了一个 console.log()到功能页面组件,以了解何时呈现该组件:即它是根据请求在服务器上呈现还是仅在客户端呈现。

静态页面组件代码:

export default function Static() {
  console.log("The static page component is being rendered.")

  return <div>Hello from static page!</div>
}
  • 我创建了一个自定义服务器,让所有请求都由 nextjs 处理程序处理

自定义服务器代码:

const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  const server = express()

  server.all('*', (req, res) => {
    return handle(req, res)
  })
})
  • 已测试使用内置服务器提供应用程序 next start和我上面提到的自定义服务器。

结果

运行后next build ,在这两种情况下,都会为静态页面生成相应的 HTML 文件。当访问静态页面路由时,在这两种情况下,记录的消息只出现在浏览器的控制台中,而不是 Node 的控制台中。当通过 curl 请求静态路由时并分析响应,我可以看到 <div>Hello from static page!</div>当前的。据此我推断它实际上是在提供预呈现的 HTML,因此使用了自动静态优化

问题

  1. 文档指出自定义服务器将禁用自动静态优化,据我所知,它会在构建步骤中运行 next build ,在我的测试中它怎么可能起作用:生成 HTML 文件并为对该静态页面路由的所有请求提供服务?

  2. 如果自定义服务器确实禁用了自动静态优化,是什么阻止了自定义服务器中的 nextjs 处理程序使用来自 next build 的已生成文件?步骤并像内置服务器一样为它们提供服务?

  3. 我是否误解了自动静态优化 的真正作用?还是别的?

谢谢!

最佳答案

你是对的,当你让 nextjs 处理请求时,静态自动优化确实适用于自定义服务器。该警告可能是指您实际使用自定义服务器来处理页面请求,而不是仅仅将它们传递给 nextjs。

Here's a quote来自 next.js 的合著者:

Overall we recommend not adding a custom server, not to make you use Vercel but to make sure we can optimize the whole stack end to end. Automatic static optimization is always there, but if you're using a custom server there's some downsides like you can't remap routes which can lead to bugs in your application, hence why we don't recommend it.

关于javascript - 为什么 Next.js 自定义服务器禁用自动静态优化?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71987976/

相关文章:

javascript - sinon spy 不在生成器循环中注册调用?

javascript - 与 crossrider 侧面板插件通信

javascript - 如何在 typescript 文件中使用 json 文件

javascript - 在 ExtJs 中模拟点击 tabpanel

javascript - 发送后 Node 无法设置 header

node.js - 使用 axios 实现 DELETE 请求的最简单方法是什么?

reactjs - React Typescript 如何通过类型传递 props

reactjs - Electron 中的路由 + 创建 React App

javascript - 带有 socket.io 的 nodejs 中的 UTF-8

json - 在react中使用map方法渲染JSON API