美文网首页
服务端渲染基础

服务端渲染基础

作者: 丽__ | 来源:发表于2022-03-09 14:24 被阅读0次
一、概述
  • SPA 单页面应用优点
    • 用户体验好
    • 开发效率高
    • 渲染性能好
    • 可维护性好
  • SPA单页面应用缺点
    • 首屏渲染时间长
    • 不利于SEO
  • 借鉴了传统的服务端渲染


    image.png
  • 客户端激活为SPA


    image.png
  • 同构应用
    • 通过服务端渲染首屏直出,解决SPA应用首屏渲染慢以及不利于SEO优化的问题
    • 通过客户端渲染接管页面内容交互得到更好的用户体验
    • 这种方式通常称之为现代化的服务端渲染,也叫同构渲染
二、什么是渲染

渲染:把【数据】+【模板】拼接到一起
本质:字符串的解析替换


image.png
三、传统的服务端渲染
image.png
//基于node包,快速创建web服务
npm i express 

// 第三方模板引擎包,可以实现渲染
npm i art-template

四、客户端渲染

image.png

五、为什么客户端首屏渲染慢

  • 因为要加载解析js

六、为什么客户端渲染不利于SEO

  • 因为搜索引擎获取不到页面中的内容 只有index.html

七、同构渲染

客户端渲染 + 服务端渲染 = 同构渲染

  • 基于React、Vue等框架,客户端渲染和服务端渲染的结合
    • 在服务端执行一次,用于实现服务端渲染(首屏直出)
    • 在客户端再执行一次,用于接管页面交互
  • 核心解决SEO和首屏接载慢的问题
  • 拥有传统服务端渲染的优点,也有客户端渲染的优点


    image.png
  • 如何实现同构渲染
    • 使用Vue、React等框架的官方解决方案
      • 优点:有助于激烈原理
      • 缺点:需要搭建环境,比较麻烦
    • 使用第三方解决方案
      • React生态的Next.js
      • Vue生态的Nuxt.js
八、同构渲染的问题
  • 开发条件所限
    • 浏览器特定的代码只能在某些生命周期钩子函数中使用;
    • 一些外部扩展库可能需要特殊处理才能在服务端渲染应用中运行
    • 不能再服务端渲染期间操作DOM
    • 。。。
    • 某些代码操作需要区分巡行环境
  • 涉及构建设置和部署的更多要求


    image.png
  • 更多的服务端负载
    • 在Node中渲染完整的应用程序,相比仅仅提供静态文件的服务器需要占用大量的CPU资源
    • 如果应用在高流量环境下使用,需要准备相应的服务器负载
    • 需要更多的服务端渲染优化工作处理
  • 服务端渲染使用建议
    • 首屏渲染速度是否真的重要
    • 是否真的需要SEO?

相关文章

  • 学习笔记(十九)服务端渲染基础

    服务端渲染基础 服务端渲染概述 随着前端技术发展,涌现了许多优秀的基于客户端渲染CSR的前端框架,例如Angula...

  • 服务端渲染基础

    一、概述 SPA 单页面应用优点用户体验好开发效率高渲染性能好可维护性好 SPA单页面应用缺点首屏渲染时间长不利于...

  • 服务端渲染基础

    什么是渲染 一般而言大家提到“渲染”,可能会说:“凡是从服务器返回的 HTML 页面,均算作是服务端渲染。”这可能...

  • 服务端渲染SSR之UmiJS预渲染

    UmiJS 服务端渲染 本文主要介绍 UmiJS 的预渲染功能。 一、什么是服务端渲染? 服务端渲染(Server...

  • SSR服务端同构渲染

    页面渲染历史 服务端框架模板渲染 -> 客户端渲染 -> 服务端同构渲染(Server Side Render) ...

  • 服务端渲染(SSR)

    导读 本文主要是从三个方面学习服务端渲染,内容整理自多个博客。 服务端渲染是什么?什么是服务端渲染?(服务端渲染的...

  • express-路由

    express1、基础结构2、中间件3、数据4、cookie、session5、路由6、渲染 渲染(服务端/客户端...

  • vuex基础用法

    简单汇总一下vuex的最基础的用法 服务端渲染的写法(推荐使用)

  • 服务端渲染与客户端渲染

    服务端渲染与客户端渲染 服务端渲染说白了,就是在服务端使用模板引擎末班引擎最早诞生于服务端,后来才到了前端 服务端...

  • Vue SSR 服务端渲染

    服务端渲染的基本模型 所谓服务端渲染, 其实一直都有, java, python, php 都有渲染模板来做服务端...

网友评论

      本文标题:服务端渲染基础

      本文链接:https://www.haomeiwen.com/subject/nkbarrtx.html