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

Question

您好，

我很惊讶地发现在next包中找不到关于getRequestHandler和render函数的任何信息。

我正在尝试设置自定义服务器，并想知道render函数实际上在做什么，或者它为什么要被使用？getRequestHandler清楚地呈现了应用程序，那么我为什么需要使用render手动传递路径呢？另外，单独传递pathname和query有什么意义呢？

显然我对这两个函数的用法感到困惑 - 在哪种情况下我会使用其中之一？

感谢大家的帮助。

Anagni

请参见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')
  })
})

- Sebastian

Answer 1

getRequestHandler vs render

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)

}

路径和查询

我认为Next.js的query与URL查询字符串有所不同。您可以使用像'/a'这样的路由，并传递一个查询对象，而无需将这些查询添加到您的URL中。

这是我尽力回答问题的表现。希望我能提供一些帮助。

参考：

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

- Andrew Zheng