[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"i-ri:search-line":3,"i-ri:moon-line":8,"i-ri:sun-line":10,"i-ri:menu-3-line":12,"i-ri:close-line":14,"notes-module-items-react":16,"notes-page-react-12-rendering-and-delivery\u002F02-csr-ssr-ssg-isr-how-to-choose":494,"i-ri:arrow-left-s-line":1413,"i-ri:menu-2-line":1415,"i-ri:arrow-right-s-line":1417,"i-ep:copy-document":1419},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,24,false,"\u003Cpath fill=\"currentColor\" d=\"m18.031 16.617l4.283 4.282l-1.415 1.415l-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9s9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617m-2.006-.742A6.98 6.98 0 0 0 18 11c0-3.867-3.133-7-7-7s-7 3.133-7 7s3.133 7 7 7a6.98 6.98 0 0 0 4.875-1.975z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cpath fill=\"currentColor\" d=\"M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2h.1A6.98 6.98 0 0 0 10 7m-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938A8 8 0 0 0 4 12\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":11},"\u003Cpath fill=\"currentColor\" d=\"M12 18a6 6 0 1 1 0-12a6 6 0 0 1 0 12m0-2a4 4 0 1 0 0-8a4 4 0 0 0 0 8M11 1h2v3h-2zm0 19h2v3h-2zM3.515 4.929l1.414-1.414L7.05 5.636L5.636 7.05zM16.95 18.364l1.414-1.414l2.121 2.121l-1.414 1.414zm2.121-14.85l1.414 1.415l-2.121 2.121l-1.414-1.414zM5.636 16.95l1.414 1.414l-2.121 2.121l-1.414-1.414zM23 11v2h-3v-2zM4 11v2H1v-2z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":13},"\u003Cpath fill=\"currentColor\" d=\"M3 4h18v2H3zm6 7h12v2H9zm-6 7h18v2H3z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":15},"\u003Cpath fill=\"currentColor\" d=\"m12 10.587l4.95-4.95l1.414 1.414l-4.95 4.95l4.95 4.95l-1.415 1.414l-4.95-4.95l-4.949 4.95l-1.414-1.415l4.95-4.95l-4.95-4.95L7.05 5.638z\"\u002F>",[17,22,26,30,34,38,42,46,50,54,58,62,66,70,74,78,82,86,90,94,98,102,106,110,114,118,122,126,130,134,138,142,146,150,154,158,162,166,170,174,178,182,186,190,194,198,202,206,210,214,218,222,226,230,234,238,242,246,250,254,258,262,266,270,274,278,282,286,290,294,298,302,306,310,314,318,322,326,330,334,338,342,346,350,354,358,362,366,370,374,378,382,386,390,394,398,402,406,410,414,418,422,426,430,434,438,442,446,450,454,458,462,466,470,474,478,482,486,490],{"path":18,"title":19,"meta":20},"\u002Fnotes\u002Freact\u002F01-basics\u002F01-how-to-read-this-repo","如何阅读本仓库（学习路径与章节依赖）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},"2026-11-05T09:47:15.000Z",{"path":23,"title":24,"meta":25},"\u002Fnotes\u002Freact\u002F01-basics\u002F02-render-vs-commit","React 渲染两阶段：Render vs Commit（总览）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":27,"title":28,"meta":29},"\u002Fnotes\u002Freact\u002F01-basics\u002F03-update-pipeline-birdview","从“更新”到“页面变更”：一次 setState 的全链路鸟瞰",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":31,"title":32,"meta":33},"\u002Fnotes\u002Freact\u002F01-basics","基础入门（建议先读）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":35,"title":36,"meta":37},"\u002Fnotes\u002Freact\u002F02-event-loop\u002F01-browser-multi-process","浏览器多进程架构",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":39,"title":40,"meta":41},"\u002Fnotes\u002Freact\u002F02-event-loop\u002F02-event-loop-overview","事件循环概述",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":43,"title":44,"meta":45},"\u002Fnotes\u002Freact\u002F02-event-loop\u002F03-call-stack","函数调用栈",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":47,"title":48,"meta":49},"\u002Fnotes\u002Freact\u002F02-event-loop\u002F04-threads","线程介绍",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":51,"title":52,"meta":53},"\u002Fnotes\u002Freact\u002F02-event-loop\u002F05-refresh-rate-and-queues","刷新率与执行队列",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":55,"title":56,"meta":57},"\u002Fnotes\u002Freact\u002F02-event-loop\u002F06-settimeout","setTimeout 原理详解",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":59,"title":60,"meta":61},"\u002Fnotes\u002Freact\u002F02-event-loop\u002F07-promise","Promise 原理详解",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":63,"title":64,"meta":65},"\u002Fnotes\u002Freact\u002F02-event-loop\u002F08-event-loop-in-practice","事件循环机制（综合）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":67,"title":68,"meta":69},"\u002Fnotes\u002Freact\u002F02-event-loop\u002F09-priority-queues","优先级队列",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":71,"title":72,"meta":73},"\u002Fnotes\u002Freact\u002F03-concurrent-mode\u002F01-concept","并发模式：概念",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":75,"title":76,"meta":77},"\u002Fnotes\u002Freact\u002F03-concurrent-mode\u002F02-demo","案例演示并发模式",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":79,"title":80,"meta":81},"\u002Fnotes\u002Freact\u002F03-concurrent-mode\u002F03-high-priority-preemption","高优先级插队",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":83,"title":84,"meta":85},"\u002Fnotes\u002Freact\u002F03-concurrent-mode\u002F04-preemption-vs-interruption","插队的影响、与中断的区别",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":87,"title":88,"meta":89},"\u002Fnotes\u002Freact\u002F03-concurrent-mode\u002F05-shouldYield","中断条件：shouldYield",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":91,"title":92,"meta":93},"\u002Fnotes\u002Freact\u002F03-concurrent-mode\u002F06-react-tasks-and-queues","React 中的任务与队列",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":95,"title":96,"meta":97},"\u002Fnotes\u002Freact\u002F03-concurrent-mode\u002F07-ensureRootIsScheduled","ensureRootIsScheduled",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":99,"title":100,"meta":101},"\u002Fnotes\u002Freact\u002F03-concurrent-mode\u002F08-batch-updates-merge","合并多个更新触发",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":103,"title":104,"meta":105},"\u002Fnotes\u002Freact\u002F03-concurrent-mode\u002F09-taskQueue-lifecycle","taskQueue 队列循环的启动与结束",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":107,"title":108,"meta":109},"\u002Fnotes\u002Freact\u002F03-concurrent-mode\u002F10-time-slicing","时间切片是如何实现的",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":111,"title":112,"meta":113},"\u002Fnotes\u002Freact\u002F03-concurrent-mode\u002F11-workLoop-full","workLoop 循环完整逻辑",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":115,"title":116,"meta":117},"\u002Fnotes\u002Freact\u002F03-concurrent-mode\u002F12-priority-design","React 中的优先级设计",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":119,"title":120,"meta":121},"\u002Fnotes\u002Freact\u002F03-concurrent-mode\u002F13-lane-model","lane 模型",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":123,"title":124,"meta":125},"\u002Fnotes\u002Freact\u002F04-fiber\u002F01-three-node-types","三种节点对象",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":127,"title":128,"meta":129},"\u002Fnotes\u002Freact\u002F04-fiber\u002F02-fiberRootNode","FiberRootNode",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":131,"title":132,"meta":133},"\u002Fnotes\u002Freact\u002F04-fiber\u002F03-fiber-tree","Fiber 树",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":135,"title":136,"meta":137},"\u002Fnotes\u002Freact\u002F04-fiber\u002F04-initial-mount-build","Fiber 树初始构建过程",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":139,"title":140,"meta":141},"\u002Fnotes\u002Freact\u002F04-fiber\u002F05-workLoopConcurrent","workLoopConcurrent",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":143,"title":144,"meta":145},"\u002Fnotes\u002Freact\u002F04-fiber\u002F06-stack-and-workInProgress","栈结构 与 workInProgress",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":147,"title":148,"meta":149},"\u002Fnotes\u002Freact\u002F04-fiber\u002F07-executionContext","执行上下文 executionContext",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":151,"title":152,"meta":153},"\u002Fnotes\u002Freact\u002F04-fiber\u002F08-update-lanes","update lanes",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":155,"title":156,"meta":157},"\u002Fnotes\u002Freact\u002F04-fiber\u002F09-render-lanes","render lanes",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":159,"title":160,"meta":161},"\u002Fnotes\u002Freact\u002F04-fiber\u002F10-fiber-lanes","fiber lanes",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":163,"title":164,"meta":165},"\u002Fnotes\u002Freact\u002F04-fiber\u002F11-flags-appendix","附录：flags",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":167,"title":168,"meta":169},"\u002Fnotes\u002Freact\u002F05-hooks\u002F01-background","hook 背景",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":171,"title":172,"meta":173},"\u002Fnotes\u002Freact\u002F05-hooks\u002F02-categories","hook 分类",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":175,"title":176,"meta":177},"\u002Fnotes\u002Freact\u002F05-hooks\u002F03-closures","hook 与闭包",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":179,"title":180,"meta":181},"\u002Fnotes\u002Freact\u002F05-hooks\u002F04-hooks-and-fiber","hook 与 fiber",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":183,"title":184,"meta":185},"\u002Fnotes\u002Freact\u002F05-hooks\u002F05-renderWithHooks","renderWithHooks",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":187,"title":188,"meta":189},"\u002Fnotes\u002Freact\u002F05-hooks\u002F06-init-state-hook","初始化 State Hook",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":191,"title":192,"meta":193},"\u002Fnotes\u002Freact\u002F05-hooks\u002F07-init-effect-hook","初始化 effect Hook",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":195,"title":196,"meta":197},"\u002Fnotes\u002Freact\u002F05-hooks\u002F08-circular-linked-list","环形链表详解",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":199,"title":200,"meta":201},"\u002Fnotes\u002Freact\u002F05-hooks\u002F09-useReducer-vs-useState","useReducer 与 useState 的区别",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":203,"title":204,"meta":205},"\u002Fnotes\u002Freact\u002F05-hooks\u002F10-update-linked-list","update 链表",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":207,"title":208,"meta":209},"\u002Fnotes\u002Freact\u002F05-hooks\u002F11-mount-state-updates","初始阶段的状态更新",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":211,"title":212,"meta":213},"\u002Fnotes\u002Freact\u002F05-hooks\u002F12-baseQueue-vs-pending","baseQueue 与 queue.pending",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":215,"title":216,"meta":217},"\u002Fnotes\u002Freact\u002F05-hooks\u002F13-dispatch-in-update","更新阶段的 dispatch",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":219,"title":220,"meta":221},"\u002Fnotes\u002Freact\u002F05-hooks\u002F14-commitRoot","commitRoot",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":223,"title":224,"meta":225},"\u002Fnotes\u002Freact\u002F06-diff\u002F01-update-overview","React 更新机制概述",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":227,"title":228,"meta":229},"\u002Fnotes\u002Freact\u002F06-diff\u002F02-diff-strategy","diff 策略",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":231,"title":232,"meta":233},"\u002Fnotes\u002Freact\u002F06-diff\u002F03-node-compare","节点比较方式",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":235,"title":236,"meta":237},"\u002Fnotes\u002Freact\u002F06-diff\u002F04-reconcileChildFibers","reconcileChildFibers",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":239,"title":240,"meta":241},"\u002Fnotes\u002Freact\u002F06-diff\u002F05-reconcileSingleElement","reconcileSingleElement",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":243,"title":244,"meta":245},"\u002Fnotes\u002Freact\u002F06-diff\u002F06-reconcileChildrenArray","reconcileChildrenArray",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":247,"title":248,"meta":249},"\u002Fnotes\u002Freact\u002F06-diff\u002F07-why-not-number-key","为什么不建议使用数字作为 key",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":251,"title":252,"meta":253},"\u002Fnotes\u002Freact\u002F07-event-system\u002F01-overview","事件系统概述",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":255,"title":256,"meta":257},"\u002Fnotes\u002Freact\u002F07-event-system\u002F02-event-plugin","事件插件",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":259,"title":260,"meta":261},"\u002Fnotes\u002Freact\u002F07-event-system\u002F03-event-pooling","事件池",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":263,"title":264,"meta":265},"\u002Fnotes\u002Freact\u002F07-event-system\u002F04-root-listeners","根节点事件绑定",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":267,"title":268,"meta":269},"\u002Fnotes\u002Freact\u002F07-event-system\u002F05-event-dispatch","事件触发",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":271,"title":272,"meta":273},"\u002Fnotes\u002Freact\u002F08-interview\u002F01-useEffect-vs-useLayoutEffect","useEffect 与 useLayoutEffect 的区别",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":275,"title":276,"meta":277},"\u002Fnotes\u002Freact\u002F08-interview\u002F02-why-no-conditional-hooks","为什么 hook 不能写在条件判断里",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":279,"title":280,"meta":281},"\u002Fnotes\u002Freact\u002F08-interview\u002F03-understanding-concurrency","聊聊在 React 中，你对并发模式的理解",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":283,"title":284,"meta":285},"\u002Fnotes\u002Freact\u002F08-interview\u002F04-update-mechanism","聊聊 React 的更新机制原理",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":287,"title":288,"meta":289},"\u002Fnotes\u002Freact\u002F08-interview\u002F05-setState-sync-or-async","setState 是同步还是异步的？",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":291,"title":292,"meta":293},"\u002Fnotes\u002Freact\u002F08-interview\u002F06-useState-vs-useReducer","聊聊 useState 与 useReducer 的区别",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":295,"title":296,"meta":297},"\u002Fnotes\u002Freact\u002F08-interview\u002F07-closure-trap","聊聊闭包陷阱问题，以及如何解决",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":299,"title":300,"meta":301},"\u002Fnotes\u002Freact\u002F08-interview\u002F08-time-slicing-details","时间分片是如何实现的（任务拆分\u002F中断\u002F恢复）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":303,"title":304,"meta":305},"\u002Fnotes\u002Freact\u002F08-interview\u002F09-batched-updates-useState","聊聊 useState 的批处理更新机制",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":307,"title":308,"meta":309},"\u002Fnotes\u002Freact\u002F08-interview\u002F10-jsx-to-dom","JSX 是如何转变成为真实 DOM 的",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":311,"title":312,"meta":313},"\u002Fnotes\u002Freact\u002F08-interview\u002F11-useCallback-impl","useCallback 的实现原理是什么",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":315,"title":316,"meta":317},"\u002Fnotes\u002Freact\u002F08-interview\u002F12-scheduling-mechanism","详细聊聊 React 的调度机制",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":319,"title":320,"meta":321},"\u002Fnotes\u002Freact\u002F08-interview\u002F13-priority-and-lanes","聊聊 React 的优先级机制（Lane 模型）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":323,"title":324,"meta":325},"\u002Fnotes\u002Freact\u002F08-interview\u002F14-diff-algorithm","React 的 Diff 算法是什么样的",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":327,"title":328,"meta":329},"\u002Fnotes\u002Freact\u002F08-interview\u002F15-event-system","详细聊聊 React 的事件系统是如何实现的",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":331,"title":332,"meta":333},"\u002Fnotes\u002Freact\u002F08-interview\u002F16-portals-bubbling","React Portals 上的事件是否会冒泡到父组件，原理是什么",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":335,"title":336,"meta":337},"\u002Fnotes\u002Freact\u002F08-interview\u002F17-useEffect-impl","useEffect 的实现原理是什么",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":339,"title":340,"meta":341},"\u002Fnotes\u002Freact\u002F08-interview\u002F18-useContext-impl","请聊聊 useContext 的实现原理",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":343,"title":344,"meta":345},"\u002Fnotes\u002Freact\u002F09-react-18-in-practice\u002F01-automatic-batching-and-flushsync","React 18 自动批处理（Automatic Batching）与 flushSync",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":347,"title":348,"meta":349},"\u002Fnotes\u002Freact\u002F09-react-18-in-practice\u002F02-strictmode-and-idempotent-effects","React StrictMode：为什么会“双调用”？（源码\u002F机制视角）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":351,"title":352,"meta":353},"\u002Fnotes\u002Freact\u002F09-react-18-in-practice\u002F03-transition-useTransition-useDeferredValue","Transition：startTransition \u002F useTransition \u002F useDeferredValue（机制视角）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":355,"title":356,"meta":357},"\u002Fnotes\u002Freact\u002F09-react-18-in-practice\u002F04-suspense-loading-boundary-design","Suspense：加载态边界如何设计（机制\u002F架构视角）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":359,"title":360,"meta":361},"\u002Fnotes\u002Freact\u002F09-react-18-in-practice\u002F05-error-boundary-reporting-and-recovery","Error Boundary：兜底、重试与上报（自研 vs Sentry）（机制\u002F架构视角）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":363,"title":364,"meta":365},"\u002Fnotes\u002Freact\u002F09-react-18-in-practice","React 18 实战（并发特性与默认行为）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":367,"title":368,"meta":369},"\u002Fnotes\u002Freact\u002F10-routing-and-navigation\u002F01-routing-and-url-state-mental-model","路由与 URL State：统一心智模型（架构师视角）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":371,"title":372,"meta":373},"\u002Fnotes\u002Freact\u002F10-routing-and-navigation\u002F02-tanstack-router-route-tree-search-loader-prefetch","TanStack Router（Vite \u002F SPA）：Route Tree \u002F Search \u002F Loader \u002F Prefetch（落地篇）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":375,"title":376,"meta":377},"\u002Fnotes\u002Freact\u002F10-routing-and-navigation\u002F03-next-app-router-segments-layout-loading-error-not-found-prefetch","Next.js App Router：Segments \u002F Layouts \u002F Loading-Error-NotFound \u002F Prefetch（落地篇）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":379,"title":380,"meta":381},"\u002Fnotes\u002Freact\u002F10-routing-and-navigation","路由与导航（TanStack Router \u002F Next App Router）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":383,"title":384,"meta":385},"\u002Fnotes\u002Freact\u002F11-data-layer\u002F01-state-layering-ui-server-url-global","状态分层：UI \u002F Server \u002F URL \u002F Global（架构师视角）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":387,"title":388,"meta":389},"\u002Fnotes\u002Freact\u002F11-data-layer\u002F02-tanstack-query-caching-and-invalidation","TanStack Query：缓存模型与失效策略（Caching & Invalidation）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":391,"title":392,"meta":393},"\u002Fnotes\u002Freact\u002F11-data-layer\u002F03-optimistic-updates-and-consistency","TanStack Query：乐观更新与一致性（Optimistic Updates & Consistency）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":395,"title":396,"meta":397},"\u002Fnotes\u002Freact\u002F11-data-layer\u002F04-form-architecture-react-hook-form-validation-performance-testability","表单架构：React Hook Form 的受控\u002F非受控、校验、性能与可测试性（架构师视角）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":399,"title":400,"meta":401},"\u002Fnotes\u002Freact\u002F11-data-layer","数据层（Server State \u002F 表单 \u002F 状态分层）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":403,"title":404,"meta":405},"\u002Fnotes\u002Freact\u002F12-rendering-and-delivery\u002F01-hydration-mismatch","Hydration mismatch（React \u002F Next.js）：成因、检测、排查清单与工程化规避",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":407,"title":408,"meta":409},"\u002Fnotes\u002Freact\u002F12-rendering-and-delivery\u002F01-nextjs-cache-revalidate-consistency-online-not-updating","Next.js 缓存\u002F重验证与一致性：避免「线上怎么不更新」事故（App Router）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":411,"title":412,"meta":413},"\u002Fnotes\u002Freact\u002F12-rendering-and-delivery\u002F02-csr-ssr-ssg-isr-how-to-choose","CSR vs SSR vs SSG vs ISR：怎么选？边界是什么？（体验 + 成本 + 一致性）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":415,"title":416,"meta":417},"\u002Fnotes\u002Freact\u002F12-rendering-and-delivery\u002F04-streaming-ssr-with-suspense","Streaming SSR + Suspense：提升前端感知性能的利器",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":419,"title":420,"meta":421},"\u002Fnotes\u002Freact\u002F12-rendering-and-delivery","渲染与交付（CSR\u002FSSR\u002FStreaming\u002FHydration\u002F缓存）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":423,"title":424,"meta":425},"\u002Fnotes\u002Freact\u002F13-production-readiness\u002F01-observability-logging-metrics-tracing","前端可观测性体系：日志、指标与链路追踪",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":427,"title":428,"meta":429},"\u002Fnotes\u002Freact\u002F13-production-readiness\u002F02-auth-and-web-security","鉴权与 Web 安全：OAuth, JWT, XSS, CSRF, CSP",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":431,"title":432,"meta":433},"\u002Fnotes\u002Freact\u002F13-production-readiness","生产可用性（错误\u002F可观测\u002F鉴权\u002F安全）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":435,"title":436,"meta":437},"\u002Fnotes\u002Freact\u002F14-performance\u002F01-performance-playbook-and-metrics","前端性能定位 Playbook：从指标到归因",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":439,"title":440,"meta":441},"\u002Fnotes\u002Freact\u002F14-performance\u002F02-rendering-optimization-memo-context-virtualization","React 渲染性能优化：Memo, Context, 与虚拟化",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":443,"title":444,"meta":445},"\u002Fnotes\u002Freact\u002F14-performance\u002F03-asset-and-bundle-optimization","资源与 Bundle 优化：代码分割、图片与 CDN",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":447,"title":448,"meta":449},"\u002Fnotes\u002Freact\u002F14-performance","性能体系（定位 → 优化 → 度量）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":451,"title":452,"meta":453},"\u002Fnotes\u002Freact\u002F15-engineering-and-architecture\u002F01-component-system-and-design-system","组件体系与设计系统：构建规模化前端的基石",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":455,"title":456,"meta":457},"\u002Fnotes\u002Freact\u002F15-engineering-and-architecture\u002F02-testing-strategy-rtl-e2e-testability","前端测试体系：RTL, E2E 与可测性设计",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":459,"title":460,"meta":461},"\u002Fnotes\u002Freact\u002F15-engineering-and-architecture\u002F03-monorepo-and-dependency-management","Monorepo 与依赖治理：pnpm 和 Turborepo",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":463,"title":464,"meta":465},"\u002Fnotes\u002Freact\u002F15-engineering-and-architecture\u002F04-cicd-and-quality-gates","CI\u002FCD 与质量门禁：构建可靠的自动化流程",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":467,"title":468,"meta":469},"\u002Fnotes\u002Freact\u002F15-engineering-and-architecture\u002F05-bff-and-api-design","BFF 与 API 设计：前端架构师的视角",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":471,"title":472,"meta":473},"\u002Fnotes\u002Freact\u002F15-engineering-and-architecture","工程与架构治理（规模化）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":475,"title":476,"meta":477},"\u002Fnotes\u002Freact\u002F16-advanced\u002F01-rsc-and-server-actions-deep-dive","RSC\u002FServer Actions 深水区：边界、约束与缓存一致性",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":479,"title":480,"meta":481},"\u002Fnotes\u002Freact\u002F16-advanced\u002F02-micro-frontend-governance","微前端治理：样式、路由与通信",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":483,"title":484,"meta":485},"\u002Fnotes\u002Freact\u002F16-advanced\u002F03-realtime-and-offline","实时与离线：WebSocket, PWA 与 Service Worker",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":487,"title":488,"meta":489},"\u002Fnotes\u002Freact\u002F16-advanced\u002F04-a11y-i18n-compliance","a11y, i18n 与合规：构建负责任的全球化应用",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":491,"title":492,"meta":493},"\u002Fnotes\u002Freact\u002F16-advanced","进阶专题（按业务需要选做）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"id":495,"type":496,"sourcePath":497,"routePath":411,"path":411,"title":412,"updatedAt":21,"meta":498,"body":500,"toc":1395},"bm90ZTpub3Rlcy9yZWFjdC8xMi1yZW5kZXJpbmctYW5kLWRlbGl2ZXJ5LzAyLWNzci1zc3Itc3NnLWlzci1ob3ctdG8tY2hvb3NlLm1k","note","notes\u002Freact\u002F12-rendering-and-delivery\u002F02-csr-ssr-ssg-isr-how-to-choose.md",{"id":495,"type":496,"sourcePath":497,"slug":499,"title":412,"updatedAt":21,"lastUpdated":21},"react\u002F12-rendering-and-delivery\u002F02-csr-ssr-ssg-isr-how-to-choose",{"type":501,"children":502},"root",[503,511,574,581,593,616,635,641,646,685,842,848,855,860,883,888,901,907,911,929,933,946,952,956,974,978,991,1008,1014,1020,1025,1043,1048,1061,1067,1071,1084,1088,1101,1107,1111,1128,1132,1145,1151,1155,1176,1181,1189,1195,1207,1215,1226,1234,1245,1253,1264,1272,1278,1341,1346,1389],{"type":504,"tag":505,"props":506,"children":508},"element","h1",{"id":507},"csr-vs-ssr-vs-ssg-vs-isr怎么选边界是什么体验-成本-一致性",[509],{"type":510,"value":412},"text",{"type":504,"tag":512,"props":513,"children":514},"blockquote",{},[515,529],{"type":504,"tag":516,"props":517,"children":518},"p",{},[519,521,527],{"type":510,"value":520},"一句话结论：渲染策略不是“越 SSR 越高级”，而是 ",{"type":504,"tag":522,"props":523,"children":524},"strong",{},[525],{"type":510,"value":526},"体验（首屏\u002FSEO\u002F交互）× 成本（开发\u002F运行\u002F发布）× 一致性（更新\u002F缓存\u002F个性化）",{"type":510,"value":528}," 的权衡：",{"type":504,"tag":530,"props":531,"children":532},"ul",{},[533,544,554,564],{"type":504,"tag":534,"props":535,"children":536},"li",{},[537,542],{"type":504,"tag":522,"props":538,"children":539},{},[540],{"type":510,"value":541},"CSR",{"type":510,"value":543},"：开发\u002F部署最简单，但首屏与 SEO 需要额外治理",{"type":504,"tag":534,"props":545,"children":546},{},[547,552],{"type":504,"tag":522,"props":548,"children":549},{},[550],{"type":510,"value":551},"SSR",{"type":510,"value":553},"：首屏可见更快、SEO 友好，但把复杂度带到服务端（并发、缓存、稳定性）",{"type":504,"tag":534,"props":555,"children":556},{},[557,562],{"type":504,"tag":522,"props":558,"children":559},{},[560],{"type":510,"value":561},"SSG",{"type":510,"value":563},"：性能与稳定性最强，但数据更新与个性化受限",{"type":504,"tag":534,"props":565,"children":566},{},[567,572],{"type":504,"tag":522,"props":568,"children":569},{},[570],{"type":510,"value":571},"ISR",{"type":510,"value":573},"：在 SSG 的收益上引入“可控更新”，但一致性与缓存策略必须设计清楚",{"type":504,"tag":575,"props":576,"children":578},"h2",{"id":577},"_0-先对齐一个关键误区ssr-可交互",[579],{"type":510,"value":580},"0. 先对齐一个关键误区：SSR ≠ 可交互",{"type":504,"tag":516,"props":582,"children":583},{},[584,586,591],{"type":510,"value":585},"无论 CSR\u002FSSR\u002FSSG\u002FISR，",{"type":504,"tag":522,"props":587,"children":588},{},[589],{"type":510,"value":590},"最终都需要 hydration 才能交互",{"type":510,"value":592},"（除非你的页面几乎无交互）。",{"type":504,"tag":530,"props":594,"children":595},{},[596,606],{"type":504,"tag":534,"props":597,"children":598},{},[599,601],{"type":510,"value":600},"SSR\u002FSSG\u002FISR 解决的是：",{"type":504,"tag":522,"props":602,"children":603},{},[604],{"type":510,"value":605},"更快拿到可见 HTML",{"type":504,"tag":534,"props":607,"children":608},{},[609,611],{"type":510,"value":610},"Hydration 解决的是：",{"type":504,"tag":522,"props":612,"children":613},{},[614],{"type":510,"value":615},"把 React 事件\u002F状态接管到 DOM 上",{"type":504,"tag":512,"props":617,"children":618},{},[619],{"type":504,"tag":516,"props":620,"children":621},{},[622,624],{"type":510,"value":623},"关联阅读（生产事故高发）：Hydration mismatch：",{"type":504,"tag":625,"props":626,"children":628},"a",{"href":627},".\u002F01-hydration-mismatch.md",[629],{"type":504,"tag":630,"props":631,"children":633},"code",{"className":632},[],[634],{"type":510,"value":627},{"type":504,"tag":575,"props":636,"children":638},{"id":637},"_1-四种策略的核心差异是什么",[639],{"type":510,"value":640},"1. 四种策略的“核心差异”是什么？",{"type":504,"tag":516,"props":642,"children":643},{},[644],{"type":510,"value":645},"你可以用一句话记忆：",{"type":504,"tag":530,"props":647,"children":648},{},[649,658,667,676],{"type":504,"tag":534,"props":650,"children":651},{},[652,656],{"type":504,"tag":522,"props":653,"children":654},{},[655],{"type":510,"value":541},{"type":510,"value":657},"：HTML 壳 + JS 拉数据后再渲染（客户端决定内容）",{"type":504,"tag":534,"props":659,"children":660},{},[661,665],{"type":504,"tag":522,"props":662,"children":663},{},[664],{"type":510,"value":551},{"type":510,"value":666},"：每次请求在服务端渲染 HTML（请求时决定内容）",{"type":504,"tag":534,"props":668,"children":669},{},[670,674],{"type":504,"tag":522,"props":671,"children":672},{},[673],{"type":510,"value":561},{"type":510,"value":675},"：构建时预渲染 HTML（构建时决定内容）",{"type":504,"tag":534,"props":677,"children":678},{},[679,683],{"type":504,"tag":522,"props":680,"children":681},{},[682],{"type":510,"value":571},{"type":510,"value":684},"：以 SSG 为主，但允许按时间\u002F事件重生成（构建与请求之间的折中）",{"type":504,"tag":686,"props":687,"children":692},"pre",{"className":688,"code":689,"language":690,"meta":691,"style":691},"language-infographic shiki shiki-themes github-light github-dark","infographic list-grid-badge-card\ndata\n  title 渲染策略速览（你在优化什么）\n  items\n    - label CSR\n      desc 最简单；首屏与 SEO 需要额外治理\n      icon mdi:monitor\n    - label SSR\n      desc 首屏\u002FSEO 更好；服务端复杂度上升\n      icon mdi:server\n    - label SSG\n      desc 性能\u002F稳定性最强；更新与个性化受限\n      icon mdi:file-document-outline\n    - label ISR\n      desc 在 SSG 上引入可控更新；一致性策略更关键\n      icon mdi:refresh\n","infographic","",[693],{"type":504,"tag":630,"props":694,"children":695},{"__ignoreMap":691},[696,707,716,725,734,743,752,761,770,779,788,797,806,815,824,833],{"type":504,"tag":697,"props":698,"children":701},"span",{"class":699,"line":700},"line",1,[702],{"type":504,"tag":697,"props":703,"children":704},{},[705],{"type":510,"value":706},"infographic list-grid-badge-card\n",{"type":504,"tag":697,"props":708,"children":710},{"class":699,"line":709},2,[711],{"type":504,"tag":697,"props":712,"children":713},{},[714],{"type":510,"value":715},"data\n",{"type":504,"tag":697,"props":717,"children":719},{"class":699,"line":718},3,[720],{"type":504,"tag":697,"props":721,"children":722},{},[723],{"type":510,"value":724},"  title 渲染策略速览（你在优化什么）\n",{"type":504,"tag":697,"props":726,"children":728},{"class":699,"line":727},4,[729],{"type":504,"tag":697,"props":730,"children":731},{},[732],{"type":510,"value":733},"  items\n",{"type":504,"tag":697,"props":735,"children":737},{"class":699,"line":736},5,[738],{"type":504,"tag":697,"props":739,"children":740},{},[741],{"type":510,"value":742},"    - label CSR\n",{"type":504,"tag":697,"props":744,"children":746},{"class":699,"line":745},6,[747],{"type":504,"tag":697,"props":748,"children":749},{},[750],{"type":510,"value":751},"      desc 最简单；首屏与 SEO 需要额外治理\n",{"type":504,"tag":697,"props":753,"children":755},{"class":699,"line":754},7,[756],{"type":504,"tag":697,"props":757,"children":758},{},[759],{"type":510,"value":760},"      icon mdi:monitor\n",{"type":504,"tag":697,"props":762,"children":764},{"class":699,"line":763},8,[765],{"type":504,"tag":697,"props":766,"children":767},{},[768],{"type":510,"value":769},"    - label SSR\n",{"type":504,"tag":697,"props":771,"children":773},{"class":699,"line":772},9,[774],{"type":504,"tag":697,"props":775,"children":776},{},[777],{"type":510,"value":778},"      desc 首屏\u002FSEO 更好；服务端复杂度上升\n",{"type":504,"tag":697,"props":780,"children":782},{"class":699,"line":781},10,[783],{"type":504,"tag":697,"props":784,"children":785},{},[786],{"type":510,"value":787},"      icon mdi:server\n",{"type":504,"tag":697,"props":789,"children":791},{"class":699,"line":790},11,[792],{"type":504,"tag":697,"props":793,"children":794},{},[795],{"type":510,"value":796},"    - label SSG\n",{"type":504,"tag":697,"props":798,"children":800},{"class":699,"line":799},12,[801],{"type":504,"tag":697,"props":802,"children":803},{},[804],{"type":510,"value":805},"      desc 性能\u002F稳定性最强；更新与个性化受限\n",{"type":504,"tag":697,"props":807,"children":809},{"class":699,"line":808},13,[810],{"type":504,"tag":697,"props":811,"children":812},{},[813],{"type":510,"value":814},"      icon mdi:file-document-outline\n",{"type":504,"tag":697,"props":816,"children":818},{"class":699,"line":817},14,[819],{"type":504,"tag":697,"props":820,"children":821},{},[822],{"type":510,"value":823},"    - label ISR\n",{"type":504,"tag":697,"props":825,"children":827},{"class":699,"line":826},15,[828],{"type":504,"tag":697,"props":829,"children":830},{},[831],{"type":510,"value":832},"      desc 在 SSG 上引入可控更新；一致性策略更关键\n",{"type":504,"tag":697,"props":834,"children":836},{"class":699,"line":835},16,[837],{"type":504,"tag":697,"props":838,"children":839},{},[840],{"type":510,"value":841},"      icon mdi:refresh\n",{"type":504,"tag":575,"props":843,"children":845},{"id":844},"_2-选型维度体验-成本-一致性",[846],{"type":510,"value":847},"2. 选型维度：体验 × 成本 × 一致性",{"type":504,"tag":849,"props":850,"children":852},"h3",{"id":851},"_21-体验用户感知",[853],{"type":510,"value":854},"2.1 体验（用户感知）",{"type":504,"tag":516,"props":856,"children":857},{},[858],{"type":510,"value":859},"关注：",{"type":504,"tag":530,"props":861,"children":862},{},[863,868,873,878],{"type":504,"tag":534,"props":864,"children":865},{},[866],{"type":510,"value":867},"首屏可见：TTFB\u002FFCP\u002FLCP",{"type":504,"tag":534,"props":869,"children":870},{},[871],{"type":510,"value":872},"导航体验：切页是否闪屏、是否能预取",{"type":504,"tag":534,"props":874,"children":875},{},[876],{"type":510,"value":877},"交互响应：INP 是否被 hydration\u002FJS 执行拖垮",{"type":504,"tag":534,"props":879,"children":880},{},[881],{"type":510,"value":882},"SEO：是否需要让爬虫直接看到内容",{"type":504,"tag":516,"props":884,"children":885},{},[886],{"type":510,"value":887},"倾向：",{"type":504,"tag":530,"props":889,"children":890},{},[891,896],{"type":504,"tag":534,"props":892,"children":893},{},[894],{"type":510,"value":895},"强 SEO：SSG\u002FISR\u002FSSR",{"type":504,"tag":534,"props":897,"children":898},{},[899],{"type":510,"value":900},"强交互 SPA：CSR（但要做性能与骨架治理）或 Next App Router 的混合模式",{"type":504,"tag":849,"props":902,"children":904},{"id":903},"_22-成本工程与运行",[905],{"type":510,"value":906},"2.2 成本（工程与运行）",{"type":504,"tag":516,"props":908,"children":909},{},[910],{"type":510,"value":859},{"type":504,"tag":530,"props":912,"children":913},{},[914,919,924],{"type":504,"tag":534,"props":915,"children":916},{},[917],{"type":510,"value":918},"开发复杂度：数据获取边界、错误\u002F加载边界",{"type":504,"tag":534,"props":920,"children":921},{},[922],{"type":510,"value":923},"运维复杂度：服务端并发、缓存、容灾、灰度",{"type":504,"tag":534,"props":925,"children":926},{},[927],{"type":510,"value":928},"成本：服务端计算与带宽",{"type":504,"tag":516,"props":930,"children":931},{},[932],{"type":510,"value":887},{"type":504,"tag":530,"props":934,"children":935},{},[936,941],{"type":504,"tag":534,"props":937,"children":938},{},[939],{"type":510,"value":940},"想最省事：CSR\u002FSSG",{"type":504,"tag":534,"props":942,"children":943},{},[944],{"type":510,"value":945},"能接受服务端复杂度换体验：SSR",{"type":504,"tag":849,"props":947,"children":949},{"id":948},"_23-一致性更新与缓存",[950],{"type":510,"value":951},"2.3 一致性（更新与缓存）",{"type":504,"tag":516,"props":953,"children":954},{},[955],{"type":510,"value":859},{"type":504,"tag":530,"props":957,"children":958},{},[959,964,969],{"type":504,"tag":534,"props":960,"children":961},{},[962],{"type":510,"value":963},"数据多久更新一次？能接受“最终一致”吗？",{"type":504,"tag":534,"props":965,"children":966},{},[967],{"type":510,"value":968},"是否是用户态数据（个性化、权限、购物车）？",{"type":504,"tag":534,"props":970,"children":971},{},[972],{"type":510,"value":973},"是否存在多层缓存（CDN、框架缓存、客户端缓存）？",{"type":504,"tag":516,"props":975,"children":976},{},[977],{"type":510,"value":887},{"type":504,"tag":530,"props":979,"children":980},{},[981,986],{"type":504,"tag":534,"props":982,"children":983},{},[984],{"type":510,"value":985},"公共内容（资讯、文档）：SSG\u002FISR",{"type":504,"tag":534,"props":987,"children":988},{},[989],{"type":510,"value":990},"强一致用户态：SSR（或强动态 no-store）+ 客户端缓存策略",{"type":504,"tag":512,"props":992,"children":993},{},[994],{"type":504,"tag":516,"props":995,"children":996},{},[997,999],{"type":510,"value":998},"关联阅读（Next 上线事故常见根因）：Next 缓存\u002F重验证与一致性：",{"type":504,"tag":625,"props":1000,"children":1002},{"href":1001},".\u002F04-nextjs-cache-revalidate-consistency-online-not-updating.md",[1003],{"type":504,"tag":630,"props":1004,"children":1006},{"className":1005},[],[1007],{"type":510,"value":1001},{"type":504,"tag":575,"props":1009,"children":1011},{"id":1010},"_3-常见业务场景的推荐",[1012],{"type":510,"value":1013},"3. 常见业务场景的推荐",{"type":504,"tag":849,"props":1015,"children":1017},{"id":1016},"_31-登录后后台b-端-管理台",[1018],{"type":510,"value":1019},"3.1 登录后后台（B 端 \u002F 管理台）",{"type":504,"tag":516,"props":1021,"children":1022},{},[1023],{"type":510,"value":1024},"特点：",{"type":504,"tag":530,"props":1026,"children":1027},{},[1028,1033,1038],{"type":504,"tag":534,"props":1029,"children":1030},{},[1031],{"type":510,"value":1032},"SEO 不重要",{"type":504,"tag":534,"props":1034,"children":1035},{},[1036],{"type":510,"value":1037},"强交互、复杂表格\u002F筛选",{"type":504,"tag":534,"props":1039,"children":1040},{},[1041],{"type":510,"value":1042},"用户态数据多",{"type":504,"tag":516,"props":1044,"children":1045},{},[1046],{"type":510,"value":1047},"推荐：",{"type":504,"tag":530,"props":1049,"children":1050},{},[1051,1056],{"type":504,"tag":534,"props":1052,"children":1053},{},[1054],{"type":510,"value":1055},"CSR（Vite SPA） + TanStack Query",{"type":504,"tag":534,"props":1057,"children":1058},{},[1059],{"type":510,"value":1060},"或 Next App Router，但把用户态数据设为强动态（避免缓存一致性坑）",{"type":504,"tag":849,"props":1062,"children":1064},{"id":1063},"_32-内容站资讯博客文档",[1065],{"type":510,"value":1066},"3.2 内容站（资讯、博客、文档）",{"type":504,"tag":516,"props":1068,"children":1069},{},[1070],{"type":510,"value":1024},{"type":504,"tag":530,"props":1072,"children":1073},{},[1074,1079],{"type":504,"tag":534,"props":1075,"children":1076},{},[1077],{"type":510,"value":1078},"SEO 重要",{"type":504,"tag":534,"props":1080,"children":1081},{},[1082],{"type":510,"value":1083},"内容更新频率可控",{"type":504,"tag":516,"props":1085,"children":1086},{},[1087],{"type":510,"value":1047},{"type":504,"tag":530,"props":1089,"children":1090},{},[1091,1096],{"type":504,"tag":534,"props":1092,"children":1093},{},[1094],{"type":510,"value":1095},"SSG（静态生成）",{"type":504,"tag":534,"props":1097,"children":1098},{},[1099],{"type":510,"value":1100},"内容需要按分钟\u002F小时更新：ISR + tag\u002Ftime revalidate",{"type":504,"tag":849,"props":1102,"children":1104},{"id":1103},"_33-商品详情营销页c-端",[1105],{"type":510,"value":1106},"3.3 商品详情\u002F营销页（C 端）",{"type":504,"tag":516,"props":1108,"children":1109},{},[1110],{"type":510,"value":1024},{"type":504,"tag":530,"props":1112,"children":1113},{},[1114,1118,1123],{"type":504,"tag":534,"props":1115,"children":1116},{},[1117],{"type":510,"value":1078},{"type":504,"tag":534,"props":1119,"children":1120},{},[1121],{"type":510,"value":1122},"首屏体验重要",{"type":504,"tag":534,"props":1124,"children":1125},{},[1126],{"type":510,"value":1127},"数据有一定更新频率",{"type":504,"tag":516,"props":1129,"children":1130},{},[1131],{"type":510,"value":1047},{"type":504,"tag":530,"props":1133,"children":1134},{},[1135,1140],{"type":504,"tag":534,"props":1136,"children":1137},{},[1138],{"type":510,"value":1139},"ISR 或 SSR（视更新与个性化程度）",{"type":504,"tag":534,"props":1141,"children":1142},{},[1143],{"type":510,"value":1144},"关键：把缓存一致性策略写清楚（否则“线上怎么不更新”）",{"type":504,"tag":849,"props":1146,"children":1148},{"id":1147},"_34-既要-seo-又要强交互的混合应用",[1149],{"type":510,"value":1150},"3.4 既要 SEO 又要强交互的混合应用",{"type":504,"tag":516,"props":1152,"children":1153},{},[1154],{"type":510,"value":1047},{"type":504,"tag":530,"props":1156,"children":1157},{},[1158],{"type":504,"tag":534,"props":1159,"children":1160},{},[1161,1163],{"type":510,"value":1162},"Next App Router 的“混合模式”：\n",{"type":504,"tag":530,"props":1164,"children":1165},{},[1166,1171],{"type":504,"tag":534,"props":1167,"children":1168},{},[1169],{"type":510,"value":1170},"页面级：RSC\u002FSSR\u002FISR（首屏）",{"type":504,"tag":534,"props":1172,"children":1173},{},[1174],{"type":510,"value":1175},"交互级：Client Components + TanStack Query（局部交互）",{"type":504,"tag":516,"props":1177,"children":1178},{},[1179],{"type":510,"value":1180},"关键约束：",{"type":504,"tag":530,"props":1182,"children":1183},{},[1184],{"type":504,"tag":534,"props":1185,"children":1186},{},[1187],{"type":510,"value":1188},"同一数据域不要被两套缓存系统各自管理（Next fetch cache vs React Query）",{"type":504,"tag":575,"props":1190,"children":1192},{"id":1191},"_4-反模式踩一次就会懂",[1193],{"type":510,"value":1194},"4. 反模式（踩一次就会懂）",{"type":504,"tag":1196,"props":1197,"children":1198},"ol",{},[1199],{"type":504,"tag":534,"props":1200,"children":1201},{},[1202],{"type":504,"tag":522,"props":1203,"children":1204},{},[1205],{"type":510,"value":1206},"为了 SSR 而 SSR",{"type":504,"tag":530,"props":1208,"children":1209},{},[1210],{"type":504,"tag":534,"props":1211,"children":1212},{},[1213],{"type":510,"value":1214},"结果：服务端复杂度暴涨、错误与监控体系跟不上、收益不明显",{"type":504,"tag":1196,"props":1216,"children":1217},{"start":709},[1218],{"type":504,"tag":534,"props":1219,"children":1220},{},[1221],{"type":504,"tag":522,"props":1222,"children":1223},{},[1224],{"type":510,"value":1225},"ISR 没有设计 revalidate 规则",{"type":504,"tag":530,"props":1227,"children":1228},{},[1229],{"type":504,"tag":534,"props":1230,"children":1231},{},[1232],{"type":510,"value":1233},"结果：要么永远不更新，要么更新不一致（多层缓存打架）",{"type":504,"tag":1196,"props":1235,"children":1236},{"start":718},[1237],{"type":504,"tag":534,"props":1238,"children":1239},{},[1240],{"type":504,"tag":522,"props":1241,"children":1242},{},[1243],{"type":510,"value":1244},"用户态数据走了 cache\u002F静态化",{"type":504,"tag":530,"props":1246,"children":1247},{},[1248],{"type":504,"tag":534,"props":1249,"children":1250},{},[1251],{"type":510,"value":1252},"结果：A 用户看到 B 用户数据（严重事故），或权限穿透",{"type":504,"tag":1196,"props":1254,"children":1255},{"start":727},[1256],{"type":504,"tag":534,"props":1257,"children":1258},{},[1259],{"type":504,"tag":522,"props":1260,"children":1261},{},[1262],{"type":510,"value":1263},"忽视 hydration 的成本",{"type":504,"tag":530,"props":1265,"children":1266},{},[1267],{"type":504,"tag":534,"props":1268,"children":1269},{},[1270],{"type":510,"value":1271},"结果：HTML 很快到，但页面很久不能点（INP 变差）",{"type":504,"tag":575,"props":1273,"children":1275},{"id":1274},"_5-checklist落地自检",[1276],{"type":510,"value":1277},"5. Checklist（落地自检）",{"type":504,"tag":530,"props":1279,"children":1282},{"className":1280},[1281],"contains-task-list",[1283,1296,1305,1314,1323,1332],{"type":504,"tag":534,"props":1284,"children":1287},{"className":1285},[1286],"task-list-item",[1288,1294],{"type":504,"tag":1289,"props":1290,"children":1293},"input",{"disabled":1291,"type":1292},true,"checkbox",[],{"type":510,"value":1295}," 这类页面是否需要 SEO？（爬虫是否必须看到真实内容）",{"type":504,"tag":534,"props":1297,"children":1299},{"className":1298},[1286],[1300,1303],{"type":504,"tag":1289,"props":1301,"children":1302},{"disabled":1291,"type":1292},[],{"type":510,"value":1304}," 你优化的目标是什么？TTFB\u002FFCP\u002FLCP 还是 INP\u002F交互？",{"type":504,"tag":534,"props":1306,"children":1308},{"className":1307},[1286],[1309,1312],{"type":504,"tag":1289,"props":1310,"children":1311},{"disabled":1291,"type":1292},[],{"type":510,"value":1313}," 数据更新频率与一致性要求是什么？（强一致\u002F最终一致）",{"type":504,"tag":534,"props":1315,"children":1317},{"className":1316},[1286],[1318,1321],{"type":504,"tag":1289,"props":1319,"children":1320},{"disabled":1291,"type":1292},[],{"type":510,"value":1322}," 是否存在用户态\u002F权限数据？是否会被缓存污染？",{"type":504,"tag":534,"props":1324,"children":1326},{"className":1325},[1286],[1327,1330],{"type":504,"tag":1289,"props":1328,"children":1329},{"disabled":1291,"type":1292},[],{"type":510,"value":1331}," 是否明确了缓存层（CDN \u002F Next Data Cache \u002F Route Cache \u002F Client Cache）？",{"type":504,"tag":534,"props":1333,"children":1335},{"className":1334},[1286],[1336,1339],{"type":504,"tag":1289,"props":1337,"children":1338},{"disabled":1291,"type":1292},[],{"type":510,"value":1340}," 是否能在 dev 与 prod 环境复现一致性问题？（缓存策略是否一致）",{"type":504,"tag":575,"props":1342,"children":1344},{"id":1343},"关联阅读",[1345],{"type":510,"value":1343},{"type":504,"tag":530,"props":1347,"children":1348},{},[1349,1362,1375],{"type":504,"tag":534,"props":1350,"children":1351},{},[1352,1354],{"type":510,"value":1353},"Hydration mismatch 排查：",{"type":504,"tag":625,"props":1355,"children":1356},{"href":627},[1357],{"type":504,"tag":630,"props":1358,"children":1360},{"className":1359},[],[1361],{"type":510,"value":627},{"type":504,"tag":534,"props":1363,"children":1364},{},[1365,1367],{"type":510,"value":1366},"Next 缓存与重验证：",{"type":504,"tag":625,"props":1368,"children":1369},{"href":1001},[1370],{"type":504,"tag":630,"props":1371,"children":1373},{"className":1372},[],[1374],{"type":510,"value":1001},{"type":504,"tag":534,"props":1376,"children":1377},{},[1378,1380],{"type":510,"value":1379},"路由与 URL state（对渲染策略的影响）：",{"type":504,"tag":625,"props":1381,"children":1383},{"href":1382},"..\u002F10-routing-and-navigation\u002F01-routing-and-url-state-mental-model.md",[1384],{"type":504,"tag":630,"props":1385,"children":1387},{"className":1386},[],[1388],{"type":510,"value":1382},{"type":504,"tag":1390,"props":1391,"children":1392},"style",{},[1393],{"type":510,"value":1394},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":691,"searchDepth":709,"depth":709,"links":1396},[1397,1398,1399,1404,1410,1411,1412],{"id":577,"depth":709,"text":580},{"id":637,"depth":709,"text":640},{"id":844,"depth":709,"text":847,"children":1400},[1401,1402,1403],{"id":851,"depth":718,"text":854},{"id":903,"depth":718,"text":906},{"id":948,"depth":718,"text":951},{"id":1010,"depth":709,"text":1013,"children":1405},[1406,1407,1408,1409],{"id":1016,"depth":718,"text":1019},{"id":1063,"depth":718,"text":1066},{"id":1103,"depth":718,"text":1106},{"id":1147,"depth":718,"text":1150},{"id":1191,"depth":709,"text":1194},{"id":1274,"depth":709,"text":1277},{"id":1343,"depth":709,"text":1343},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1414},"\u003Cpath fill=\"currentColor\" d=\"m10.828 12l4.95 4.95l-1.414 1.415L8 12l6.364-6.364l1.414 1.414z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1416},"\u003Cpath fill=\"currentColor\" d=\"M3 4h18v2H3zm0 7h12v2H3zm0 7h18v2H3z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1418},"\u003Cpath fill=\"currentColor\" d=\"m13.172 12l-4.95-4.95l1.414-1.413L16 12l-6.364 6.364l-1.414-1.415z\"\u002F>",{"left":4,"top":4,"width":1420,"height":1420,"rotate":4,"vFlip":6,"hFlip":6,"body":1421},1024,"\u003Cpath fill=\"currentColor\" d=\"M768 832a128 128 0 0 1-128 128H192A128 128 0 0 1 64 832V384a128 128 0 0 1 128-128v64a64 64 0 0 0-64 64v448a64 64 0 0 0 64 64h448a64 64 0 0 0 64-64z\"\u002F>\u003Cpath fill=\"currentColor\" d=\"M384 128a64 64 0 0 0-64 64v448a64 64 0 0 0 64 64h448a64 64 0 0 0 64-64V192a64 64 0 0 0-64-64zm0-64h448a128 128 0 0 1 128 128v448a128 128 0 0 1-128 128H384a128 128 0 0 1-128-128V192A128 128 0 0 1 384 64\"\u002F>"]