H5W3
当前位置:H5W3 > JavaScript > 正文

【JS】SSR服务端渲染

SSR服务端渲染

逡橙发布于 今天 04:07

SSR简介

SSR 是Server Side Render简称;就是在服务端进行渲染生成HTML文件,浏览器世界显示生成HTML文件, 补充:我们传统使用的属于CSR是Client Side Render,页面上的内容是我们加载的js文件渲染出来的,文件运行在浏览器上面。
SSR优点

  • 可以很好解决首页需要加载js和CSS导致页面加载缓慢问题(最头疼),SSR直接将HTML字符串传递给浏览器,加快了首屏加载时间。
  • 优化SEO,SSR生成的HTML是有内容的,这让搜索引擎能够索引到页面内容。
  • 服务端渲染不用关心浏览器兼容性问题,运算过程都在服务端完成,避免浏览器兼容同时也能减少客户端的电量消耗(省电)

SSR缺点

  • 由于运算都在服务器完成,所以就需要服务能承受的负载更高。
  • 增加开发的复杂程度,构建和部署。

React和Vue服务端渲染

Vue 可使用Unxt.js

Nuxt.js是特点(优点):

  • 基于 Vue.js
  • 自动代码分层
  • 服务端渲染
  • 强大的路由功能,支持异步数据
  • 静态文件服务
  • ES6/ES7 语法支持
  • 打包和压缩 JS 和 CSS
  • HTML头部标签管理
  • 本地开发支持热加载
  • 集成ESLint
  • 支持各种样式预处理器: SASS、LESS、 Stylus等等
React 可使用Next.js

Next.js 具有同类框架中最佳的“开发人员体验”和许多内置功能。列举其中一些如下:
Next.js是特点(优点):

  • 直观的、 基于页面 的路由系统(并支持 动态路由)
  • 预渲染。支持在页面级的 静态生成 (SSG) 和 服务器端渲染 (SSR)
  • 自动代码拆分,提升页面加载速度
  • 具有经过优化的预取功能的 客户端路由
  • 内置 CSS 和 Sass 的支持,并支持任何 CSS-in-JS 库
  • 开发环境支持 快速刷新
  • 利用 Serverless Functions 及 API 路由 构建 API 功能
  • 完全可扩展
javascriptsasstypescriptreact.jsvue.js
阅读 26发布于 今天 04:07
本作品系原创,采用《署名-非商业性使用-禁止演绎 4.0 国际》许可协议
avatar

逡橙
18 声望
92 粉丝

0 条评论
得票时间

avatar

逡橙
18 声望
92 粉丝

宣传栏

SSR简介

SSR 是Server Side Render简称;就是在服务端进行渲染生成HTML文件,浏览器世界显示生成HTML文件, 补充:我们传统使用的属于CSR是Client Side Render,页面上的内容是我们加载的js文件渲染出来的,文件运行在浏览器上面。
SSR优点

  • 可以很好解决首页需要加载js和CSS导致页面加载缓慢问题(最头疼),SSR直接将HTML字符串传递给浏览器,加快了首屏加载时间。
  • 优化SEO,SSR生成的HTML是有内容的,这让搜索引擎能够索引到页面内容。
  • 服务端渲染不用关心浏览器兼容性问题,运算过程都在服务端完成,避免浏览器兼容同时也能减少客户端的电量消耗(省电)

SSR缺点

  • 由于运算都在服务器完成,所以就需要服务能承受的负载更高。
  • 增加开发的复杂程度,构建和部署。

React和Vue服务端渲染

Vue 可使用Unxt.js

Nuxt.js是特点(优点):

  • 基于 Vue.js
  • 自动代码分层
  • 服务端渲染
  • 强大的路由功能,支持异步数据
  • 静态文件服务
  • ES6/ES7 语法支持
  • 打包和压缩 JS 和 CSS
  • HTML头部标签管理
  • 本地开发支持热加载
  • 集成ESLint
  • 支持各种样式预处理器: SASS、LESS、 Stylus等等
React 可使用Next.js

Next.js 具有同类框架中最佳的“开发人员体验”和许多内置功能。列举其中一些如下:
Next.js是特点(优点):

  • 直观的、 基于页面 的路由系统(并支持 动态路由)
  • 预渲染。支持在页面级的 静态生成 (SSG) 和 服务器端渲染 (SSR)
  • 自动代码拆分,提升页面加载速度
  • 具有经过优化的预取功能的 客户端路由
  • 内置 CSS 和 Sass 的支持,并支持任何 CSS-in-JS 库
  • 开发环境支持 快速刷新
  • 利用 Serverless Functions 及 API 路由 构建 API 功能
  • 完全可扩展

本文地址:H5W3 » 【JS】SSR服务端渲染

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址