随着前端技术的不断发展,涌现了许多客户端渲染的前端框架,这些框架所构建的单页面应用的优点为:
- 用户体验好
- 开发效率高
- 渲染性能好
- 可维护性好
缺点为:
- 单页面应用的首屏渲染时间过长,与服务端渲染好的页面返回前端所不同的是,单页面应用是等待前端js编译完成才渲染页面,所以出现了首屏加载时间过长的问题
- 单页面不利于 SEO
解决方案:
同构应用
- 通过服务端渲染首屏直出,解决spa页面首屏渲染慢以及不利于seo
- 通过客户端渲染接管页面内容交互得到更好的用户体验
- 这种方式通常被称为现代化的服务端渲染,也叫做同构渲染
- 这种方式构建的应用成为服务端渲染应用或者是同构应用
什么是渲染?
把数据和模板拼接到一起,呈现给用户
{
message:"xuke"
}
<h1>hello,{{message}}</h1> //hello,xuke
传统的服务端渲染 (SSR)
代码举例:
html 模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>传统的服务端渲染</title>
</head>
<body>
<h2>传统的服务端渲染</h2>
<p>{{title}}</p>
<ul>
{{each post}}
<li>
{{$value.name}}
</li>
{{/each}}
</ul>
</body>
</html>
data.json
{
"post":[
{
"id":1,
"name":"xuke",
"age":22
},
{
"id":2,
"name":"xuke2",
"age":23
},
{
"id":3,
"name":"xuke3",
"age":24
},
{
"id":4,
"name":"xuke4",
"age":24
},
{
"id":5,
"name":"xuke5",
"age":25
}
],
"title":"my name is xuke"
}
服务端代码 index.js
需要安装的插件 express art-template nodemon
const express = require('express')
const fs = require('fs')
const template = require('art-template')
const app = express()
app.get('/', (req, res) => {
// 获取页面模板
const templates = fs.readFileSync('./index.html', 'utf-8')
console.log(templates)
// 获取数据
const data = JSON.parse(fs.readFileSync('./data.json', 'utf-8'))
console.log(data)
// 渲染
const artTemplate = template.render(templates, data)
// 把渲染结果发送给客户端
res.send(artTemplate)
})
app.listen(3000, () => {
console.log("running...")
})
服务端渲染的缺点
- 前后端代码混合在一起,后端代码压力大
- 体验不够友好
客户端渲染 (CSR)
随着 ajax 技术的诞生,服务端渲染的问题得到了有效的解决,使得客户端动态的获取数据,我们呢从以前服务端渲染的工作变成了客户端渲染
缺点
- 首屏渲染慢
- 不利于 SEO
为什么首屏渲染慢
由于客户端渲染首屏至少要经过三次的http请求,要消耗一定的时间,页面和js均需要请求,
而服务端渲染,是在服务端的时间已经把数据渲染好了,不用多余的请求,只需要请求一次就好了,所以首屏渲染要明显优于客户端
为什么不利于SEO
SEO:网站在搜索引擎中知道有什么,搜索对应的关键字的时候就可以搜索到你的网站,搜索引擎是通过机器程序获取网页的内容,
客户端渲染要通过解析js才渲染的我们通过机器读取的网页信息如下:
服务端渲染的时候我们通过机器解析的页面如下:
通过对比我们发现服务端渲染读取的信息更有利于机器识别,对于单页面应用来说,它的SEO几乎为0
SEO 技巧
- 合理的title、description、keywords
- 语义化的HTML代码,符合W3C规范:语义化代码让搜索引擎容易理解网页
- 非装饰性图片必须加alt
- 友情链接,好的友情链接可以快速的提高你的网站权重
- 重要内容HTML代码放在最前:搜索引擎抓取HTML顺序是从上到
- 少用iframe:搜索引擎不会抓取iframe中的内容
现代化的服务端渲染(同构渲染)
同构渲染 = 后端渲染 + 前端渲染
- 它是基于React 、 vue 等框架,客户端渲染和服务端渲染的相结合
• 在服务端渲染执行一次,用于首屏的渲染
• 在客户端渲染执行一次,用于接管页面交互 - 核心解决 SEO 和 首屏渲染慢的问题
- 拥有了传统的服务端渲染的有点和客户端渲染的优点
如何实现同构渲染
- 使用vue,react等框架的官方解决方案
• 优点:有助于理解原理
• 需要搭建环境 非常麻烦 - 使用第三方的解决方案
• react 生态的next.js
• vue 生态的 nuxt.js
同构渲染的问题
- 浏览器特定的代码只能在某些声明周期钩子函数中使用
- 一些外部扩展库可能需要特俗处理才能在服务端渲染应用中运行
- 不能在服务端渲染期间操作Dom
什么时候使用服务端渲染
- 首屏渲染速度是否真的需要
- 是否真的需要SEO