什么是客户端渲染?
下面是一个基本的的带有script脚本的页面
当客户端(通常指的是浏览器端)发起http请求,会经历以下几个步骤
1,http发起请求
2,服务端接受请求,响应一个页面index.html给客户端,也可以说是一个页面字符串。
3, 客户端拿到页面,然后进行解析渲染,解析到静态页面会渲染显示在浏览器上,解析到script动态脚本<script src='user.js'></script>,则浏览器会再次向浏览器发起请求
4,服务端再次处理服务端的请求,然后响应数据
5,客户端拿到服务器返回的数据,然后利用模板引擎进行渲染,最终将数据也显示在页面上
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./test.js"></script>
</head>
<body>
姓名:{{name}}
年龄:{{age}}
性别:{{sex}}
<script src='user.js'></script>
</body>
</html>
什么是服务器端渲染?
服务器端的渲染,指的是客户端只需要发起一次http请求,服务器就会一次性将渲染好的页面进行返回,客户端不需要再次发起请求去服务器端拿数据
服务器端渲染步骤:
1,首先拿到index.html,这是要要渲染的页面模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./test.js"></script>
</head>
<body>
姓名:{{name}}
年龄:{{age}}
性别:{{sex}}
</body>
</html>
2,然后使用将取到的数据使用模板引擎进行渲染
template.render('index.hmtl',{
name:"sunshine",
age:22,
sex:"女"
})
3,然后服务器将渲染好的index.html返回给客户端,客户端进行解析展示
服务端和客户端渲染的优缺点?
服务端渲染总体渲染时间比较短,但是页面需要等待服务器完全渲染完成才可以进行展示. 客户端渲染可以先进行页面渲染,然后再进行数据请求,再次渲染,由于会发多次请求,所以时间比较长
客户端渲染,因为是异步请求,所以不利已seo搜索,对于有些需要进行排名,想让用户搜索到的数据最好使用服务器端渲染
如何判断页面使用服务器端渲染还是客户端渲染?
审查浏览器源代码,如果能看到页面上展示的数据,则说明是服务器端渲染,看不到则就是客户端渲染。