# SSR(服务器渲染)

SSR: 服务端渲染在node端对vue页面进行渲染HTML文件返回给浏览器

# SSR优点

SEO : 不同于SPA的HTML只有一个无实际内容的HTML和一个app.js，SSR生成的HTML是有内容的，这让搜索引擎能够索引到页面内容。

更快内容到达时间传统的SPA应用是将bundle.js从服务器获取，然后在客户端解析并挂载到dom。而SSR直接将HTML字符串传递给浏览器。大大加快了首屏加载时间。

# SSR原理

TIP

在打包的时候会打包出来两套代码，一套客户端代码，一套服务端代码，服务端的html模板有对应的占位符()，以便渲染完成之后替换掉占位符，生成完整的HTML文件。服务端打包出的文件不需要引入打包出的js，需要用excludeChunks排除js。服务端打包出的server.boundle.js是用来给node端读取(fs.readFileSync)字符串来生成完整的HTML页面的，所以打包的时候写配置target:"node"，以及output:{ libraryTarget:'commonjs2' }。

客户端激活js:需要在根元素上写一个id='app'，以便客户端执行注入的js时能找到对应挂载的节点。客户端注入js:通过html-webpack-plugin这个插件，在webpack.server.js中配置插件的client字段路径为客户端打包出来的client.boundke.js，然后需要在服务端的html里采用ejs的方式写一个script， <script src="<%=htmlWebpackPlugin.options.client%>"><script>,这样在webpack打包完成后，就会自动把src的值替换为html-webpack-plugin插件client的值。

nuxt →