了解vue ssr的原理 自己构建一个简单的ssr框架

前言

大部分Vue项目都应该支持SSR进行SEO，毕竟搜索引擎是WEB应用的一大流量入口。Vue SSR现在已经成熟了，但是如果把一个SPA应用改造成SSR应用，成本还是有点高，等于重构前端。此外，对前端的技术要求相当高，需要熟悉Vue，还要有Node.js和webpack的应用经验。

介绍

Vue是一个构建客户端应用程序的框架，也就是说，vue组件在浏览器中呈现。所谓服务器端渲染是指在服务器端将vue组件渲染成组装好的HTML字符串，然后直接发送给浏览器。最后，这些静态标签需要在客户端作为完全交互式的应用程序被“激活”。

服务器端渲染的优势

更好的SEO，搜索引擎爬虫可以抓取到内容到达时间更快(第一屏加载更快)的渲染页面，因为服务器只需要返回渲染好的HTML，而且这部分代码很小，所以用户体验到了服务器渲染更好的缺点。

首先，开发成本比较高。例如，一些声明的周期性钩子函数(如beforeCreate和created)可以在服务器和客户端上运行，因此第三方库需要特殊处理才能在服务器呈现应用程序中运行。由于Nodejs作为服务器渲染的中间层，所以在部署项目时需要处于Node.js服务器的运行环境中。在高流量环境下，有必要分析服务器负载和缓存策略的原理

首先附上演示地址：https://github.com/wmui/vue-ssr-demo

第一步：编写入口-客户端. js和入口-服务器. js

Entry-client.js只在浏览器环境中执行，所以需要显示它来调用$mount方法和挂载DOM节点

从“Vue”导入Vue；从“”导入应用程序。/app . vue '；从“”导入createStore。/store/index . js '；函数createApp(){ const store=CreateStore()；const app=new Vue({ store，render :h=h(App)})；return {app，store}}const { app，store }=createApp()；//使用窗口中的数据。__INITIAL_STATE__替换整个状态下的数据，这样客户端就可以自由操作数据if (window。_ _ initial _ state _ _) {store。replacestate(窗口。_ _ initial _ state _ _)在渲染完成后的状态；}app。$ mount(' # app ')；Entry-server.js需要导出一个函数，该函数将在服务器端呈现期间被调用

从“Vue”导入Vue；从“”导入应用程序。/app . vue '；从“”导入createStore。/store/index . js '；导出默认函数(context) {//context是context对象const store=CreateStore()；let app=new Vue({ store，render :h=h(App)})；//查找所有asyncData方法让components=App.components让AsyncDataArr=[]；//为(输入组件){if(！components.hasOwnProperty(key))继续；让component=components[key]；If(组件。asyncdata) {asyncdataarr。push(组件。async data({ store })//将存储传递给asyncData}} //所有请求在并行窗口中执行return Promise.all(asyncDataArr)。__INITIAL_STATE__是什么。然后将(()={//context.state赋给。//现在你应该知道窗口在哪里了。__INITIAL_STATE__来自in entry-client.js，它是在服务器呈现期间添加到上下文中的context.state=store.state。返回app});};上面的异步数据是干什么用的？其实这个功能是专门用来请求数据的。您可能会问，为什么请求的数据没有在beforeCreate或Create中完成，但也会专门定义一个函数。虽然beforeCreate和created也会在服务器端执行(其他周期性的函数只会在客户端执行)，但是我们都知道请求是异步的，这就导致了在发送请求后返回数据之前渲染结束，所以Ajax返回的数据是不可能渲染的。因此，我们需要找到一种方法，等到所有数据都返回后再呈现组件

AsyncData需要返回一个承诺，这样它就可以等到所有请求都完成后再呈现组件。以下是在foo定价中使用asyncData的示例，其中数据请求已完成

导出默认的{异步数据：函数({商店}){退货商店。派单(' GET _ ARTICLE ')//返回promise }，计算出： { article(){ return this .$store.state.article } }}第二步：配置工具

工具配置比较简单，但是也需要针对客户和计算机网络服务器端单独配置

webpack.client.conf.js显然是用来打包客户端应用的

module.exports=merge(base，{ entry : { client : }路径。联接(_ _ dirname，'./entry-客户端。js ')} })；webpack.server.conf.js用来打包服务端应用，这里需要指定结节环境

module.exports=merge(base，{ target: 'node '，//指定是结节环境条目： {服务器：路径。联接(_ _ dirname，'./entry-server.js') }，输出： { filename : '[name].js '，//服务器。js库目标： '通用js2 '//必须按照模块规范打包才能被服务器调用。}，plugins: [新html webpacklugin({ template :路径。联接(_ _ dirname，'./index.ssr.html ')，filename: 'index.ssr.html '，files: { js: 'client.js' }，//client.js需要在超文本标记语言中引入excludechunk s 3360['服务器] //server.js只在服务端执行，所以不能打包到超文本标记语言中}) ]});第三步：启动服务

打包完成后就可以启动服务了，在start.js中我们需要把server.js加载进来，然后通过renderToString方法把渲染好的超文本标记语言返回给浏览器

const bundle=fs。readfilesync(路径。resolve(_ dirname，' dist/server.js ')，' utf-8 ')；const renderer=require(' vue-server-renderer ').createBundleRenderer(包，{ template : fs。readfilesync(路径。解析(_ dirname、' dist/index.ssr.html ')、' utf-8') /)服务端渲染数据});server.get('* '，(req，RES)={ renderer。rendertostring((err，html)={//console。日志(html)if(err){ console。err(err)；决议状况(500)。' end('服务器内部错误');返回；} RES . end(html)；})});效果图

演示已经上传到github:https://github。com/wmui/vue-SSR-演示

结语

个人实践Vue SSR已有一段时间，发现要想搭建一套完整的苏维埃社会主义共和国服务框架还是很有挑战的，或许Nuxt是一个不错的选择，对Nuxt感兴趣的朋友可以参考我的一个开源小作品文章

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。