放肆青春的博客
首页
前端
算法
网络
面试
技术
后端
运维
杂项
数据库
工具
网址
电脑
个人
文章
  • 分类
  • 标签
  • 归档
github (opens new window)
gitee (opens new window)

放肆青春

一个前端菜鸟的技术成长之路
首页
前端
算法
网络
面试
技术
后端
运维
杂项
数据库
工具
网址
电脑
个人
文章
  • 分类
  • 标签
  • 归档
github (opens new window)
gitee (opens new window)
  • 前端

    • 前端 概览
    • 前端汇总

    • front 博文

    • front 项目总结

    • front 高级

      • 前端优化
      • 前端工程化
      • 前端模块化
      • 前端监控
      • 数据可视化
      • 前端自动化测试
      • 前端安全
      • 微前端
      • 骨架屏
      • 预渲染
      • 服务器端渲染
        • 服务器端渲染
          • 服务器端渲染优点
          • 不适合场景
          • 同构
          • 服务器端渲染应用
        • 服务器端渲染问题
          • SSR 和 CSR 的区别
      • 浏览器渲染
    • front tools

  • vue

    • vue 概览
    • vue 汇总

    • vue 博文

    • vue 项目总结

    • vue 高级

  • html

    • html 概览
    • html 汇总

    • html 博文

  • css

    • css 概览
    • css 汇总

    • css 博文

    • sass

    • less

  • js

    • javascript 概览
    • JS 汇总

    • ES6

    • JS 博文

    • JS 工具

  • node

    • node 概览
    • node 汇总

    • node 框架

    • node 博文

  • react

    • react 概览
    • react 汇总

    • react 博文

    • react 高级

  • 微信小程序

    • 微信小程序 概览
    • 微信小程序总结
    • 微信小程序文章
    • 微信小程序 博文

    • 微信小程序 高级

  • 微信公众号

    • 微信公众号 概览
    • 微信公众号总结
    • 微信公众号文章
  • 多端开发

    • 多端开发
    • dsbridge 概览
    • jsbridge 概览
    • webview
    • uniapp

      • uniapp 概览
    • taro

      • taro 概览
    • flutter

      • flutter 概览
      • flutter 环境搭建
    • electron

      • electron 概览
  • front
放肆青春
2021-04-07

服务器端渲染

# 服务器端渲染

Server-Side Rendering 我们称其为 SSR,意为服务端渲染

是指在服务端完成页面的 html 拼接处理, 然后再发送给浏览器,将不具有交互能力的 html 结构绑定事件和状态,在客户端展示为具有完整交互能力的应用程序。

# 服务器端渲染优点

  1. 更好的 SEO

优势在于同步。搜索引擎爬虫是不会等待异步请求数据结束后再抓取信息的,如果 SEO 对应用程序至关重要,但你的页面又是异步请求数据,那 SSR 可以帮助你很好的解决这个问题。

  1. 更快的内容到达时间

优势在于慢网络和运行缓慢的设备场景。传统 SPA 需完整的 JS 下载完成才可执行,而 SSR 服务器渲染标记在服务端渲染 html 后即可显示,用户会更快的看到首屏渲染页面。如果首屏渲染时间转化率对应用程序至关重要,那可以使用 SSR 来优化。

# 不适合场景

以下三种场景 SSR 使用需要慎重:

  1. 同构资源的处理

劣势在于程序需要具有通用性。结合 Vue 的钩子来说,能在 SSR 中调用的生命周期只有 beforeCreate 和 created,这就导致在使用三方 API 时必须保证运行不报错。在三方库的引用时需要特殊处理使其支持服务端和客户端都可运行。

  1. 部署构建配置资源的支持

劣势在于运行环境单一。程序需处于 node.js server 运行环境。

  1. 服务器更多的缓存准备

劣势在于高流量场景需采用缓存策略。应用代码需在双端运行解析,cpu 性能消耗更大,负载均衡和多场景缓存处理比 SPA 做更多准备。

# 同构

同构指的就是 SSR(server-side rending 翻译过来就是服务器渲染)的一种,只是它强调服务端跟客户端公用一套代码。服务端去渲染,客户端来负责交互。当然服务端渲染挂了,客户端也是可以渲染的。

# 服务器端渲染应用

  1. React 的(Next.js)

  2. Vue 的(Nuxt.js)

  3. Angular: Nest.js

# 服务器端渲染问题

# SSR 和 CSR 的区别

image


参考:服务端渲染 SSR 及实现原理 (opens new window) 彻底理解服务端渲染 - SSR 原理 (opens new window)

更新时间: 1/25/2022, 8:44:55 PM
预渲染
浏览器渲染

← 预渲染 浏览器渲染→

最近更新
01
前端权限管理
02-24
02
vue2指令
02-24
03
vue2 hook
02-24
更多文章>
Theme by Vdoing | Copyright © 2019-2022 放肆青春
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式