SSR服务端渲染

最新推荐文章于 2024-05-17 11:26:42 发布
最新推荐文章于 2024-05-17 11:26:42 发布
阅读量683 收藏 3
点赞数 1
分类专栏： 业余前端 文章标签： 前端 javascript 服务器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/suningOne/article/details/127049407
版权

一：首先了解一下什么浏览器是如何渲染的

在这里插入图片描述

  • 用户在浏览器输入网址，浏览器请求服务端得到相应的HTML文件
  • 浏览器拿到HTML文件开始从上到下解析生产DOM树和Style树
  • 如果遇到JS，会再次请求服务器获取JS文件，执行JS文件，如果JS修改了DOM结构，则会重新生成DOM树
  • 当DOM树和Style树生成完成后合成Render树
  • 渲染进程开始渲染Render树生成Layout树再进行绘制最后合成帧
  • 浏览器通过GPU合成最后的页面

二：前后端未分离浏览器工作流程

在这里插入图片描述

  • 在前后端未分离的情况下，后端一般返回完整的的HTML+DATA
  • 浏览器直接渲染即可

三. CSR客户端渲染

在这里插入图片描述

  • 用户使用浏览器，浏览器首先请求前端服务器获取纯HTML（Vue/React）
  • 浏览器渲染HTML，发现需要获取JS，请求后端服务器接口
  • 后端服务器返回数据，浏览器继续渲染
  • 这里JS渲染的过程在浏览器完成称之为CSR，客户端渲染。

四.SSR服务端渲染

在这里插入图片描述

  • 和CSR不同的是，SSR是通过前端服务器完成了所有的JS渲染工作
  • 通过前端服务器返回完整的HTML和DATA
  • 浏览器只需要渲染成图像即可
  • 这种方式即为SSR，服务端渲染
瞎玩儿~
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
Vue 服务器端渲染 SSR
weixin_37722222的博客
09-24 184
引言 最近笔者和小伙伴在研究Vue SSR，但是市面上充斥了太多的从0到1的文章，对大家理解这其中的原理帮助并不是很大，因此，本文将从Vue SSR的构建流程、运行流程、SSR的特点和利弊这几方面对Vue SSR有一个较为详细的介绍。最后还将附上一个笔者实现的去除Vue全家桶的Demo案例。 剖析构建流程 首先我们镇上一张官网给出的构建图： Vue SSR构建流程 app.js入口文...
SSR 服务端渲染概述
有趣的小良的博客
06-25 1656
服务端渲染简称 SSR，全称是 Server Side Render，是指一种传统的渲染方式，就是在浏览器请求页面 URL 的时候，服务端将我们需要的 HTML 文本组装好，并返回给浏览器，这个 HTML 文本被浏览器解析之后，不需要经过 JavaScript 脚本的执行，即可直接构建出希望的 DOM 树并展示到页面中。以上就是对 SSR 技术的一些简要介绍，总结一下就是：SSR 提高 SPA 应用的首屏响应速度，有利于 SEO 优化。SSR 最适用于静态展示页面，如果页面动态数据较多时需要谨慎使用。
SSR 服务端渲染
nihaio25的博客
06-08 6928
闲来无事，研究一下SSR，主要原因在于上周一位后端同学在一次组内技术分享的时候说，对前后端分离、服务端渲染特别感兴趣，在他分享了后端微服务之后，专门点名邀请我下周分享服务端渲染，然后我还没同意，领导就内定让我下周分享了（其实就是下周愿意下周分享，我是那个替死鬼）。本人主要从个人角度介绍了对服务端渲染的理解，读完本文后，你将了解到：在讲服务度渲染之前，我们先回顾一下页面的渲染流程：在没有AJAX的时候，也就是web1.0时代，几乎所有应用都是服务端渲染（此时服务器渲染非现在的服务器渲染），那个时候的页面渲染大
服务器端渲染（SSR）
最新发布
qq_41217879的博客
05-17 1037
在Web前端开发中，SSR通常指的是服务器端渲染（Server-Side Rendering）。这是一种构建Web应用程序的方法，页面的HTML内容在服务器端生成，然后发送到客户端（浏览器）。与客户端渲染（Client-Side Rendering, CSR）相比，SSR具有一些独特的优势和挑战。
带你秒懂 SSR-服务端渲染
yan的秘密基地
09-18 3529
首先回顾一下页面的渲染其实就是浏览器将HTML文本转化为页面帧的过程。而如今我们大部分WEB应用都是使用 JavaScript 框架（Vue、React、Angular）进行页面渲染的，也就是说，在执行 JavaScript 脚本的时候，HTML页面已经开始解析并且构建DOM树了，JavaScript 脚本只是动态的改变 DOM 树的结构，使得页面成为希望成为的样子，这种渲染方式叫动态渲染，也可以叫（CSR）。
手把手教你实现React SSR服务端渲染【含demo实现】
daisyboom的博客
10-16 2990
渲染模式其实远不止以上几种，很多场景下都可以进行相应的优化。以下是一些我能想到的场景：在录入或更新数据时通过WebHook等通知构建系统进行增量构建，算是ISR的一种变种在SSR场景下可以对静态组件和动态组件进行区分，将静态组件使用SSG输出，然后将其拼接到页面中。所以没有最好的只有最适合的，按需选择最适合自己需求的渲染模式即可。
实现ssr服务端渲染的方法步骤
12-04
SSR（服务端渲染，Server-Side Rendering）是一种前端开发技术，它允许应用程序在服务器端生成HTML，然后将其发送到客户端，从而提高了初次加载的速度和SEO优化。在SSR模式下，用户请求页面时，服务器会根据路由动态...
vuecli项目构建SSR服务端渲染的实现
01-22
服务端渲染（SSR） 将一个 Vue 组件在服务端渲染成 HTML 字符串并发送到浏览器，最后将这些静态标记“激活”为可交互应用程序的过程就叫服务端渲染（SSR） 服务器渲染的 Vue.js 应用程序也可以被认为是”同构”或”...
vue ssr服务端渲染(小白解惑)
12-13
初学vue服务端渲染疑惑非常多，我们大部分前端都是半路出家，上手都是前后端分离，对服务端并不了解，不说java、php语言了，连node服务都还没搞明白，理解服务端渲染还是有些困难的； 网上有非常多的vue服务渲染的...
VUE基于NUXT的SSR 服务端渲染
10-17
主要介绍了VUE基于NUXT的SSR 服务端渲染，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
前端为什么要使用SSR服务器渲染
weixin_45345234的博客
10-20 155
服务器上提前将HTML渲染完成，并将内容发送到客户端显示，减少了渲染过程中的网络请求等，可以大大缩短页面的加载时间，提高用户体验。尤其是对于低网络速度和低设备的用户，服务端渲染可以极大的改善页面渲染的速度。此外，通过SSR，我们可以避免在客户端产生闪烁问题。客户端渲染，由于需要等待js加载和执行，用户初始化可能会看到空白页或者框架。而在SSR中，服务端已经提前渲染完成，这种闪烁问题就得到很好的解决。
服务器端渲染 (SSR)
奔跑的小猪仔
08-09 8848
什么是服务器端渲染 (SSR)？ 客户端渲染：使用 JavaScript 框架进行页面渲染 服务端渲染：服务端将HTML文本组装好，并返回给浏览器，这个HTML文本被浏览器解析之后，不需要经过 JavaScript 脚本的执行，即可直接构建出希望的 DOM 树并展示到页面中，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。 为什么使用服务器端渲染 (SSR)？ 优点： 更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。对客户端渲染的页面来说，简直无能为力，因为返回的HTML是一个
vue之服务端渲染(SSR)
青蛙king的博客
01-06 2833
因为大多数的自定义指令都包含了对 DOM 的直接操作，所以它们会在 SSR 时被忽略。// 客户端实现：// 直接更新 DOM},// 服务端实现：// 返回需要渲染的 prop// getSSRProps 只接收一个 binding 参数return {
详解服务器端渲染 页面(SSR)
共同进步
06-26 1210
详解服务器端渲染 页面(SSR) 服务端(SSR)：就是服务器端生成完整的 HTML 页面，然后再将其发送到客户端，客户端收到的是已经包含了内容的完整页面。客户端：使用 HTML+ CSS + js 浏览器解析页面渲染。前端拿到后端返回的数据可以直接渲染到页面了。1.首先新建serverSsr文件夹。如果有不会的同学 可以去官网阅读。4.创建一个index.js入口。2.生成一个node.js项目。如果对你有所帮助还请。
Vue项目使用SSR服务器渲染
Niall_Tonshall的博客
03-04 5326
注意：这是笔者用于记录自己学习SSR的一篇文章，用于梳理将一个项目进行服务器渲染的过程，本文仅是读者根据demo得出的理解，如果您想通过本文来学习如何部署ssr，笔者建议您查阅其他更权威的资料进行学习；当然，如果您发现了本文中有任何描述不恰当的地方，还恳请您指出更正。 ...
前端页面渲染的几种方式（CSR/SSG/SSR）
weixin_42538281的博客
02-10 9293
一文让你读懂常用的三种页面渲染方式
一文搞懂前端渲染技术：什么是SSR、SSG、CSR？
xuxian的博客
05-15 1323
CSR、SSR和SSG各有优缺点，适用于不同的场景和需求。在选择使用哪种技术时，需要根据项目的具体需求来权衡利弊。例如，对于需要丰富交互效果和实时数据的场景，可以选择CSR；对于需要优化首屏加载速度和SEO效果的场景，可以选择SSR；而对于内容更新不频繁、对性能要求高的场景，可以选择SSG。同时，也可以结合使用多种技术来实现更好的用户体验和性能优化。前端的世界总是在不断变化，作为开发者，我们需要保持好奇心和学习热情，不断探索新的技术，只有这样，我们才能在这个快速发展的时代中立于不败之地。
深入学习Vue SSR服务端渲染 用Nuxt.js打造CNode社区
08-23
总结来说，通过深入学习Vue SSR服务端渲染，借助Nuxt.js框架，我们可以有效地打造CNode社区的SSR应用，提升用户体验和搜索引擎的收录，从而更好地为用户提供技术交流和资源分享的平台。 ### 回答3： Vue SSR...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

瞎玩儿~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值