浅谈ssr服务器渲染、客户端渲染和预渲染以及前端打包部署

今天下班在地铁上直到现在写这个开始前，刚刚想明白一个问题，就是这篇博客的标题。
这篇博客没有代码，就是我认为我所想明白的一些东西。

1.客户端渲染：

->用户输入地址，客户端向服务器发送一次请求
->服务器传给浏览器对应的html文件
-> 浏览器解析html文件
-> 遇到ajax请求则向服务器再次请求一些数据
-> 服务器再次向浏览器发送相应的数据
-> 浏览器拿到ajax请求返回的数据后，将数据渲染在页面上
如图：

2.服务器渲染（SSR）

->客户端向服务器发送一次请求
-> 服务器接收请求，并在服务端加载html需要数据
-> 服务器在服务端渲染好整个html页面，发送给客户端
-> 客户端接收服务器发送过来的网页文件，不需要做任何操作，直接呈现
如图：

区别：
  客户端渲染是先拿到一个空html，再去根据代码去渲染DOM和CSSOM，涉及到了js阻塞，css阻塞等等知识点，可以去查查。
  服务端渲染是将上面的渲染过程在后端先做完，直接返回一个能直接在浏览器呈现的页面。这样就省的你自己电脑的浏览器去渲染，但速度不一定快。
优点：
  客户端渲染：
    1.可以快速的给出一个html页面骨架，然后再去慢慢加载资源。
    2.不利于爬虫，意思就是刚刚获取到html的时候，客户端渲染是空的，获取不到数据。
  服务器渲染（SSR）：
    1.利于SEO ，即能被搜索引擎搜索到，因为数据能一次加载处理，方便被查到。
    2.首屏渲染，首页是通过node加载的HTML字符串，用户直接可以看到完整HTML，所以更快。
缺点：
  客户端渲染：
    1.首屏加载时间会比较慢、性能差，白屏，对于SEO无能为力、
  服务器渲染（SSR）：
    1.渲染过程由后端完成，会造成服务器压力较大、
    2.服务端渲染中，影响声明周期钩子，例如react只会执行到componentDidMount之前的生命周期钩子，不利于前后端分离。
    3.服务器有压力。

说完客户端渲染和服务端渲染，下面说一下预渲染

3.预渲染

  其实预渲染很好理解，既前端项目打包build的时候，就生成由内容的html文件。每个需要预渲染的路由都有一个对应的 html。

优点：
  1.同样利于seo，毕竟页面有内容。
  2.同样利于首屏渲染。
缺点：
  1.如果有很多路由页面，每个路由都构建一个html，会严重拖慢你的构建速度。

如何选择？
1.注重SEO的新闻网站，非强交互的页面，建议采用服务器端渲染
    原因：注重seo，则必须用服务器渲染或者预渲染，但是新闻页面数量巨大，预渲染构建很不友好。
2.对于强交互的页面，不注重SEO，采用客户端渲染
    原因：交互性强，可能你服务器处理完，页面很快就变了，那岂不是白费劲。所以这种更适合浏览器去处理。
3.只需改善少数页面的SEO，采用预渲染
    原因：部分页面需要seo，因此不需要花费大量时间去构建预渲染页面。

前端打包文件dist结合nginx和node原理图（个人见解）

  以上是这三种渲染方式的基本原理，但今天最困扰我的是，既然ssr是服务端渲染，那么项目打包后是静态资源，放到nginx服务器上岂不是静态的，是怎么能动态渲染的呢？
下面一张图，就是我想明白画的，而且要写这篇博客进行纪念！

一转眼时间到了23:30，表达如有问题欢迎评论区讨论，一起学习！

                                                                                                                                                good night~