初探 nextjs 服务端渲染框架

小猴目前的项目使用nextjs来写的，使用有一个多月了，记录一下使用中的心得，有不对的地方望看官提宝贵意见。 网上对nextjs的褒贬不一，骂得也很惨，夸的也很棒，说说我的观点：只要在使用上掌握好方法和度，这个框架还是很好的。。。。。。

先说说 nextjs 提供的四个类似于生命周期的静态方法

getStaticProps （静态生成）：在构建时获取数据 。

getStaticPaths （静态生成）：指定 动态路由 以根据数据进行预渲染。

getServerSideProps （服务器端渲染）：在每个请求上获取数据。

getInitialProps （服务器端渲染）：在每个请求上获取数据。

说说区别吧！

getStaticProps，getStaticPaths是在构建时生效的

getServerSideProps,getInitialProps是在请求时候生效的

换句话说，只要getServerSideProps和getInitialProps的页面都不会构建成静态文件。

nextjs 初始化服务

nextjs预留了文件夹名称：page  static public 

初始化主要是route的初始化：
    首先加载预留public目录 -- publicRoute
    其次加载预留static目录 -- staticRoute
    然后是fsRoute -- [...打包编译chunck后的一些文件，...publicRoute,...staticRoute]

nextjs 打包编译的文件 中有什么？

主要是打包后的一些纯静态的html，js文件 和json的data数据等

这里就可以看到有一些页面被编译打包成了静态的html，但是有一些并没有，主要是因为getServerSideProps,getInitialProps是在请求时候生效的。有一些页面用了getServerSideProps,getInitialProps这两个方法，这两个方法是在请求页面的时候才会执行的，所以只要有这两个方法的页面就不会打包成静态页面。

next 完成一个请求的流程

1. handele接受到请求 进行异常判断 异常则404

   无异常则将请求相应code置为200

2. 调用内部的run()

3. 调用 router.execute 方法

   router.execute的逻辑是怎么样的呢？

   1. 首先取查询预留的public和static是否存在要请求的文件，有的话直接返回静态文件

   2. 其次是查询打包编译后的静态文件中是否存在要请求的文件，有的话直接返回

   3. 最后，就是如果请求的是包含getServerSideProps,getInitialProps的页面，则需要node服务先去执行这两个方法，然后再构建 render to html string 文件返回，这就是ssr，同时也增加了服务端压力，renderToString的过程中做不了其他的事情。所以需要权衡好再使用这两个静态方法

ps. node做为服务端，相对其他来说，并不适合做超级复杂的事情，所以建议：

1. 涉及到公司产品和其他信息需要被更多人知道的页面的接口和数据尽可能放到服务端渲染 （getServerSideProps,getInitialProps）

2. 不涉及以上信息的尽可能放到浏览器端做，减少node的压力，提高交互体验