这便是 Gatsby.js、Next.js 这样的网站生成器解决的问题,他们属于 React/Vue 更上一层的框架(Meta Framework),通过 SSR 把动态化的 Web 应用渲染为多个静态页面,并且对高度动态的内容也保留了 CSR 的能力。 从SSG 到 ISR/DPR 细心的同学一定发现了 SSG 这样的模式,看似美好,但存在一个瑕疵: 对于只有几十个...
ISR - Incremental Static Regeneration - 增量静态再生 ISR目前使用的不多,它算是SSG的一种增强版,指的是在SSG的基础上,服务端在收到页面请求时会对页面的时效性进行判断,如果认定失效则会对该页面进行增量构建的一种模式。 其常见的流程如下: 可以看出ISR在构建和客户端环节没有任何的变化,而是增加了Server端的...
SSR和CSR的区别在于,在SSR中,从服务器上的每个页面请求获取数据;而在CSR中,从客户端获取数据。 静态站点生成 就静态站点生成(SSG)而言,页面在构建期间只获取一次数据。静态生成页面非常快,性能良好,因为所有页面都事先构建。SSG因此非常适合使用静态内容(比如销售页面或博客)的页面。 在Next.js中,用户必须从想要静态...
上面内容所有的演示代码都可以在https://github.com/clin211/react-awesome/tree/nextjs-csr-ssr-ssg-isr中找到! 总结 客户端渲染 (CSR)通过浏览器加载基础 HTML 和 JavaScript,页面在客户端动态渲染,适用于交互性强、实时性要求高、不依赖 SEO 的应用。缺点是首次加载较慢,且无法有效优化 SEO。 服务器端渲染 ...
CSR 提供了更具交互性的用户体验,但可能会导致初始页面加载速度变慢和 SEO 挑战。 3.ISR(增量静态再生) 「增量静态再生」(ISR)是一种结合了 SSR 和 SSG 优点的混合方法。它允许在构建时和运行时部分重新生成静态页面。ISR 的工作原理如下: 在构建过程中,某些页面被预呈现为静态 HTML,而其他页面则被标记为“过...
CSR 提供了更具交互性的用户体验,但可能会导致初始页面加载速度变慢和 SEO 挑战。 3.ISR(增量静态再生) 「增量静态再生」(ISR)是一种结合了 SSR 和 SSG 优点的混合方法。它允许在构建时和运行时部分重新生成静态页面。ISR 的工作原理如下: 在构建过程中,某些页面被预呈现为静态 HTML,而其他页面则被标记为“过...
技术本身并不是完美的，CSR、SSR、SSG、ISR、DPR 这些解决方案，多多少少都有一些自身无法解决的问题，它们本质上就是在平衡动态性、渲染性能、缓存性能这三个矛盾点，依然需要继续探索和演进下去。随着技术在持续发展，或许后续会有更好的解决方案。好了，以上就是这篇文章的全部内容，感谢各位能读到这里，若对你...
CSR就是客户端渲染, 如常见的SPA所使用的渲染方式,所有的主流框架都支持,或者说:只要是在客户端渲染过程中使用到了 JS,数据是通过客户端发送请求获取并渲染的都可以算作客户端渲染。 CSR主要流程图: 在Next.js 中想要使用客户端渲染也很简单,只要上述的这些 API ,例如getStaticProps、getServerSideProps...都没使...
CSR:Client Side Rendering,客户端(通常是浏览器)渲染 SSR:Server Side Rendering,服务端渲染 SSG:Static Site Generation,静态网站生成 ISR:Incremental Site Rendering,增量式的网站渲染 DPR:Distributed Persistent Rendering,分布式的持续渲染 从SSR 到 SSG
Nuxt.js：Nuxt.js是建立在Vue.js之上的一个流行框架，它支持SSR和静态站点生成（SSG）。Nuxt.js通过简化数据预取和管理，使得开发Vue应用变得更加高效和方便。Angular Universal：Angular Universal是Angular应用的服务器端渲染解决方案，它可以提前执行Angular应用并生成静态应用页面，从而提升性能和可访问性。常用的CSR框架...