Node.js---客户端渲染和服务端渲染

目录

核心知识：

模板引擎：

例子：

安装：

浏览器使用：

服务器使用：

步骤：

客户端渲染：

服务端渲染：

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

---

核心知识：

模板引擎：

• 在服务端和客户端都可以用模板引擎
• 模板引擎不关心你的字符串内容，只关心自己能认识的模板标记语法，例如{{}},被称为mustache语法，八字胡

例子：

art-template:

不仅可以在浏览器使用，也可以在node中使用

安装：

npm install art-template

该命令在哪执行就会把包下载到哪里，默认会下载到node_modules目录中，不要修改，也不支持改，改了会出错

 

浏览器使用：

在浏览器中需要引用/lib/template-web.js文件

服务器使用：

在Node中使用 art-template模板引擎，模板引擎最早是诞生于服务端领域，后来才发展到前端

步骤：

1. 安装 npm install art-template
2. 在需要使用的文件模板中加载art-tempalte
   1. 只需要使用require方法加载就可以：require('art-template')
   2. 参数中的art-template就是你下载的包的名字
   3. 也就是说你install的名字是什么，则你require中的就是什么
3. 查文档，使用模板引擎的API

 

客户端渲染：

客户端使用模板引擎（异步）

1. 第一次请求拿到的是页面
2. 第二次请求拿到的是动态数据

步骤：

1. 收到服务器响应的字符串
2. 从上到下一次解析
3. 在解析过程中，如果发现Ajax请求，则再次发起新请求
4. 拿到Ajax响应结果
5. 模板引擎渲染

 

服务端渲染：

服务端使用模板引擎 

1. 对于服务端渲染只请求了一次，响应就是最终结果，客户端不需要再做任何处理

步骤：

1. 服务端读取index.html
2. 模板引起渲染，在发送客户端之前，在服务端就已经把index.html渲染处理了
3. 发送到客户端

 

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

• 客户端渲染不利于SEO搜索引擎优化
• 服务端渲染是可以被爬虫抓取到的，客户端异步渲染是很难被爬虫抓取到的
• 很多网站既不是纯异步也不是纯服务端渲染出来的，而是两者结合
• 例如京东的商品列表就采用的是服务端渲染，目的是为了SEO搜索引擎优化，而它的商品评论列表为了用户体验，而且也不需要SEO优化，所以采用客户端渲染
• 服务端渲染只需要客户端只需要一次请求，客户端渲染需要客户端请求多次