blog
blog copied to clipboard
mrdulin
使用next.js的ssr流程简介
客户端（浏览器）首次访问应用（不管是哪个页面，或者说路由），这里的应用就是server.js启动的服务，前端资源文件是build目录下的，这时候next.js会在服务端使用getInitialProps这个方法去准备初始化的数据（同步或者异步），然后通过ReactDOM.renderToString之类的方法把绑定了数据的html准备好，发送到客户端，并且还有该页面以及应用级别公用的一些依赖资源（css/js/图片,react框架等），后续的交互在客户端，比如路由跳转，这时候浏览器先根据路由去服务器上找对应页面的chunk.js（next.js的webpack通过code splitting默认把资源打包成了各个独立的chunk.js），chunk.js下载完开始解析执行，这时候该页面的getInitialProps是在客户端执行（同步异步的操作）
首次访问应用也理解为重新初始化这个SPA，例如：刷新浏览器，首次访问应用的url地址
所以，getInitialProps的参数ctx对象中，如果有req，表示从客户端有请求到server.js启的服务，这时候是ssr, cookie可以从request.headers中取。但如果是后续客户端交互，路由跳转后加载的页面，req是不存在的，这时候cookie需要通过document.cookie取, 这时候是csr
就类似，express.js应用中的req和res，客户端访问到express定义的路由，就会拿到客户端的req
doRender里面调用了getInitialProps方法, 可以看到server端和client端都有调用
对于爬虫，它对咱们应用每个路由的访问，都可以看作是首次访问，那么页面就都是服务端准备好以后响应给爬虫的了，也就是爬虫对每个url链接的访问，都是ssr，服务端准备好渲染完毕的html给搜索引擎爬虫。
对于用户来说，首次使用客户端（浏览器，或者叫用户代理）访问咱们的应用（不管是哪个url路由），首先是ssr，后续用户的交互（点击next.js提供的Link组件进行路由切换）和以前客户端的SPA一样, 下载相应页面（模块）的chunk.js文件，在客户端解析执行，通过getInitialProps发api请求等等
https://github.com/zeit/next.js
尽管github有2w+star, 然而stackoverflow上next.js tag下的问题只有130个，react有7w+，angular1.x有24w+, angular2.x+有9.5w+。
https://stackoverflow.com/tags 搜next.js
使用过程中遇到不少问题，通过google去搜索，结果除了官方issue，其他基本没有。
google搜索next.js关键词，前几页的链接都是hello world级别，开箱即用的搞一个hello world级别的ssr很快。
官方readme中的只是简单介绍用法，和一些例子，没有详细的api文档。比如NextScript是什么含义，并没有说明。而且，构建一个系统，应该最先了解系统的流程，next.js并没有讲它系统的流程。
有些东西只能看源码了解，累觉不爱。
