一、CSR(客户端渲染) 介绍: CSR(Client-Side Rendering)是前端开发中最常见的渲染方式。在这种模式下,服务器主要负责提供静态的HTML文件(可能包含一些基本的HTML结构和JavaScript脚本),而真正的页面渲染工作则完全由客户端的浏览器来完成。这意味着页面内容是在用户的浏览器上动态生成的。 优点: 响应速度快:一旦HTML...
在前端开发的世界里,我们经常遇到SSR(服务器端渲染)、SSG(静态站点生成)和CSR(客户端渲染)这三种渲染技术。它们各自有着独特的优缺点,适用于不同的场...
这便是 Gatsby.js、Next.js 这样的网站生成器解决的问题,他们属于 React/Vue 更上一层的框架(Meta Framework),通过 SSR 把动态化的 Web 应用渲染为多个静态页面,并且对高度动态的内容也保留了 CSR 的能力。 从SSG 到 ISR/DPR 细心的同学一定发现了 SSG 这样的模式,看似美好,但存在一个瑕疵: 对于只有几十个...
Next.js: Next.js 是一个 React 框架,可用于构建 SSR、CSR 和 SSG 网站和应用程序。它提供了许多内置功能,例如路由、数据获取和预渲染。 Gatsby: Gatsby 是一个 React 框架,专门用于构建 SSG 网站和应用程序。它提供了一些功能,可以简化 SSG 网站的开发,例如图像优化和自动构建。 ... 参考链接:https://blog...
CSR 是指在客户端通过 JavaScript 来渲染页面,将数据从服务器请求回来后再通过 JavaScript 来生成 HTML,并将其插入到页面中。CSR 的主要优点是可以提高网站的交互性能,用户在与页面交互时无需进行页面刷新。同时,CSR 对于复杂的交互和动态效果的支持较好,可以更好地实现单页面应用程序 (SPA)。 但是,CSR 的缺点是会...
$ npx create-next-app@latest nextjs-csr-ssr-ssg-isr --use-pnpm 具体配置选项如下: 在VS Code 中打开并运行 使用自己熟悉的开发者工具打开项目,我这里就是用 VS Code IDE 工具打开,并使用命令pnpm dev启动项目后,如下所示: 根据终端中的提示,在浏览器中访问http://localhost:3000/如下: ...
一、CSR(客户端渲染) 介绍: CSR(Client-Side Rendering)是前端开发中最常见的渲染方式。在这种模式下,服务器主要负责提供静态的HTML文件(可能包含一些基本的HTML结构和JavaScript脚本),而真正的页面渲染工作则完全由客户端的浏览器来完成。这意味着页面内容是在用户的浏览器上动态生成的。
技术本身并不是完美的，CSR、SSR、SSG、ISR、DPR 这些解决方案，多多少少都有一些自身无法解决的问题，它们本质上就是在平衡动态性、渲染性能、缓存性能这三个矛盾点，依然需要继续探索和演进下去。随着技术在持续发展，或许后续会有更好的解决方案。好了，以上就是这篇文章的全部内容，感谢各位能读到这里，若对你...
Next.js 中支持 3 种渲染方式:服务端渲染(Server-Side Rendering,简称 SSR)、静态站点渲染(Static Site Generation,简称 SSG)和客户端渲染(Client-Side Rendering,简称 CSR)。 预渲染 服务端渲染和静态站点渲染都属于“预渲染(Pre-Rendering)”。预渲染就是指在服务端完成外部数据获取以及 React 组件到 HTML 的代...
CSR:Client Side Rendering,客户端(通常是浏览器)渲染 SSR:Server Side Rendering,服务端渲染 SSG:Static Site Generation,静态网站生成 ISR:Incremental Site Rendering,增量式的网站渲染 DPR:Distributed Persistent Rendering,分布式的持续渲染 从SSR 到 SSG