博客
关于我
Node.js---客户端渲染和服务端渲染
阅读量:129 次
发布时间:2019-02-26

本文共 931 字,大约阅读时间需要 3 分钟。

目录


核心知识:

模板引擎:

  • 在服务端和客户端都可以用模板引擎
  • 模板引擎不关心你的字符串内容,只关心自己能认识的模板标记语法,例如{ {}},被称为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优化,所以采用客户端渲染
  • 服务端渲染只需要客户端只需要一次请求,客户端渲染需要客户端请求多次

 

 

转载地址:http://pltf.baihongyu.com/

你可能感兴趣的文章
NIFI大数据进阶_离线同步MySql数据到HDFS_01_实际操作---大数据之Nifi工作笔记0029
查看>>
NIFI大数据进阶_离线同步MySql数据到HDFS_02_实际操作_splitjson处理器_puthdfs处理器_querydatabasetable处理器---大数据之Nifi工作笔记0030
查看>>
NIFI大数据进阶_离线同步MySql数据到HDFS_说明操作步骤---大数据之Nifi工作笔记0028
查看>>
NIFI大数据进阶_连接与关系_设置数据流负载均衡_设置背压_设置展现弯曲_介绍以及实际操作---大数据之Nifi工作笔记0027
查看>>
NIFI数据库同步_多表_特定表同时同步_实际操作_MySqlToMysql_可推广到其他数据库_Postgresql_Hbase_SqlServer等----大数据之Nifi工作笔记0053
查看>>
NIFI汉化_替换logo_二次开发_Idea编译NIFI最新源码_详细过程记录_全解析_Maven编译NIFI避坑指南001---大数据之Nifi工作笔记0068
查看>>
NIFI汉化_替换logo_二次开发_Idea编译NIFI最新源码_详细过程记录_全解析_Maven编译NIFI避坑指南002---大数据之Nifi工作笔记0069
查看>>
NIFI集群_内存溢出_CPU占用100%修复_GC overhead limit exceeded_NIFI: out of memory error ---大数据之Nifi工作笔记0017
查看>>
NIFI集群_队列Queue中数据无法清空_清除队列数据报错_无法删除queue_解决_集群中机器交替重启删除---大数据之Nifi工作笔记0061
查看>>
NIH发布包含10600张CT图像数据库 为AI算法测试铺路
查看>>
Nim教程【十二】
查看>>
Nim游戏
查看>>
NIO ByteBuffer实现原理
查看>>
Nio ByteBuffer组件读写指针切换原理与常用方法
查看>>
NIO Selector实现原理
查看>>
nio 中channel和buffer的基本使用
查看>>
NIO_通道之间传输数据
查看>>
NIO三大组件基础知识
查看>>
NIO与零拷贝和AIO
查看>>
NIO同步网络编程
查看>>