• 服务端渲染和客户端渲染的对比


    这里结合art-template模板引擎说明。

    首先了解下前端页面中如何使用art-template

    1、script 标签导入包,当这个标签导入完毕后,在window全局中就有了template 函数。

    2、创建一个script标签,内部是模板字符串

    <script type="text/template" id="tmpl">

    3、 var htmlStr = template('tmpl',{要渲染的数据对象})

    4、将创建好的HTML字符串,追加到页面中即可

    重点来啦!

    1、服务器端渲染

         每当有客户端请求页面了,服务器先在后端调用art-template,把指定的页面预先在后端渲染后,然后通过res.end把这个渲染完毕的完整页面,

    返回给客户端直接展示。

     优点:对SEO友好,因为我们经过服务器端渲染的页面,在网络中传输的时候,传输的是一个真实的页面。因此,爬虫客户端,当爬到我们的页面后,

    会分系我们给他提供的这个页面,此时,我们页面中的关键数据就会被爬虫给收录了。

    缺点: 服务器端渲染,对服务器压力比较打,可以使用服务器端的页面缓存技术,减轻服务器的渲染压力;不适合前后端分离开发。

    2、客户端渲染

         每当用户要请求某个页面了,

     第一步,用户需要先把这个页面请求到客户端,此时用户拿到的页面只是一个模板页面。

     第二步,浏览器在解析模板页面的时候,会发起art-template的二次资源请求,同时要发送Ajax请求,去服务器获取数据

     第三步,在客户端调用art-template 渲染HTML结构,并把渲染厚的htmlStr append 到页面指定的容器中;

    缺点: 对SEO相当不友好

    优点: 减轻了服务器端的渲染压力;同时,最大的好处就是:能够实现前后端分离开发;

    各自应用的场景:

    1、当不需要对SEO友好的时候,推荐使用客户端渲染;

    2、当需要对 SEO友好的时候,推荐使用服务器端渲染

  • 相关阅读:
    6. svg学习笔记-路径
    5. svg学习笔记-坐标系变换
    4. svg学习笔记-文档结构元素和样式的使用
    2. svg学习笔记-svg中的坐标系统和viewbox
    3. svg学习笔记-基本形状和画笔属性
    多项式:从门都没入到刚迈过门槛
    排列组合与二项式基础
    单调队列入门
    多项式:从什么都不知道到门都没入
    动态规划之四边形不等式优化
  • 原文地址:https://www.cnblogs.com/sunqq/p/8257243.html
Copyright © 2020-2023  润新知