目录
核心知识:
模板引擎:
- 在服务端和客户端都可以用模板引擎
- 模板引擎不关心你的字符串内容,只关心自己能认识的模板标记语法,例如{{}},被称为mustache语法,八字胡
例子:
art-template:
不仅可以在浏览器使用,也可以在node中使用
安装:
npm install art-template
该命令在哪执行就会把包下载到哪里,默认会下载到node_modules目录中,不要修改,也不支持改,改了会出错
浏览器使用:
在浏览器中需要引用/lib/template-web.js文件
服务器使用:
在Node中使用 art-template模板引擎,模板引擎最早是诞生于服务端领域,后来才发展到前端
步骤:
- 安装 npm install art-template
- 在需要使用的文件模板中加载art-tempalte
- 只需要使用require方法加载就可以:require('art-template')
- 参数中的art-template就是你下载的包的名字
- 也就是说你install的名字是什么,则你require中的就是什么
- 查文档,使用模板引擎的API
客户端渲染:
客户端使用模板引擎(异步)
- 第一次请求拿到的是页面
- 第二次请求拿到的是动态数据
步骤:
- 收到服务器响应的字符串
- 从上到下一次解析
- 在解析过程中,如果发现Ajax请求,则再次发起新请求
- 拿到Ajax响应结果
- 模板引擎渲染
服务端渲染:
服务端使用模板引擎
- 对于服务端渲染只请求了一次,响应就是最终结果,客户端不需要再做任何处理
步骤:
- 服务端读取index.html
- 模板引起渲染,在发送客户端之前,在服务端就已经把index.html渲染处理了
- 发送到客户端
服务端渲染和客户端渲染的区别
- 客户端渲染不利于SEO搜索引擎优化
- 服务端渲染是可以被爬虫抓取到的,客户端异步渲染是很难被爬虫抓取到的
- 很多网站既不是纯异步也不是纯服务端渲染出来的,而是两者结合
- 例如京东的商品列表就采用的是服务端渲染,目的是为了SEO搜索引擎优化,而它的商品评论列表为了用户体验,而且也不需要SEO优化,所以采用客户端渲染
- 服务端渲染只需要客户端只需要一次请求,客户端渲染需要客户端请求多次