一、CSR(客户端渲染) 介绍: CSR(Client-Side Rendering)是前端开发中最常见的渲染方式。在这种模式下,服务器主要负责提供静态的HTML文件(可能包含一些基本的HTML结构和JavaScript脚本),而真正的页面渲染工作则完全由客户端的浏览器来完成。这意味着页面内容是在用户的浏览器上动态生成的。 优点: 响应速度快:一旦HTML...
主要方法包括客户端渲染 (CSR)、服务器端渲染 (SSR)、静态站点生成 (SSG) 和增量静态再生 (ISR),每种方法都有独特的优势和注意事项。此外,探索混合方法和新兴趋势可以进一步增强现代 Web 应用程序的多功能性和性能。 项目环境搭建 在介绍这几种渲染模式时,我们还是要结合 Next.js 来理解,所以在进入正题之前,我们...
Next.js 中支持 3 种渲染方式:服务端渲染(Server-Side Rendering,简称 SSR)、静态站点渲染(Static Site Generation,简称 SSG)和客户端渲染(Client-Side Rendering,简称 CSR)。 预渲染 服务端渲染和静态站点渲染都属于“预渲染(Pre-Rendering)”。预渲染就是指在服务端完成外部数据获取以及 React 组件到 HTML 的代...
客户端渲染 CSR 如今大部分WEB应用都是使用JavaScript的几个主流框架(Vue、React、Angular)进行页面渲染的,页面中的大部分DOM元素都是通过Javascript插入的。也就是说,在执行JavaScript脚本之前,HTML页面已经开始解析并且构建DOM树了,JavaScript脚本只是动态的改变DOM树的结构,使得页面成为希望成为的样子,这种渲染方式叫动态...
简介:一文 Next / React / SSR / SSG / CSR 扫盲 Next / React 区别 React 客户端渲染(CSR): React 是一个纯前端库,默认在客户端执行渲染。所有的页面内容和数据都是通过 JavaScript 在浏览器中动态生成的,这意味着初始加载时间可能较长,特别是在网络状况不佳或设备性能较低的情况下。
CSR 是指在客户端通过 JavaScript 来渲染页面,将数据从服务器请求回来后再通过 JavaScript 来生成 HTML,并将其插入到页面中。CSR 的主要优点是可以提高网站的交互性能,用户在与页面交互时无需进行页面刷新。同时,CSR 对于复杂的交互和动态效果的支持较好,可以更好地实现单页面应用程序 (SPA)。 但是,CSR 的缺点是会...
CSR就是客户端渲染, 如常见的SPA所使用的渲染方式,所有的主流框架都支持,或者说:只要是在客户端渲染过程中使用到了 JS,数据是通过客户端发送请求获取并渲染的都可以算作客户端渲染。 CSR主要流程图: 在Next.js 中想要使用客户端渲染也很简单,只要上述的这些 API ,例如getStaticProps、getServerSideProps...都没使...
CSR 提供了更具交互性的用户体验,但可能会导致初始页面加载速度变慢和 SEO 挑战。 3.ISR(增量静态再生) 「增量静态再生」(ISR)是一种结合了 SSR 和 SSG 优点的混合方法。它允许在构建时和运行时部分重新生成静态页面。ISR 的工作原理如下: 在构建过程中,某些页面被预呈现为静态 HTML,而其他页面则被标记为“过...
CSR、SSR、ISR与SSG 在企业的客户服务体系中,SSR、CSR、ISR和SSG是构建和优化客户服务战略的关键要素。这些术语通常用于描述不同类型的服务代表以及他们在客户互动中扮演的角色。 一、SSR(Sales Service Representative) 服务器端渲染(SSR)是一种将页面的初始HTML内容生成在服务器上的技术。通过在服务器上执行...
CSR:Client Side Rendering,客户端(通常是浏览器)渲染; SSR:Server Side Rendering,服务端渲染; SSG:Static Site Generation,静态网站生成; ISR:Incremental Site Rendering,增量式的网站渲染; DPR:Distributed Persistent Rendering,分布式的持续渲染。 从SSR 到 SSG ...