标签：activity 二次 span 美的 不可 开发 const site gets
CSR：Client Side Rendering，客户端（通常是浏览器）渲染；
SSR：Server Side Rendering，服务端渲染；
SSG：Static Site Generation，静态网站生成；
ISR：Incremental Site Rendering，增量式的网站渲染；
DPR：Distributed Persistent Rendering，分布式的持续渲染。
import React from ‘react‘import ReactDOMServer from ‘react-dom/server‘const html = ReactDOMServer.render(<h1>Hello, world!</h1>)
这就是增量式更新（ISR）的概念，这个概念最早由 Next.js 在 9.5 版本中提出，下面是一个小 Demo：Static Reactions Demo：https://reactions-demo.vercel.app/在 Next.js 中，你可以使用 getStaticPaths() 来定义哪些路径需要预渲染，通过 getStaticProps() 来获取预渲染需要的数据：
但 ISR 存在部分缺陷：1、对于没有预渲染的页面，用户首次访问将会看到一个 fallback 页面，此时服务端才开始渲染页面，直到渲染完毕。这就导致用户体验上的不一致。2、对于已经被预渲染的页面，用户直接从 CDN 加载，但这些页面可能是已经过期的，甚至过期很久的，只有在用户刷新一次，第二次访问之后，才能看到新的数据。对于电商这样的场景而言，是不可接受的（比如商品已经卖完了，但用户看到的过期数据上显示还有）。// 定义哪些页面需要预渲染export async function getStaticPaths() {return {// 只有 /posts/1 和 /posts/2 会被预渲染paths: [{ params: { id: ‘1‘ } }, { params: { id: ‘2‘ } }],// 其它页面，如 /posts/3，都会返回 fallback 页面，然后 CSRfallback: true,}}// 定义预渲染需要的数据export async function getStaticProps({ params }) {// 拉取对应的文章内容const res = await fetch(`https://.../posts/${params.id}`)const post = await res.json()return {props: { post },revalidate: 60 // 数据有效期为 60 秒}}
具体关于 ISR 的利弊，可以进一步看 Netlify 的这篇文章：Incremental Static Regeneration: Its Benefits and Its Flaws：https://www.netlify.com/blog/2021/03/08/incremental-static-regeneration-its-benefits-and-its-flaws/
Distributed Persistent Rendering (DPR)https://github.com/jamstack/jamstack.org/discussions/549DPR 本质上讲，是对 ISR 的模型做了几处改动，并且搭配上 CDN 的能力：1、去除了 fallback 行为，而是直接用 On-demand Builder（按需构建器）来响应未经过预渲染的页面，然后将结果缓存至 CDN；2、数据页面过期时，不再响应过期的缓存页面，而是 CDN 回源到 Builder 上，渲染出最新的数据；3、每次发布新版本时，自动清除 CDN 的缓存数据。
更多详细信息可以参考文档：https://docs.netlify.com/configure-builds/on-demand-builders/const { builder } = require("@netlify/functions")async function handler(event, context) {return {statusCode: 200,headers: {"Content-Type": "text/html",},body: `<html><body>Hello World</body></html>`,};}exports.handler = builder(handler);
新页面的访问可能会触发 On-demand Builder 同步渲染，导致当次请求的响应时间比较长；
比较难防御 DoS 攻击，因为攻击者可能会大量访问新页面，导致 Builder 被大量并行地运行，这里需要平台方实现 Builder 的归一化和串行运行。
新一代的 CDN 技术，包括更高级、更精细的缓存控制能力；
越来越丰富的 BaaS 提供方，提供了包括数据存储、鉴权、电商、CMS、音视频、AI 等等“中台化”的能力，开发者只需要组合这些 BaaS 服务，专注于自身的业务逻辑即可。
Firebase Hosting
Azure Static Web Apps
AWS Amplify
“经常看到有人讨论为啥国内没有netlify、vercel这样的web托管产品，其实在国内要做个类似的东西还真没那么容易，起码要打通 CDN、对象存储、Serverless、API网关，正式产品化的话还要考虑计费、安全、用户隔离等等，能完整提供这套基建的国内厂商就AT两家，并且边边角角上还缺了挺多能力的。”当然除了技术层面的原因外，国内外的市场、网络环境、技术生态都是完全不同的，仅仅是 “Copy to China” 的方式很可能会导致产品水土不服，不过这就超出本文的范畴了，可以后续安排一篇文章详细聊聊。- End -作者：Stark，云开发 CloudBase 团队高级前端工程师，Node.js Core Collaborator，知乎 JavaScript 话题优秀答主。
新一代Web技术栈的演进：SSR/SSG/ISR/DPR都在做什么？
标签：activity 二次 span 美的 不可 开发 const site gets
原文地址：https://www.cnblogs.com/rsapaper/p/14753789.html
