服务端渲染、客户端渲染、同构渲染相关简介

最新推荐文章于 2024-06-25 14:56:43 发布
最新推荐文章于 2024-06-25 14:56:43 发布
阅读量267 收藏
点赞数
分类专栏： 开发知识 文章标签： 服务端渲染 客户端渲染 同构渲染
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuliuliuliumin123/article/details/109180483
版权
本文介绍了渲染的基本概念，包括服务端渲染的早期应用和缺点，如前后端代码耦合、服务器压力大和用户体验一般。客户端渲染通过AJAX提供了更好的用户体验和开发效率，但面临首屏加载慢和SEO问题。为了解决这些问题，文章引入了同构渲染，即结合服务端和客户端渲染的优势，用于提升SEO和首屏速度。同构渲染的实现包括官方和第三方解决方案，如React的Next.js和Vue的Nuxt.js。
摘要由CSDN通过智能技术生成
什么是渲染

把【数据】+【模板】拼接到一起

传统的服务端渲染

最早的web页面渲染都是在服务端进行的，也就是服务端在运行过程中将数据+模块拼接到一起，然后返回html给客户端，客户端直接展示就行。
流程图如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BxZgsfED-1603175445987)(C30D9D9C256D45E5980FE3EA2F6862E9)]

服务端渲染的缺点：

  • 前后端代码完全耦合在一块，不利于开发和维护
  • 前端没有足够的发挥空间
  • 服务端压力大
  • 用户体验一般，用户需要刷新才能重新获取数据
客户端渲染

因为服务器渲染存在上述问题，且伴随着ajax的产生，使得我们可以动态获取数据。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Va4MlNzx-1603175446016)(3016097347514D1195B4EE1A0D15F240)]
我们现在常见的SPA单页面如Vue\React采用的都是客户端渲染。
客户端渲染优点：

  • 用户体验好
  • 开发效率高
  • 渲染性能好
  • 可维护性好
最低0.47元/天 解锁文章
黑山老妖橙
关注
专栏目录
详解react服务端渲染（同构）的方法
08-29
React服务端渲染（SSR, Server-Side Rendering）与同构渲染（Isomorphic Rendering）是提升React应用性能和SEO优化的重要技术。同构渲染是指在客户端和服务器端都能执行的JavaScript代码，使得初次加载页面时就能...
同构渲染（客户端渲染 + 服务端渲染）
qq_24719349的博客
12-03 1050
> 什么是同构渲染 1.基于React、Vue等框架，客户端渲染和服务器端渲染的结合 .在服务端执行一次，用于实现服务器渲染（首屏直出） .在客户端执行一次，用于接管页面交互 2.核心解决了SEO和首屏渲染慢的问题 3.拥有传统服务端渲染的优点，也有客户端渲染的优点 同构渲染的流程 1.客户端请求一个地址走到服务端； 2.服务端通过接口服务查询页面所需数据，并返回到服务端； 3.服务端渲染页面以及生成客户端SPA脚本； 4.返回渲染好的页面内容和客户端的SPA脚本给客户端，也就是html； 5.
Vuejs设计与实现 —— 同构渲染
weixin_43822185的博客
10-16 191
Vuejs设计与实现 —— 同构渲染
前端页面秒开的关键 - 小白也能看懂的同构渲染原理和实现
最新发布
2401_83384536的博客
06-25 1048
以现在前端流行的react和vue框架为例。react中的jsx和vue里面的模板，都是是无法直接在浏览器运行的。将它们转换成可在浏览器中运行的html，这个过程被称为渲染。CSR是现在前端开发者最熟悉的渲染方式。利用vue-cli或create-react-app创建一个应用，不作任何额外配置直接打包的出来代码就是CSR。你可以用如下的方法辨别一个web页面是否是CSR：打开chrome控制台 - 网络面板，查看第一条请求，就能看到当前页面向服务器请求的html资源；
同构/通用渲染是什么
m0_57236802的博客
12-17 406
同构渲染（也称为通用渲染）是一种现代web开发技术，它结合了服务器端渲染（SSR）和客户端渲染（CSR）的优点。在同构渲染中，首次页面加载时的HTML是在服务器上生成的，然后在客户端上通过JavaScript增强，提供动态的交互性。这种方法旨在提高应用程序的性能和搜索引擎优化（SEO），同时保持丰富的用户体验。
Angular开发实践之服务端渲染
08-27
**Angular 开发实践之服务端渲染** Angular 服务端渲染（Server-Side Rendering, SSR）是一种技术，允许在服务器上生成 Angular 应用的静态页面，以提高性能、SEO 和用户体验。这一技术的核心是 Angular Universal...
详解React服务端渲染从入门到精通
10-17
这种方式结合了服务端渲染的快速加载和客户端渲染的交互优势。 在实现React服务端渲染时，需要用到的技术栈包括React V16、React-Router v4、Redux和Redux-thunk，以及服务器框架如express。React V16是React库的...
vue服务端渲染添加缓存的方法
10-18
在Vue服务端渲染中，缓存通常可以分为三种类型：页面缓存、组件缓存和接口缓存。 页面缓存主要指的是将生成的页面内容缓存起来，在一定的条件下，当用户再次请求相同的页面时，服务器可以直接从缓存中取出页面内容...
react-react服务端渲染同构框架
08-15
"react-koa-mobx-server-side-render-master"这个压缩包可能包含了一个使用React、Koa和MobX实现的服务端渲染同构框架的示例项目。 首先，让我们深入了解React服务端渲染的工作原理。传统的客户端渲染模式中，...
CSR、SSR与同构渲染全方位解析
Allen-
04-26 1667
现代Web应用的核心渲染方式——客户端渲染（CSR）、服务器端渲染（SSR）以及同构渲染。接下来我们将通过对比它们的原理、应用场景、优缺点及实际案例，深入了解如何根据项目需求选择合适的渲染策略。
Vue3 + ts 开发一个ProTable
郊眠寺
08-19 768
是一个构建客户端应用的框架，组件的代码会在浏览器中运行，然后向页面输出元素，也就是我们最常用的方式，即.实际上还可以在环境中运行，即可将相同组件渲染成相应的字符串，并发送给浏览器进行渲染，这就是.作为现代前端框架，除了能够分别支持或渲染之外，还能够同时支持和，这就是所谓的.
Vue：CSR（客户端渲染）、SSR（服务端渲染）、同构渲染
前端御书房
11-12 1091
CSR（客户端渲染） 是在浏览器中完成模板与数据的融合，并渲染出最终的 HTML 页面。
web前端网络知识体系梳理之二：客户端渲染全流程以及常见性能优化
qq_44752117的博客
09-08 333
web前端网络知识体系梳理 写在前面： （1）写作目的 本篇文章作为一项长期的写作计划进行，主要用于将笔者学习到的零散的web网络知识进行梳理和整合。 （2）知识来源 图解TCP/TP 图解HTTP 优秀的web前端网络文章 你将会了解到： ...
SSR 学习 - 传统服务端渲染 Web 应用、客户端渲染、同构渲染、优缺点和案例演示
皮蛋很白的博客
03-29 1669
概述 随着前端技术栈和工具链的迭代成熟，前端工程化、模块化也已成为了当下的主流技术方案。 在这波前端技术浪潮中，涌现了诸如 React、Vue、Angular 等基于客户端渲染的前端框架。 这类框架所构建的 **单页应用（SPA）**的优点： 用户体验好 开发效率高 渲染性能好 可维护性好 … **单页应用（SPA）**也有一些很大的缺陷，其中主要涉及到以下两点： 首屏渲染时间过长 与传统服务端渲染直接获取服务端渲染好的 HTML 不同 单页应用使用 JavaScript 在客户端生成 HTML 来
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值