客户端渲染

本文探讨了客户端渲染(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环境配置
在这里插入图片描述

### 客户端渲染在 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、付费专栏及课程。

余额充值