上面内容所有的演示代码都可以在https://github.com/clin211/react-awesome/tree/nextjs-csr-ssr-ssg-isr中找到! 总结 客户端渲染 (CSR)通过浏览器加载基础 HTML 和 JavaScript,页面在客户端动态渲染,适用于交互性强、实时性要求高、不依赖 SEO 的应用。缺点是首次加载较慢,且无法有效优化 SEO。 服务器端渲染 ...
一、CSR(客户端渲染) 介绍: CSR(Client-Side Rendering)是前端开发中最常见的渲染方式。在这种模式下,服务器主要负责提供静态的HTML文件(可能包含一些基本的HTML结构和JavaScript脚本),而真正的页面渲染工作则完全由客户端的浏览器来完成。这意味着页面内容是在用户的浏览器上动态生成的。 优点: 响应速度快:一旦HTML...
这便是 Gatsby.js、Next.js 这样的网站生成器解决的问题,他们属于 React/Vue 更上一层的框架(Meta Framework),通过 SSR 把动态化的 Web 应用渲染为多个静态页面,并且对高度动态的内容也保留了 CSR 的能力。 从SSG 到 ISR/DPR 细心的同学一定发现了 SSG 这样的模式,看似美好,但存在一个瑕疵: 对于只有几十个...
浏览器加载这些文件并执行 JavaScript,从而获取数据并生成内容。 CSR 提供了更具交互性的用户体验,但可能会导致初始页面加载速度变慢和 SEO 挑战。 3.ISR(增量静态再生) 「增量静态再生」(ISR)是一种结合了 SSR 和 SSG 优点的混合方法。它允许在构建时和运行时部分重新生成静态页面。ISR 的工作原理如下: 在构建...
CSR 是指在客户端通过 JavaScript 来渲染页面,将数据从服务器请求回来后再通过 JavaScript 来生成 HTML,并将其插入到页面中。CSR 的主要优点是可以提高网站的交互性能,用户在与页面交互时无需进行页面刷新。同时,CSR 对于复杂的交互和动态效果的支持较好,可以更好地实现单页面应用程序 (SPA)。 但是,CSR 的缺点是会...
纯粹的SSG指代的同样是不包含CSR部分的内容,即构建阶段生成静态页面并在请求时直接将静态页面返回的过程。水合过程同样不是必须的,视需求决定即可。 SSG一般应用于以下场景: 出于首页打开速度、用户体验、SEO等目的需要让用户更快的看到页面首屏内容 页面中基本都是静态内容,变动很少或变动的时机比较固定 ...
一、CSR(客户端渲染) 介绍: CSR(Client-Side Rendering)是前端开发中最常见的渲染方式。在这种模式下,服务器主要负责提供静态的HTML文件(可能包含一些基本的HTML结构和JavaScript脚本),而真正的页面渲染工作则完全由客户端的浏览器来完成。这意味着页面内容是在用户的浏览器上动态生成的。
Next.js: Next.js 是一个 React 框架,可用于构建 SSR、CSR 和 SSG 网站和应用程序。它提供了许多内置功能,例如路由、数据获取和预渲染。 Gatsby: Gatsby 是一个 React 框架,专门用于构建 SSG 网站和应用程序。它提供了一些功能,可以简化 SSG 网站的开发,例如图像优化和自动构建。
CSR就是客户端渲染, 如常见的SPA所使用的渲染方式,所有的主流框架都支持,或者说:只要是在客户端渲染过程中使用到了 JS,数据是通过客户端发送请求获取并渲染的都可以算作客户端渲染。 CSR主要流程图: 在Next.js 中想要使用客户端渲染也很简单,只要上述的这些 API ,例如getStaticProps、getServerSideProps...都没使...
CSR 提供了更具交互性的用户体验,但可能会导致初始页面加载速度变慢和 SEO 挑战。 3.ISR(增量静态再生) 「增量静态再生」(ISR)是一种结合了 SSR 和 SSG 优点的混合方法。它允许在构建时和运行时部分重新生成静态页面。ISR 的工作原理如下: 在构建过程中,某些页面被预呈现为静态 HTML,而其他页面则被标记为“过...