服务端渲染基础

一、概述

• 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？