服务端渲染和客户端渲染的区别

最新推荐文章于 2024-07-20 15:33:59 发布

前端小君君

最新推荐文章于 2024-07-20 15:33:59 发布

阅读量200

点赞数

分类专栏：网络

本文链接：https://blog.csdn.net/xsj_boke/article/details/104907726

版权

网络专栏收录该内容

3 篇文章 0 订阅

订阅专栏

服务端渲染和客户端渲染的区别

模板引擎最早诞生于服务端，后来才发展到了前端
真正的网站既不是纯异步也不是纯服务端渲染出来的而是两者结合来做
各自应用的场景：
1、当不需要对SEO友好的时候，推荐使用客户端渲染;
2、当需要对 SEO友好的时候，推荐使用服务器端渲染
eg：JD的商品列表就采用的是服务端渲染，目的了为了SEO搜索引擎优化
但是它的商品评论列表为了用户体验，而且也不需要SEO优化，所以采用的是客户端渲染

服务端渲染

服务端渲染方式
服务端安装命令行在需要安装的包中npm install art-template --save

// 在需要的文件模块中加载art-template
// 只需要使用require方法加载就可以了：require('art-template')
// 参数中的art-template就是你下载的包的名字
// 也就是install的名字是什么 则是require什么
// 查文档，使用模板引擎中的API
var template =require('art-template')
// 第一种方式
var ret=template.render('hello {{name}} ',{
	name:'jarvix',
	age: 18 ,
	provide:' changan '
})
console.log(ret)
// 第二种方式
var tplStr=`
<p>大家好,我叫： {{name}} </p>
<p>我今年 {{age}} 岁</p>
<p>我的家住在 {{provide}} </p>
`
var ree=template.render(tplStr,{
	name:'jack',
	age: 20 ,
	provide:' changan '
})
console.log(ret)

运行展示
优点：对SEO友好，因为我们经过服务器端渲染的页面，在网络中传输的时候，传输的是一个真实的页面。因此，爬虫客户端，当爬到我们的页面后，会分析我们给他提供的这个页面，此时，我们页面中的关键数据就会被爬虫给收录了。
缺点：服务器端渲染，对服务器压力比较大，可以使用服务器端的页面缓存技术，减轻服务器的渲染压力；不适合前后端分离开发。

客户端渲染

客户端渲染方式

<!DOCTYPE html>
<html>
<head>
	<title>在浏览器中使用art-template</title>
</head>
<body>
	<!-- 在浏览器中需要引用lib/template-web.js文件 -->
<script src="node_modules/art-template/lib/template-web.js"></script>
	<!-- 给<script>设置type="text/template"，标签里面的内容不会被执行，也不会显示在页面上，
	但是可以在另一个script里面通过获取插入到页面中。这样就把大段的HTML操作从js里面分离开了。 -->

	<!-- 模板引擎中不关心的字符串内容，只关心自己能认识的模板标记语法，eg:{{}}  -->
	<!-- {{}}语法称之为mustache语法 -->
<script type="text/template" id="tpl">
	hello {{name}}

</script>
<script>
	var ret=template('tpl',{
		name:'jack',
		age:'18',
		hobby:'gamming'
	})
	console.log(ret)
</script>
</body>
</html>