服务端渲染和客户端渲染

服务端渲染

服务端渲染，简称SSR，在网页输入url时，服务端会给返回html，浏览器直接渲染，减少白屏的时间，但ssr渲染出的都是静态页面，并不能进行dom交互

大致分为3步：浏览器输入url-------服务端返回html-----浏览器渲染出页面

同时对于搜索引擎，可以通过输入url获取网站的html，收录其中的关键字，当用户在搜索引擎中输入内容时，和收录内容匹配，展示对应的内容，这也既是SEO（搜索引擎优化）

客户端渲染

又叫做浏览器渲染CSR，浏览器即给客户展示，如果采用客户端渲染，服务器返回js、css不返回会html，然而想要显示页面必须有html，这怎么办呢？浏览器会通过js来拼接html，实现页面渲染，csr渲染的页面直接支持交互操作

大致分为这几步：浏览器输入url-------服务端返回js/css-----浏览器通过js拼接出来html------浏览器渲染出页面

这样就可以看出，客户端渲染白屏时间确实会比服务端渲染时间长，一般我们说SSR支持首屏渲染优化就是这个原因

在vue中实现SSR渲染

可以通过koa来实现，ssr的重要步骤就是服务端返回html，我们可以通过vue提供的api：createSSRApp、renderToString把vue组件活页面转化为ssr 的html，然后通过koa将html放到node的web服务上

需要注意的是，浏览器中有一部分js的api，node中有一份js的api，在node服务器上调用浏览器的js-API，会报错，要注意区分好2者，node中没有浏览器的API

典型的就是document.createElementAPI，我们在浏览器中调用没问题，在node中调用就会报错，不认识，无法识别

SSR和CSR的结合

ssr有个缺点，只能实现静态页面，无法交互操作，为了弥补这一点，需要结合csr

常用的做法是，一套vue代码编译成2个内容，第一个是针对后端最常用的csr，第二个是针对ssr的，通过node服务器过滤出需要ssr处理的内容

非适用场景

SSR对于需要数据安全和高并发的场景并不适用

因为ssr可以被抓取数据，不适用于安全要求高的场景

因为ssr需要服务端拼接字符串等操作行为，消耗内存和cpu，高并发的情况下加大了对服务器的压力