怎样实现服务器端渲染？

服务端渲染的实现，通常有3种方式，第1种是手动进行项目的简单搭建，第2种是使用vue CLI 3脚手架进行搭建，第3种利用一些成熟框架来搭建(如Nuxt,js），本节讲解第1种和第2种方式，带领读者实现简单的服务器端渲染。

1.创建 vue-ssr项目

在C:\vue\chapter08目录中，使用命令行工具创建一个vue-ssr项目，具体命令如下:

mkdir vue-ssrcd vue-ssrnpm init  -y

执行上述命令后，会在vue-ssr 目录下生成一个package.json文件。

在Vue中使用服务器端渲染，需要借助Vue的扩展模块vue-server-renderer。下面我们在vue-ssr项目中使用npm来安装vue-server-renderer,具体命令如下:

npm install vue@2.6.x vue-server-renderer@2.6.X --save

vue-server-renderer是Vue中处理服务器加载的一个模块,给Vue提供在Node.js服务器端渲染的功能。vue-server-renderer依赖-些Node.js原生模块，所以目前只能在Node.js中使用。

2.Vue渲染

将vue-server-renderer安装完成后，创建服务器脚本文件test.js,实现将Vue实例的渲染结果输出到控制台中，具体代码如下:

 //①创建一个Vue实例const Vue = require('vue')const app = new Vue({template: '<div>SSR 的简单使用</div>'
//② 创建一个renderer实例
const renderer = require ('vue-server-renderer').createRendere()//③将Vue实例渲染为HTMLrenderer.renderToString(app, (err, html) => {if (err) {throw err
}console.log(html)})

在命令行中执行node test.js,运行结果如下所示:

<div data-server-rendered="true">SSR的简单使用</div>

从上述结果可以看出，在<div>标签中添加了一个特殊的属性data-server-rendered,该属性是告诉客户端的Vue这个标签是由服务器渲染的。

怎样实现服务器端渲染？相关推荐

【大前端之前后分离01】JS前端渲染VS服务器端渲染
前言之前看了一篇文章:@Charlie.Zheng Web系统开发构架再思考-前后端的完全分离,文中论述了为何要前后分离,站在前端的角度来看,是很有必要的:但是如何说服团队使用前端渲染方案却是一个现 ...
支持markdown的服务器,Vuejs中使用markdown服务器端渲染的示例
啊哈,又是来推荐一个 vuejs 的 package,miaolz123/vue-markdown. 对应的应用场景是:你想使用一个编辑器或者是在评论系统中支持 markdown.这个 package ...
基于 Angular 的企业级 Web 应用服务器端渲染的推荐建构
图片来源: 一个普通的 Angular 应用程序在浏览器中执行,在 DOM 中呈现页面以响应用户操作. Angular Universal 在服务器上执行,生成静态应用程序页面,然后在客户端上引导. ...
SAP 电商云 UI 服务器端渲染的建议架构
(1) 起点是用户的请求,通常从浏览器发出. (2) 请求应该命中缓存层(例如 CDN),该层可能包含已经在服务器端渲染的应用程序,在这种情况下响应非常快. CDN 通常将服务器端渲染存储一段时间,具 ...
SAP Spartacus UI 服务器端渲染的调试启动方式 - debug 模式
首先确认你已经熟悉这篇文章的启动方式:SAP Spartacus develop branch 的服务器端渲染启动方式. 第一步添加一个新的 build script,把 --configurati ...
部署 Node.js 应用以完成服务器端渲染 Server Side Rendering 的性能调优
原文:Operationalizing Node.js for Server Side Rendering 在 Airbnb,我们花了数年时间将所有前端代码稳定地迁移到一致的架构中,在该架构中,整个网 ...
Web 应用服务器端渲染入门指南
Rendering on the Web 作为开发人员,我们经常面临会影响应用程序整个架构的决策. Web 开发人员必须做出的核心决策之一是在他们的应用程序中实现逻辑和呈现的位置. 这可能很困难,因为 ...
SAP Spartacus 服务器端渲染单步调试步骤之二：在服务器端执行应用程序 Angular 代码
前文:SAP Spartacus 服务器端渲染单步调试步骤之一:应用程序准备工作入口: 进入 platform-server.js: 入口: 最终在服务器端执行 bootstrap,输入 Compo ...
SAP Spartacus 服务器端渲染模式下，在 Node.js 服务器端渲染视图的单步调试
入口:在 express-engine.js 文件的 render 函数设置断点: 进入 platform-server.js: 这个文件就是 SAP Spartacus 开启服务器端渲染之后,pac ...
关于 SAP UI5 对服务器端渲染 Server Sider Render 的支持问题
之前 Jerry 的公众号文章介绍过 SAP 产品的渲染模式: SAP UI渲染模式:客户端渲染 VS 服务器端渲染关于 SAP 产品 UI 的搜索引擎优化 SEO - Search Engine ...

怎样实现服务器端渲染？

怎样实现服务器端渲染？相关推荐

最新文章

热门文章