美文网首页前端之路
SSR 服务端渲染

SSR 服务端渲染

作者: KenChen_939 | 来源:发表于2020-11-24 09:50 被阅读0次

什么是浏览器端渲染(CSR)?

浏览器端渲染是后端提供数据,前端做视图和交互逻辑。页面初始加载的HTML种无内容,需要下载执行JS文件,由浏览器动态生成页面,并通过JS进行页面交互与状态管理。

什么是服务端渲染(SSR)?

页面内容由服务端渲染生成,并返回HTML给浏览器,浏览器只需解析HTML即可。

为什么会出现SSR?

1.解决SEO

(SEO,搜索引擎优化。简单来说就是要让搜索引擎收录你的网页,并让排名靠前一点)
前端项目需要页面加载完成后再去拉取数据进行渲染,大部分搜索引擎或者爬虫无法读取页面内容,特别是SPA项目,每个路由页面更是难以读取。

2.首屏渲染速度

正常情况下要先加载JS,再通过JS取加载数据。所以难以避免出现首屏白屏。
首屏渲染时间对比:

  • SSR:请求发送时间+服务端渲染时间+页面返回时间
  • CSR:请求发送时间+页面返回时间+JS加载时间

缺点

  • 服务器性能
    如果用户规模比较大,SPA本身是一个大型的分布式系统,充分利用用户的设备去运行JS,SSR则是把这些工作包揽到自己到服务器上。所以对需要大量计算且用户量巨大对页面,并不适合。但是SSR特别适合大部分对内容展示页面
  • 开发难度增大
    虽然现在Vue、React都推出了相应都SSR解决方案,但是项目复杂度增加。

SSR框架:

vue:Nuxt.js
React: Next.js

相关文章

  • vue 服务端渲染简介和实践

    什么是 ssr ssr , Server Side Render的简称, 服务端渲染. 首先服务端渲染并不神秘, ...

  • vuessr

    vueSSR 什么是ssr 服务端渲染(ssr),相比客户端渲染,服务端返回的dom一般为 ,剩下的渲染过程都是...

  • 07 Vue 服务端渲染 SSR

    07服务端渲染SSR 理解 SSR 传统 web 开发 传统 web 开发,网页内容在服务端渲染完成,一次性传输到...

  • 搭建Vue的SSR服务端渲染

    SSR是什么 SSR:Server Side Rendering服务端渲染,由服务器进行渲染并返回给客户端渲染完成...

  • 本期小结(二)

    vue★ vue-ssr服务端渲染简单例子 vue-ssr服务端渲染框架Nuxt.js vue2.0仿饿了么web...

  • SPA与SSR融合

    服务端渲染demo思路 SPA与SSR融合

  • 前端福音:Serverless 和 SSR 的天作之合

    什么是 SSR SSR 顾名思义就是 Server-Side Render, 即服务端渲染。原理很简单,就是服务端...

  • Next.js 初试

    title: next.js入门tag:next.js, react 序章 服务端渲染 服务端渲染(SSR: Se...

  • 从壹开始前后端分离 [ Vue2.0+.NetCore2.1]

    前言 书接上文,昨天简单的说到了 SSR 服务端渲染的相关内容《二十五║初探SSR服务端渲染》,主要说明了相关概念...

  • SSR服务端渲染

    什么是SSR?,SSR有什么用? 服务端渲染(Server Side Render,简称“SSR”),服务器端直接...

网友评论

    本文标题:SSR 服务端渲染

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