自定义 Next.js - getRequestHandler 和渲染函数之间的区别

Seb*_*ian 27 javascript node.js next.js

再会,

我很惊讶我找不到任何关于包的功能getRequestHandlerrender功能的信息next

我正在尝试设置自定义服务器,并且想知道该render功能实际上在做什么或者为什么使用它?getRequestHandler清楚地呈现应用程序,那么为什么我要使用渲染来手动传递路径?另外,分别传入路径名和查询有什么意义?

我显然对这两个用例感到困惑 - 在哪种情况下我会使用其中一个?

谢谢大家的帮助。

阿纳尼

请参阅https://nextjs.org/docs/advanced-features/custom-server

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  createServer((req, res) => {
    // Be sure to pass `true` as the second argument to `url.parse`.
    // This tells it to parse the query portion of the URL.
    const parsedUrl = parse(req.url, true)
    const { pathname, query } = parsedUrl

    if (pathname === '/a') {
      app.render(req, res, '/b', query)
    } else if (pathname === '/b') {
      app.render(req, res, '/a', query)
    } else {
      handle(req, res, parsedUrl)
    }
  }).listen(3000, err => {
    if (err) throw err
    console.log('> Ready on http://localhost:3000')
  })
})
Run Code Online (Sandbox Code Playgroud)

And*_*eng 14

getRequestHandler 与渲染

app.getRequestHandler返回一个请求处理程序,我们可以使用它来解析所有 HTTP 请求。app.render检查是否需要提供静态资产。它还检查请求的页面是否为阻止/内部页面。在这些检查通过后,Next.js 还使用我们将从app.getRequestHandler. 如果我们直接使用请求处理程序,我们将不会获得这些检查并遇到需要手动处理的问题。

以下是处理自定义服务器的部分源代码。我希望它能让答案更清楚一点。

// next/next-server/server/next-server.ts
// This function expose a private method, which used by render 
public getRequestHandler() {
  return this.handleRequest.bind(this)
}

// render method
public async render() {
  // .... more code
  // check if server needs to handle static files
  if (
    !query._nextDataReq &&
    (url.match(/^\/_next\//) ||
      (this.hasStaticDir && url.match(/^\/static\//)))
  ) {
    return this.handleRequest(req, res, parsedUrl)
  }
  // check the requested page is a internal/blocked page
  if (isBlockedPage(pathname)) {
    return this.render404(req, res, parsedUrl)
  }

  const html = await this.renderToHTML(req, res, pathname, query)
  // Request was ended by the user
  if (html === null) {
    return
  }

  // respond with rendered HTML
  return this.sendHTML(req, res, html)

}
Run Code Online (Sandbox Code Playgroud)

路径和查询

我认为 Next.jsquery与 URL 查询字符串有点不同。您可以使用这样的路由'/a'并传入查询对象,而无需将这些查询添加到您的 URL。

这是我回答这个问题的最大努力。希望我能提供一些帮助。

参考:

https://github.com/vercel/next.js/blob/canary/packages/next/next-server/server/next-server.ts