现在的服务端渲染和过去的服务端渲染的区别

这个问题困扰了我很久，究竟为什么要使用服务端渲染呢？在SPA出现之前，不就是通过服务端进行渲染的吗？要清楚一点，现在的服务端渲染和过去是有所不同的，现在的服务端渲染是对首屏加载进行优化，并不是对所有页面都进行渲染，其交互还是和SPA应用相似，也就是说现在的服务端渲染是介于过去和SPA应用的一种折中。

为什么服务端渲染可以加快首屏加载

要理解这个问题，要对SPA应用进行对比。传统SPA应用，浏览器是要先请求所有的js之后（webpack打包出来的bundle.js），再在浏览器中进行dom树的构造和显示的。而通过服务端渲染的应用，页面是由后端对html模板进行拼接，然后将拼接好的模板转化为字符串，返回给浏览器的，这么做的好处是页面显示不需要依赖js文件（注意不是页面的交互），浏览器也就省去了js文件请求以及构建dom的过程，将这部分转变为了请求一个单一的html文件。

服务端渲染带来的好处

• 加速首屏加载
• 优化SEO

优化SEO

SPA应用是SEO不友好的，爬虫是抓取不到有用的信息的，举个例子：查看SPA网页源代码，会发现什么东西都没有，这是因为显示的内容都是由js进行dom操作插入的；而通过服务端渲染的网页，源代码是包含一些重要的html标签及其内容的，这是因为该页面是由服务端进行html模板拼接，并且传该html字符串到浏览器，其本质上就是一个完整的html，而不是后续通过js进行dom操作生成的。

开发中遇到的问题

使用mini-css-extract-plugin对css进行提取

mini-css-extract-plugin涉及到对document的操作，而在服务端是还没有document这个对象的，因此使用extract-text-webpack-plugin。如果使用webpack4，则要安装extract-text-webpack-plugin@next，否则无法支持webpack4。

异步加载路由时，提取css的问题

extract-text-webpack-plugin中allchunks为true时，意味着将所有css提取到一个文件中，此时一定要配置optimization的选项，否则报错。项目中vue-router使用的是懒加载，allchunks为true时，会将异步模块中的css也提取出来，达不到完全的按需加载。allchunks为false，在production模式下，访问todo路由时会出错，而访问login路由时不会出错；在development模式下，访问两个路由都不会有问题。对比了一下，感觉问题是出现在了提取css的时候，原因还不了解。因此将allchunks设为true，但又出现了一个问题，提取时多出了一个vendor.css，这个文件内容是异步模块内的css样式。搜索了很久才发现，optimization中和cachegroup的设置有关，后来发现，官方文档就有说明，可以参考从依赖模块导入样式 (opens new window)。在提取node_modules的cachegroup中，chunks不能为all。