vuecli项目实现构建SSR服务端渲染-创新互联

vuecli项目实现构建SSR服务端渲染？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

服务端渲染（SSR）

将一个 Vue 组件在服务端渲染成 HTML 字符串并发送到浏览器，最后将这些静态标记“激活”为可交互应用程序的过程就叫服务端渲染（SSR）

服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用"，因为应用程序的大部分代码都可以在服务器和客户端上运行

为什么使用 服务端渲染（SSR）

• 更好的 SEO：传统的 spa 页面数据都是异步加载，搜索引擎爬虫无法抓取，服务端渲染（SSR）使搜索引擎爬虫抓取工具可以直接查看完全渲染的页面，解决 vue 项目的 seo 问题
• 更快的内容到达时间 (首屏加载更快)：请求页面时，服务端将渲染好的页面直接发送给浏览器进行渲染，浏览器只需要解析渲染 HTML，无需等待所有的 JavaScript 都完成下载并执行，才显示服务器渲染的标记

服务端渲染（SSR）缺点

• 开发条件所限：浏览器特定的代码，只能在某些生命周期钩子函数中使用；一些外部扩展库可能需要特殊处理，才能在服务器渲染应用程序中运行
• 涉及构建设置和部署的更多要求：与可以部署在任何静态文件服务器上的完全静态单页面应用程序 (SPA) 不同，服务器渲染应用程序，需要处于 Node.js server 运行环境
• 更多的服务器端负载：在 Node.js 中渲染完整的应用程序，显然会比仅仅提供静态文件的 server 更加大量占用 CPU 资源，因此如果你预料在高流量环境下使用，需要准备相应的服务器负载，并采用缓存策略
   

服务端渲染（SSR）vs 预渲染（Prerendering）

如果你只是想改善少数营销页面（例如 /, /about, /contact 等）的 SEO，那么你可能需要预渲染，无需使用 web 服务器实时动态编译 HTML，而是使用预渲染方式，在构建时简单地生成针对特定路由的静态 HTML 文件，优点是设置预渲染更简单，并可以将你的前端作为一个完全静态的站点
如果你使用 webpack，你可以使用 prerender-spa-plugin （npm地址） 插件轻松地添加预渲染

服务端渲染（SSR）原理

构建流程：所有的文件拥有一个公共入口 app.js，进入服务端入口 entry-server.js 和客户端入口 entry-client.js ，项目完成后通过使用 webpack 打包生成服务端 server bundle（一个供服务端 SSR 使用的 json 文件）和客户端 client bundle（用于浏览器），当请求页面时，服务端将 vue 组件组装成 HTML 字符串发送到浏览器，混入到客户端访问的 HTML 模板中，完成页面渲染

通过 vuecli 创建 vue 项目

vue create vue-ssr-demo