客户端渲染

最新推荐文章于 2024-06-17 09:18:10 发布
最新推荐文章于 2024-06-17 09:18:10 发布
阅读量309 收藏
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44713446/article/details/90180314
本文探讨了客户端渲染(BSR)与服务器端渲染(SSR)两种网页渲染技术的优劣。BSR能减轻服务器压力，实现动态数据展示；而SSR则减少网络请求，提升初次加载速度。两者各有千秋，适用于不同场景。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

BSR（csr）客户端渲染 浏览器端渲染

browser side render
client side render
通过api调用获取服务器端的数据，在客户端浏览器中进行展示（html标签拼接）
所有数据的拼接处理都是在客户端进行完成的，服务器端只负责数据的输出

优劣

  1. 可以减少服务器的压力，把页面渲染部分的操作放到用户设备上完成
  2. 可以根据数据在不同终端机上使用不同的展示形式
  3. 存在数据安全问题
在html里边拼接 只获取那些不同的数据 json数据 然后拼接
![客户端渲染](https://img-blog.csdnimg.cn/20190513195558362.png)

SSR服务器端渲染

server side render
所有页面组织都是在服务器端完成的，组装好代码之后以完整的页面形式返回

优劣：

  1. 减少网络请求次数，所有操作在服务器端一次完成
  2. 服务器渲染压力会比较大

npm环境配置
在这里插入图片描述

uup-ndd
关注
Node.js | express 获取请求参数 | 客户端渲染 | 服务端渲染
前端之行，任重道远！
10-18 8771
前面我们已经讲过express的路由和中间件，这一节我们将去介绍使用express时怎么获取请求的参数，以及客户端渲染和服务端渲染的区别与作用，让我们开始吧！博主的Node.js从入门到精通专栏正在持续更新中，关注博主订阅专栏学习Node不迷路！❤️
JS面试题17-比较一下服务端渲染与客户端渲染
itclanCoder
03-12 598
服务端渲染服务端渲染（Server-Side Rendering，SSR）是指在服务器端生成完整的HTML页面并将其返回给浏览器，与传统的客户端渲染方式相反。在传统的客户端渲染中，浏览器首先接收到一个空的HTML页面，在页面加载期间，浏览器使用JavaScript来动态生成页面内容。而在服务端渲染中，服务器端负责构建整个HTML页面，包括将数据和组件渲染为HTML，然后将整个HTML页面返回给浏览...
关于服务器端渲染跟客户端渲染的描述，以及他们两个的区别
11-08
关于服务器端渲染跟客户端渲染的描述，以及他们两个的区别
客户端渲染（CSR）
csD_Dscnnnnnnn的博客
03-10 1104
客户端渲染（CSR）
服务器端渲染和客户端渲染
CodeDarkHorse的博客
10-23 415
早期，用户使用浏览器浏览的都是一些没有复杂逻辑的、简单的页面，这些页 面都是在后端将html拼接好的然后将之返回给前端完整的html文件，浏览器 拿到这个html文件之后就可以直接解析展示了，而这也就是所谓的服务器端 渲染了。
客户端渲染和服务端渲染
云中自有锦书
08-21 826
参考链接：客户端渲染和服务端渲染的区别https://blog.youkuaiyun.com/qq_40885461/article/details/88539989 浅谈服务端渲染(SSR)https://www.jianshu.com/p/10b6074d772c 客户端渲染 在服务端Server放了一个HTML页面，客户端发送请求，服务端将页面给客户端，客户端在...
web前端网络知识体系梳理之二：客户端渲染全流程以及常见性能优化
qq_44752117的博客
09-08 393
web前端网络知识体系梳理 写在前面： （1）写作目的 本篇文章作为一项长期的写作计划进行，主要用于将笔者学习到的零散的web网络知识进行梳理和整合。 （2）知识来源 图解TCP/TP 图解HTTP 优秀的web前端网络文章 你将会了解到： ...
egg-vue-webpack-boilerplate：Egg Vue服务器端渲染（SSR）客户端渲染（CSR）
02-06
基于Egg + Vue + Webpack SSR服务端渲染和CSR前端渲染工程框架项目，包括前台系统（SSR MPA）和后台管理系统（SSR SPA）。 文件 系统功能 前台博客系统 采用Egg + Vue服务端渲染 博客首页 文章列表 文章详情 后台...
深入解析SSR与客户端渲染：现代Web应用的渲染策略
08-25
随着Web应用的快速发展，服务器端渲染（SSR）和客户端渲染成为了两种主要的页面渲染方式。它们各自有着不同的优势和适用场景。本文将详细探讨SSR和客户端渲染的区别、原理、优缺点以及实际应用案例。通过代码示例，...
什么是客户端渲染？
xiaoxijinger的博客
08-30 1029
什么是客户端渲染? 客户端渲染，即传统的单页面应用(SPA)模式，Vue.js 构建的应用程序默认情况下是-个HTML模板页面，只有一个id为app的根容器，然后通过webpack打包生成CSs、js等资源文件，浏览器加载、解析来渲染HTML。 在客户端渲染时，一般使用的是webpack-dev-server插件，它可以帮助用户自动开启一个服务器端，主要作用是监控代码并打包，也可以配合webpack-hot-middleware来进行热更替(HMR),这样能提高开发效率。 注意： webpack-dev-
什么是客户端渲染?
qinge_Crazy的博客
08-27 312
　　什么是客户端渲染? 　　客户端渲染，即传统的单页面应用(SPA)模式，Vue.js 构建的应用程序默认情况下是-个HTML模板页面，只有一个id为app的根容器，然后通过webpack打包生成CSs、js等资源文件，浏览器加载、解析来渲染HTML。 　　在客户端渲染时，一般使用的是webpack-dev-server插件，它可以帮助用户自动开启一个服务器端，主要作用是监控代码并打包，也可以配合webpack-hot-middleware来进行热更替(HMR),这样能提高开发效率。 　　注意： ..
客户端渲染与服务端渲染
qq_45830543的博客
02-01 300
首先什么是服务端渲染？ 我们先用 node 启动一个 express 服务。 当启动这个服务后，我们打开 localhost:3000 可以看到页面已经显示出来hello world，而且我们可以打开页面的源代码，可以发现页面的源码也可以看到。 这个就是 服务端渲染，其实就是 服务端使用模板引擎返回一堆html字符串，然后让浏览器直接渲染。 服务端只请求一次。 模板引擎最早适用于服务端，后来才发展到了前端。 什么是客户端渲染？ 在服务端放了一个html 页面，里面有<script>//发
服务端渲染or客户端渲染
weixin_51670675的博客
04-27 3139
服务端渲染与客户端渲染的区别
服务端渲染和客户端渲染
qq_43329282的博客
11-30 454
如何分辨一个网站的元素是服务端渲染还是客户端渲染 点击网站的某个元素，如果网页刷新了，则是服务端渲染，否则，则是客户端渲染 查看源代码，如果能看到源代码，则是服务端渲染，看不到源代码，则是客户端渲染 服务端渲染和客户端渲染的区别 客户端渲染不利于SEO引擎优化 服务器端渲染是可以被爬虫爬取到的，客户端异步渲染是很难被爬虫爬取到的 例如，京东的商品列表就是采用的服务器端渲染，目的是为了SEO 引擎优化 而他的商品评论列表为了用户体验，而且也不需要SEO优化，所以采用的是客户端渲染 ...
服务端渲染和客户端渲染，你真的了解吗？一文全解
贝格前端工场的博客
06-17 6019
网页渲染有两种常见的模式：服务端渲染（SSR）和客户端渲染（CSR），这两种模式的概念、区分、优劣势、应用场景、对应的js库等等，你都门清吗？贝格前端工场带你详细了解。
服务器端渲染（SSR）和客户端渲染
weixin_44273311的博客
06-12 569
客户端渲染和服务器端渲染（SSR）
nuxt3 客户端渲染
最新发布
03-27
### 客户端渲染在 Nuxt 3 中的配置与使用 Nuxt 3 是基于 Vue 3 的框架，支持服务端渲染 (SSR) 和静态站点生成 (SSG)，同时也提供了灵活的方式来进行客户端渲染 (CSR)[^1]。以下是关于如何在 Nuxt 3 中实现和配置客户端渲染的关键点： #### 配置 `nuxt.config.ts` 文件 在 Nuxt 3 中，默认情况下会启用 SSR 或 SSG 渲染模式。如果希望切换到 CSR 模式，则可以通过修改项目的 `nuxt.config.ts` 文件来完成此操作。 ```typescript // nuxt.config.ts export default defineNuxtConfig({ ssr: false, // 设置为 false 可禁用服务器端渲染并强制使用客户端渲染 }) ``` 通过设置 `ssr: false`，可以完全关闭服务端渲染功能，并让应用仅依赖于浏览器中的 JavaScript 来运行[^2]。 #### 使用 `<ClientOnly>` 组件 即使启用了 SSR，在某些场景下可能仍然需要特定的内容只在客户端加载或执行。为此，Nuxt 提供了一个内置组件 `<ClientOnly>`，用于包裹那些不适用于 SSR 的逻辑或库。 ```html <template> <div> <!-- 此部分内容将在首次加载时显示 --> <p>Loading...</p> <!-- 被 ClientOnly 包裹的部分会在客户端初始化后再呈现 --> <ClientOnly> <MyComponent /> </ClientOnly> </div> </template> ``` 上述代码片段展示了如何利用 `<ClientOnly>` 将部分组件延迟至客户端环境才进行渲染[^1]。 #### 动态导入组件 对于一些较大的第三方库或者复杂的交互模块，动态引入能够有效减少初始包体积以及提升性能表现。这同样属于一种增强用户体验的技术手段之一。 ```javascript const MyDynamicComponent = () => import('@/components/HeavyComponent.vue'); ``` 当采用这种方式定义组件时，只有当实际访问对应页面的时候才会触发该文件的实际下载过程。 --- ### 总结 综上所述，在 Nuxt 3 中调整项目以适应纯客户端渲染需求主要涉及两个方面：全局层面通过更改配置参数控制默认行为；局部则借助专门工具如 `<ClientOnly>` 实现更精细粒度上的管理。这两种方法相结合可以帮助开发者构建更加高效合理的前端架构体系结构。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值