摘要：補(bǔ)充上文中出現(xiàn)的部分函數(shù)，直接截取自源碼，都相對(duì)簡(jiǎn)單，可以作為參考很多參數(shù)，太長(zhǎng)省略

這是一個(gè)基礎(chǔ)demo，由開(kāi)發(fā)者自己提供server，用于渲染

const Koa = require("koa")
const Router = require("koa-router")
const next = require("next")
// 創(chuàng)建實(shí)例
const app = next({ dev, conf, dir: "./src" })
app.prepare().then(() => {
  const server = new Koa()
  const router = new Router()
  router.get("/", async ctx => {
    // 渲染
    await app.render(ctx.req, ctx.res)
    ctx.respond = false
  })
  server.listen(port)
})

在自定義服務(wù)端中通過(guò)const app = next()創(chuàng)建實(shí)例并使用app.render(req, res)方法進(jìn)行渲染

所以直接從app.render這個(gè)渲染入口開(kāi)始著手

了解框架邏輯唯一的方式就是看源碼，由于源碼過(guò)于細(xì)節(jié)，下面我會(huì)簡(jiǎn)化涉及到的代碼，僅保留主要邏輯，附帶具體地址，有興趣深入的同學(xué)可以看看

next-server/server/next-server.ts

import { renderToHTML } from "./render.tsx"

// app.render入口函數(shù)
this.render(req, res){
    const html = await this.renderToHTML(req, res)
    return this.sendHTML(req, res, html)
}
this.renderToHTML(req, res){
    const html = await this.renderToHTMLWithComponents(req, res)
    return html
}
this.renderToHTMLWithComponents(req, res) {
    // render內(nèi)的renderToHTML
    return renderToHTML(req, res)
}

可以看到上面都是簡(jiǎn)單的調(diào)用關(guān)系，雖然刪除了大部分代碼，但我們只需要知道，最終它調(diào)用了render.tsx內(nèi)的renderToHTML

這是一個(gè)相當(dāng)長(zhǎng)的函數(shù)，也就是本篇文章的主要內(nèi)容，通過(guò)renderToHTML能夠了解到大部分內(nèi)容，和上面相同，刪除了大部分邏輯，僅保留核心代碼

// next-server/server/render.tsx
function renderToHTML(req, res) {
// 參考下文#補(bǔ)充 loadGetInitialProps，非常簡(jiǎn)單的函數(shù)，就是調(diào)用了_app.getInitialProps
// _app.getInitialProps函數(shù)內(nèi)部會(huì)先調(diào)用pages.Component的getInitialProps
// 也就是在這里，我們編寫的組件內(nèi)的getInitialProps同樣會(huì)被調(diào)用，獲取部分初始數(shù)據(jù)
  let props = await loadGetInitialProps(App, { Component, router, ctx });
  
  // 定義渲染函數(shù)，返回html和head
  const renderPage = () => {
    // 參考下文#補(bǔ)充 render
    return render(
      renderToStaticMarkup,
      //渲染_app,以及其內(nèi)部的pages.Component也就是我們編寫的代碼，詳情參考next/pages/_app.tsx
      
    );
  };
  
// _document.getInitialProps會(huì)調(diào)用renderPage，渲染_app也就是我們的正常開(kāi)發(fā)時(shí)編寫的組件代碼，詳情參考next/pages/_app.tsx
  const docProps = await loadGetInitialProps(Document, { ...ctx, renderPage });
  
// 參考下文#補(bǔ)充 renderDocument
  let html = renderDocument(Document, {
    props,
    docProps,
  });
  return html;
}

req=>
render(req, res)
    renderToHTML(req, res)
        renderToHTMLWithComponents(req, res)
            renderToHTML(req,res)
                _app.initialProps = loadGetInitialProps(App, { Component, router, ctx })
                _document.initialProps = loadGetInitialProps(Document, { ...ctx, renderPage })
                renderDocument(Document, _app.initialProps, _document.initialProps)
<=res

對(duì)應(yīng)

req=>
    _app.getInitialProps()
        Component.getInitialProps()
    _document.getInitialProps()
        _app.render()
            Component.render()
    _document.render()
<=res

這篇文章簡(jiǎn)要描述next服務(wù)端的渲染過(guò)程，從中我們也能清楚_document、_app、以及pages內(nèi)自己編寫的組件之間的關(guān)系...

要是還沒(méi)明白，請(qǐng)重新閱讀一遍renderToHTML函數(shù)內(nèi)的注釋內(nèi)容

需要注意的一些點(diǎn)，隨緣補(bǔ)充

_document只在服務(wù)端被執(zhí)行，瀏覽器端是不會(huì)執(zhí)行的

react提供的renderToString函數(shù)只產(chǎn)出html，也就是純粹的string，所有數(shù)據(jù)必須在調(diào)用renderToString之前注入

在瀏覽器端渲染時(shí)，存在isInitialRender用于標(biāo)示是否第一次渲染，如果是第一次渲染，會(huì)調(diào)用ReactDOM.hydrate(reactEl, domEl)來(lái)執(zhí)行綁定事件，所以部分生命周期（componentWillMount之后）以及事件會(huì)在瀏覽器端執(zhí)行。

上文中出現(xiàn)的部分函數(shù)，直接截取自源碼，都相對(duì)簡(jiǎn)單，可以作為參考

function render(
    renderElementToString: (element: React.ReactElement) => string,
    element: React.ReactElement,
    ampMode: any,
  ): { html: string; head: React.ReactElement[] } {
    let html
    let head
  
    try {
      html = renderElementToString(element)
    } finally {
      head = Head.rewind() || defaultHead(undefined, isAmp(ampMode))
    }
  
    return { html, head }
  }

export async function loadGetInitialProps(Component: NextComponentType, ctx: C): Promise {
    if (process.env.NODE_ENV !== "production") {
      if (Component.prototype && Component.prototype.getInitialProps) {
        const message = `"${getDisplayName(Component)}.getInitialProps()" is defined as an instance method - visit https://err.sh/zeit/next.js/get-initial-props-as-an-instance-method for more information.`
        throw new Error(message)
      }
    }
    // when called from _app `ctx` is nested in `ctx`
    const res = ctx.res || (ctx.ctx && ctx.ctx.res)
  
    if (!Component.getInitialProps) {
      return null
    }
  
    const props = await Component.getInitialProps(ctx)
  
    if (res && isResSent(res)) {
      return props
    }

function renderDocument(
    Document: DocumentType,
    {...很多參數(shù)，太長(zhǎng)省略}
  ): string {
    return (
      "" +
      renderToStaticMarkup(
        
          
        ,
      )
    )
  }