从SSG 到 ISR/DPR 细心的同学一定发现了 SSG 这样的模式,看似美好,但存在一个瑕疵: 对于只有几十个页面的个人博客、小型文档站而言,数据有变化时,跑一次全页面渲染的消耗是可以接受的。 但对于百万级、千万级、亿级页面的大型网站而言,一旦有数据改动,要进行一次全部页面的渲染,需要的时间可能是按小时甚至按天计...
SSG适合数据基本上静态的页面,而ISG最适合含有用户想要间隔更新的数据的页面。SSG和ISG从性能和SEO方面来说都很出色,因为数据预获取,用户还可以缓存数据。 原文标题:Understanding Next.js Rendering Methods: CSR, SSR, SSG, ISR
新一代的 CDN 技术,包括更高级、更精细的缓存控制能力; Serverless 云函数,让 SSR 和 SSG 免于服务器运维的苦恼,开发者只需要重点关注前台逻辑; 越来越丰富的 BaaS 提供方,提供了包括数据存储、鉴权、电商、CMS、音视频、AI 等等“中台化”的能力,开发者只需要组合这些 BaaS 服务,专注于自身的业务逻辑即可。 Ja...
ISR在性能和实时数据之间取得了平衡,使其适合动态但经常访问的页面。 4.SSG(静态站点生成) 「静态站点生成」(SSG)是一种在构建时生成网页并用作纯 HTML 文件的技术。SSG 是最直接的方法: 在构建过程中,所有页面都预渲染为静态 HTML 文件,包括构建时已知的任何数据。 当用户请求页面时,服务器仅提供预先构建的 H...
$ npx create-next-app@latest nextjs-csr-ssr-ssg-isr --use-pnpm 具体配置选项如下: 在VS Code 中打开并运行 使用自己熟悉的开发者工具打开项目,我这里就是用 VS Code IDE 工具打开,并使用命令pnpm dev启动项目后,如下所示: 根据终端中的提示,在浏览器中访问http://localhost:3000/如下: ...
ISR ISR(Incremental Static Regeneration)渐进式的静态内容生成。应该是NextJS的首创,从一定程度上优化了SSG了的问题。简单来说就是提供一种机制能够在server中自动的执行SSG,这点优点也很明显,一是能够让内容尽量保持新鲜,而是从访问行为上仍然保持静态访问。
从SSG 到 ISR/DPR 细心的同学一定发现了 SSG 这样的模式,看似美好,但存在一个瑕疵: 对于只有几十个页面的个人博客、小型文档站而言,数据有变化时,跑一次全页面渲染的消耗是可以接受的。 但对于百万级、千万级、亿级页面的大型网站而言,一旦有数据改动,要进行一次全部页面的渲染,需要的时间可能是按小时甚至按天计...
ISR解决SSG不适合高度动态内容的这个问题。它工作原理如下: 初始生成:在第一次构建静态网站时,所有的页面都会被生成。 增量式生成:在之后的每次内容更新时,ISR只会重新生成发生更改的那部分页面,而不是整个网站。这意味着只有受影响的页面会重新生成,其他页面保持不变。
ISR目前使用的不多,它算是SSG的一种增强版,指的是在SSG的基础上,服务端在收到页面请求时会对页面的时效性进行判断,如果认定失效则会对该页面进行增量构建的一种模式。 其常见的流程如下: 可以看出ISR在构建和客户端环节没有任何的变化,而是增加了Server端的逻辑: ...
SSR服务器端渲染,将Vue、React、Angular等单页面应用在服务器端进行渲染。SSG静态站点生成,将网站预先生成为静态文件。ISR是增量静态再生,将某些需要更新的页面在后台进行重新生成。DPR是动态预渲染,将网站部分预渲染为静态网页,然后在用户访问时进行动态渲染。 SSR SS