SSR 服务端渲染

概念：

SSR 全称为 Server Side Render，指服务端渲染。其原理是将 HTML 页面及其相应的动态数据在服务端进行组装，然后直接将完整的页面呈现在浏览器。

优点：

减少 HTTP 请求，加快首屏渲染，减少白屏时间，用户体验更好；
有利于 SEO（全称为 Search Engine Optimization，中译为搜索引擎优化），渲染完成后直接返回生成好内容的静态 HTML。

缺点：

前端开发工作由后端来完成，分工不明确；代码不易维护。
消耗更多的服务器资源。

实例：
本案例中使用版本如下：
“node”:“v10.15.3”;
“express”: “^4.17.1”;
“mysql”: “^2.17.1”;
“vue”: “^2.6.11”;
“vue-server-renderer”: “^2.6.11”

创建 package.json 文件。
npm init
安装 express \ mysql \ vue \ vue-server-renderer。
npm express mysql vue vue-server-renderer --save
创建 index.html，内容如下：
生成 HTML 模板

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>{{title}}</title><meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<h3>{{title}}</h3>
<!--vue-ssr-outlet--> <!--注意：这是 JS 生成的 DOM 节点插入的地方,前面的一段注释 vue-ssr-outlet 一定要-->
</body>
</html>

创建 sqlConfig，内容如下：
连接数据库

var mysql = require('mysql');
var connection = mysql.createConnection({host     : '127.0.0.1',port     : '3306',user     : 'root',password : '',database : 'exchange'
});
connection.connect();
module.exports = connection;

直接在数据库中写入数据，如下所示：
创建 index.js，内容如下：
动态生成 DOM 节点，获取数据。

const Vue = require('vue');
const server = require('express')();
const fs = require('fs');
var connection = require('./sqlConfig');//读取 HTML 模版
const renderer = require('vue-server-renderer').createRenderer({template: fs.readFileSync('./index.html', 'utf-8')
})
// context 对象中的参数可直接在 HTML 中读取
const context = {title: 'Vue-ssr案例',
};
server.get('*', (req, res) => {//查询数据库connection.query("SELECT * FROM product", [], function (error, results, fields) {if (error) throw error;var results = results;//创建vue实例，将 template 模板中的 DOM 节点挂载到 body 节点上const app = new Vue({data: {data: results,},//template 中的文本最外层一定要有容器包裹，即只能有一个父级元素，和vue的组件中是一样的，template: `<div>        <p v-for='item in data'>{{item.product_name}}</p></div>`})//将 Vue 实例渲染为字符串renderer.renderToString(app, context,  (err, html) => {if (err) {res.status(500).end('err:' + err)return}//将模版发送给浏览器res.end(html)});});})
//监听 8080 端口
server.listen(8080,()=>{console.log("listening on port 8081")
});

在地址栏输入 http://localhost:8080/，得到如下页面：

服务端渲染主流框架：

1.Nuxt.js——轻量级的 Vue 服务端渲染应用框架。
2.Next.js——轻量级的 React 服务端渲染应用框架。

CSR 客户端渲染

CSR 全称为 Client Side Render，指客户端渲染。HTML 页面及动态数据的组装发生在客户端，即浏览器端。前后端分离的情况下就是就是采用的客户端渲染机制。

优点：

前后端分离，前端可专注于页面效果、美观。后端专注于数据逻辑。分工更明晰，开发效率更高。

缺点：

首屏渲染时间较长，特别是单页面应用，如果没有做按需加载，则启动时便加载了全部 JS 文件。
不利于 SEO（搜索引擎优化），SEO 只能识别 HTML 中的内容，不能识别 JS 中的内容。

SSR 服务端渲染与 CSR 客户端渲染相关推荐

【SSR服务端渲染+CSR客户端渲染+post请求+get请求+总结】三种开启服务器的方法总结
SSR服务端渲染 get请求方式 get.html文件 <form action="http://10.9.46.253:4002" target="_self&q ...
NodeJS SSR服务端渲染：公共代码区分客户端和服务端
SSR服务端渲染(英语:server side render)指一般情况下,一个web页面的数据渲染完全由客户端或者浏览器端来完成.先从服务器请求,然后到页面:再通过AJAX请求到页面数据并把相应的数 ...
React SSR: 基于 express 自构建 SSR 服务端渲染
React SSR: 基于 express 自构建 SSR 服务端渲染文章目录 React SSR: 基于 express 自构建 SSR 服务端渲染完整代码示例前情提要构建 CSR 项目项 ...
markdownpad2 html渲染组件出错_「万字长文」一文吃透React SSR服务端同构渲染
写在前面前段时间一直在研究 react ssr技术,然后写了一个完整的 ssr开发骨架.今天写文,主要是把我的研究成果的精华内容整理落地,另外通过再次梳理希望发现更多优化的地方,也希望可以让更多的人 ...
react native text换行_基于React+Koa实现React SSR服务端渲染
React Server-Side Rendering 其实这个概念很早之前就有了解了,出于没有应用场景原因,之前一直都只停留在了解API的层面,未曾去实践.快到周末闲来无事,自己复盘了下之前做的新商 ...
SSR -- 服务端渲染基础
前言笔记来源:拉勾教育大前端高薪训练营阅读建议:建议通过左侧导航栏进行阅读服务端渲染基础基本概述随着前端技术栈和工具链的迭代成熟,前端工程化.模块化也已成为了当下的主流技术方案,在这波前端 ...
react ssr php,一文吃透 React SSR 服务端渲染和同构原理
全网最完整的 React SSR 同构技术原理解析与实践,从零开始手把手带你打造自己的同构应用开发骨架,帮助大家彻底深入理解服务端渲染及底层实现原理,学完本课程,你也可以打造自己的同构框架. 写在前面 ...
Nuxt SSR 服务端渲染详解
Nuxt SSR 服务端渲染详解 1.Nuxt项目构建 2.Nuxt的生命周期 2.1 nuxtServerInit 钩子 2.2 middleware 中间件 2.3 validate 数据校验 ...
Vue2系列教程——SSR服务端渲染
Vue2 SSR服务端渲染概念:ssr(server side render)服务端渲染优点: 有利于搜索引擎的SEO操作,由于搜索引擎爬取的是完全渲染出来的页面. 对于网络慢或运行慢的设备,可提 ...

SSR 服务端渲染与 CSR 客户端渲染

SSR 服务端渲染与 CSR 客户端渲染

SSR 服务端渲染

CSR 客户端渲染

SSR 服务端渲染与 CSR 客户端渲染相关推荐

最新文章

热门文章