入口
这是一个基础demo，由开发者自己提供server，用于渲染
const Koa = require('koa')
const Router = require('koa-router')
const next = require('next')
// 创建实例
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)
})在自定义服务端中通过const app = next()创建实例并使用app.render(req, res)方法进行渲染
所以直接从app.render这个渲染入口开始着手
了解框架逻辑唯一的方式就是看源码，由于源码过于细节，下面我会简化涉及到的代码，仅保留主要逻辑，附带具体地址，有兴趣深入的同学可以看看
app.render
next-server/server/next-server.ts
import { renderToHTML } from './render.tsx'
// app.render入口函数
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内的renderToHTML
return renderToHTML(req, res)
}可以看到上面都是简单的调用关系，虽然删除了大部分代码，但我们只需要知道，最终它调用了render.tsx内的renderToHTML
这是一个相当长的函数，也就是本篇文章的主要内容，通过renderToHTML能够了解到大部分内容，和上面相同，删除了大部分逻辑，仅保留核心代码
renderToHTML
// next-server/server/render.tsx
function renderToHTML(req, res) {
// 参考下文#补充 loadGetInitialProps，非常简单的函数，就是调用了_app.getInitialProps
// _app.getInitialProps函数内部会先调用pages.Component的getInitialProps
// 也就是在这里，我们编写的组件内的getInitialProps同样会被调用，获取部分初始数据
let props = await loadGetInitialProps(App, { Component, router, ctx });
// 定义渲染函数，返回html和head
const renderPage = () => {
// 参考下文#补充 render
return render(
renderToStaticMarkup,
//渲染_app,以及其内部的pages.Component也就是我们编写的代码，详情参考next/pages/_app.tsx
小结
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对应
req=>
_app.getInitialProps()
Component.getInitialProps()
_document.getInitialProps()
_app.render()
Component.render()
_document.render()
<=res这篇文章简要描述next服务端的渲染过程，从中我们也能清楚_document、_app、以及pages内自己编写的组件之间的关系...
要是还没明白，请重新阅读一遍renderToHTML函数内的注释内容
需要注意的一些点，随缘补充
- _document只在服务端被执行，浏览器端是不会执行的
- react提供的renderToString函数只产出html，也就是纯粹的string，所有数据必须在调用renderToString之前注入
- 在浏览器端渲染时，存在isInitialRender用于标示是否第一次渲染，如果是第一次渲染，会调用ReactDOM.hydrate(reactEl, domEl)来执行绑定事件，所以部分生命周期（componentWillMount之后）以及事件会在浏览器端执行。
补充
上文中出现的部分函数，直接截取自源码，都相对简单，可以作为参考
render
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 }
} loadGetInitialProps
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
} renderDocument
function renderDocument(
Document: DocumentType,
{...很多参数，太长省略}
): string {
return (
'' +
renderToStaticMarkup(
,
)
)
}