[{"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-10-routing-and-navigation\u002F03-next-app-router-segments-layout-loading-error-not-found-prefetch":494,"i-ri:arrow-left-s-line":1450,"i-ri:menu-2-line":1452,"i-ri:arrow-right-s-line":1454},{"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":375,"path":375,"title":376,"updatedAt":21,"meta":498,"body":500,"toc":1415},"bm90ZTpub3Rlcy9yZWFjdC8xMC1yb3V0aW5nLWFuZC1uYXZpZ2F0aW9uLzAzLW5leHQtYXBwLXJvdXRlci1zZWdtZW50cy1sYXlvdXQtbG9hZGluZy1lcnJvci1ub3QtZm91bmQtcHJlZmV0Y2gubWQ","note","notes\u002Freact\u002F10-routing-and-navigation\u002F03-next-app-router-segments-layout-loading-error-not-found-prefetch.md",{"id":495,"type":496,"sourcePath":497,"slug":499,"title":376,"updatedAt":21,"lastUpdated":21},"react\u002F10-routing-and-navigation\u002F03-next-app-router-segments-layout-loading-error-not-found-prefetch",{"type":501,"children":502},"root",[503,511,553,560,565,651,666,672,679,734,739,753,759,802,808,814,832,838,862,870,876,882,887,897,935,941,954,962,968,981,1007,1013,1056,1064,1070,1083,1104,1110,1123,1129,1135,1148,1161,1166,1179,1185,1218,1226,1232,1237,1257,1262,1285,1290,1296,1350,1355],{"type":504,"tag":505,"props":506,"children":508},"element","h1",{"id":507},"nextjs-app-routersegments-layouts-loading-error-notfound-prefetch落地篇",[509],{"type":510,"value":376},"text",{"type":504,"tag":512,"props":513,"children":514},"blockquote",{},[515],{"type":504,"tag":516,"props":517,"children":518},"p",{},[519,521,527,529,536,538,544,546,551],{"type":510,"value":520},"一句话结论：在 App Router 体系下，路由不是“匹配 URL → 渲染组件”这么简单，而是",{"type":504,"tag":522,"props":523,"children":524},"strong",{},[525],{"type":510,"value":526},"用 segment tree（分段树）组织 UI 与数据边界",{"type":510,"value":528},"：",{"type":504,"tag":530,"props":531,"children":533},"code",{"className":532},[],[534],{"type":510,"value":535},"layout\u002Fpage",{"type":510,"value":537}," 决定可复用的壳，",{"type":504,"tag":530,"props":539,"children":541},{"className":540},[],[542],{"type":510,"value":543},"loading\u002Ferror\u002Fnot-found",{"type":510,"value":545}," 决定“等\u002F错\u002F无”的兜底策略；当你把这些边界与 Next 的 ",{"type":504,"tag":522,"props":547,"children":548},{},[549],{"type":510,"value":550},"prefetch + fetch 缓存\u002F重验证",{"type":510,"value":552}," 一起设计，才能避免“切页白屏、局部闪烁、线上不更新”等生产事故。",{"type":504,"tag":554,"props":555,"children":557},"h2",{"id":556},"_0-先把-app-router-当成树来看",[558],{"type":510,"value":559},"0. 先把 App Router 当成“树”来看",{"type":504,"tag":516,"props":561,"children":562},{},[563],{"type":510,"value":564},"App Router 的关键不是某个 API，而是它的组织方式：",{"type":504,"tag":566,"props":567,"children":568},"ul",{},[569,588],{"type":504,"tag":570,"props":571,"children":572},"li",{},[573,575,581,583],{"type":510,"value":574},"URL path 会映射到 ",{"type":504,"tag":530,"props":576,"children":578},{"className":577},[],[579],{"type":510,"value":580},"app\u002F",{"type":510,"value":582}," 目录下的一棵 ",{"type":504,"tag":522,"props":584,"children":585},{},[586],{"type":510,"value":587},"segment tree",{"type":504,"tag":570,"props":589,"children":590},{},[591,593],{"type":510,"value":592},"每个 segment 可以定义：\n",{"type":504,"tag":566,"props":594,"children":595},{},[596,607,618,629,640],{"type":504,"tag":570,"props":597,"children":598},{},[599,605],{"type":504,"tag":530,"props":600,"children":602},{"className":601},[],[603],{"type":510,"value":604},"layout.tsx",{"type":510,"value":606},"：这一段及其子树共享的 UI 壳（导航栏、侧边栏、权限壳）",{"type":504,"tag":570,"props":608,"children":609},{},[610,616],{"type":504,"tag":530,"props":611,"children":613},{"className":612},[],[614],{"type":510,"value":615},"page.tsx",{"type":510,"value":617},"：这一段的页面入口",{"type":504,"tag":570,"props":619,"children":620},{},[621,627],{"type":504,"tag":530,"props":622,"children":624},{"className":623},[],[625],{"type":510,"value":626},"loading.tsx",{"type":510,"value":628},"：这段树在加载时的 fallback（通常是 skeleton）",{"type":504,"tag":570,"props":630,"children":631},{},[632,638],{"type":504,"tag":530,"props":633,"children":635},{"className":634},[],[636],{"type":510,"value":637},"error.tsx",{"type":510,"value":639},"：这段树的错误边界（Client Component）",{"type":504,"tag":570,"props":641,"children":642},{},[643,649],{"type":504,"tag":530,"props":644,"children":646},{"className":645},[],[647],{"type":510,"value":648},"not-found.tsx",{"type":510,"value":650},"：这段树的“资源不存在”边界",{"type":504,"tag":512,"props":652,"children":653},{},[654],{"type":504,"tag":516,"props":655,"children":656},{},[657,659,664],{"type":510,"value":658},"你可以把它理解为：",{"type":504,"tag":522,"props":660,"children":661},{},[662],{"type":510,"value":663},"路由 = UI 边界树 + 数据边界树",{"type":510,"value":665},"。",{"type":504,"tag":554,"props":667,"children":669},{"id":668},"_1-segments用分段表达信息架构",[670],{"type":510,"value":671},"1. Segments：用“分段”表达信息架构",{"type":504,"tag":673,"props":674,"children":676},"h3",{"id":675},"_11-什么是-segment",[677],{"type":510,"value":678},"1.1 什么是 segment？",{"type":504,"tag":566,"props":680,"children":681},{},[682,709],{"type":504,"tag":570,"props":683,"children":684},{},[685,691,693,699,701,707],{"type":504,"tag":530,"props":686,"children":688},{"className":687},[],[689],{"type":510,"value":690},"app\u002Fdashboard\u002Fsettings\u002Fpage.tsx",{"type":510,"value":692}," 中的 ",{"type":504,"tag":530,"props":694,"children":696},{"className":695},[],[697],{"type":510,"value":698},"dashboard",{"type":510,"value":700},"、",{"type":504,"tag":530,"props":702,"children":704},{"className":703},[],[705],{"type":510,"value":706},"settings",{"type":510,"value":708}," 都是 segment",{"type":504,"tag":570,"props":710,"children":711},{},[712,714,720,721,727,728],{"type":510,"value":713},"动态段：",{"type":504,"tag":530,"props":715,"children":717},{"className":716},[],[718],{"type":510,"value":719},"[id]",{"type":510,"value":700},{"type":504,"tag":530,"props":722,"children":724},{"className":723},[],[725],{"type":510,"value":726},"[...slug]",{"type":510,"value":700},{"type":504,"tag":530,"props":729,"children":731},{"className":730},[],[732],{"type":510,"value":733},"[[...slug]]",{"type":504,"tag":516,"props":735,"children":736},{},[737],{"type":510,"value":738},"它承载两个含义：",{"type":504,"tag":740,"props":741,"children":742},"ol",{},[743,748],{"type":504,"tag":570,"props":744,"children":745},{},[746],{"type":510,"value":747},"URL 的语义结构（信息架构）",{"type":504,"tag":570,"props":749,"children":750},{},[751],{"type":510,"value":752},"UI 与边界的复用层级（哪些页面共享同一层 layout \u002F loading \u002F error）",{"type":504,"tag":673,"props":754,"children":756},{"id":755},"_12-结构建议架构师视角",[757],{"type":510,"value":758},"1.2 结构建议（架构师视角）",{"type":504,"tag":566,"props":760,"children":761},{},[762,787,797],{"type":504,"tag":570,"props":763,"children":764},{},[765,767,773,774,780,781],{"type":510,"value":766},"先用业务域拆 segment：",{"type":504,"tag":530,"props":768,"children":770},{"className":769},[],[771],{"type":510,"value":772},"\u002Forders\u002F*",{"type":510,"value":700},{"type":504,"tag":530,"props":775,"children":777},{"className":776},[],[778],{"type":510,"value":779},"\u002Fusers\u002F*",{"type":510,"value":700},{"type":504,"tag":530,"props":782,"children":784},{"className":783},[],[785],{"type":510,"value":786},"\u002Fproducts\u002F*",{"type":504,"tag":570,"props":788,"children":789},{},[790,795],{"type":504,"tag":522,"props":791,"children":792},{},[793],{"type":510,"value":794},"把“壳”放在 layout",{"type":510,"value":796},"，把“内容”放在 page",{"type":504,"tag":570,"props":798,"children":799},{},[800],{"type":510,"value":801},"把鉴权\u002F错误\u002F加载边界尽量下沉到合适的业务域 segment（避免全局一刀切）",{"type":504,"tag":554,"props":803,"children":805},{"id":804},"_2-layout稳定-shell-是体验与可维护性的核心",[806],{"type":510,"value":807},"2. Layout：稳定 Shell 是体验与可维护性的核心",{"type":504,"tag":673,"props":809,"children":811},{"id":810},"_21-layout-的价值",[812],{"type":510,"value":813},"2.1 layout 的价值",{"type":504,"tag":566,"props":815,"children":816},{},[817,822,827],{"type":504,"tag":570,"props":818,"children":819},{},[820],{"type":510,"value":821},"复用页面壳：导航栏、侧边栏、面包屑",{"type":504,"tag":570,"props":823,"children":824},{},[825],{"type":510,"value":826},"让导航时“壳不动、内容换”，减少切页闪屏",{"type":504,"tag":570,"props":828,"children":829},{},[830],{"type":510,"value":831},"给错误\u002F加载边界提供更好的分层（局部失败不拖垮整站）",{"type":504,"tag":673,"props":833,"children":835},{"id":834},"_22-layout-vs-template了解即可",[836],{"type":510,"value":837},"2.2 layout vs template（了解即可）",{"type":504,"tag":566,"props":839,"children":840},{},[841,851],{"type":504,"tag":570,"props":842,"children":843},{},[844,849],{"type":504,"tag":530,"props":845,"children":847},{"className":846},[],[848],{"type":510,"value":604},{"type":510,"value":850},"：跨导航复用（状态可保留）",{"type":504,"tag":570,"props":852,"children":853},{},[854,860],{"type":504,"tag":530,"props":855,"children":857},{"className":856},[],[858],{"type":510,"value":859},"template.tsx",{"type":510,"value":861},"：每次导航都会重新创建（更像“每次都重置”）",{"type":504,"tag":512,"props":863,"children":864},{},[865],{"type":504,"tag":516,"props":866,"children":867},{},[868],{"type":510,"value":869},"大多数业务用 layout 足够；只有当你明确需要“每次进来都重置状态”才用 template。",{"type":504,"tag":554,"props":871,"children":873},{"id":872},"_3-loading把等变成可控的骨架分层",[874],{"type":510,"value":875},"3. Loading：把“等”变成可控的骨架分层",{"type":504,"tag":673,"props":877,"children":879},{"id":878},"_31-为什么-loadingtsx-很关键",[880],{"type":510,"value":881},"3.1 为什么 loading.tsx 很关键？",{"type":504,"tag":516,"props":883,"children":884},{},[885],{"type":510,"value":886},"App Router 下，很多数据获取发生在 Server Components（RSC）里。只要某个 segment 树在等待数据，它就需要一个“等”的 UI。",{"type":504,"tag":516,"props":888,"children":889},{},[890,895],{"type":504,"tag":530,"props":891,"children":893},{"className":892},[],[894],{"type":510,"value":626},{"type":510,"value":896}," 的价值在于：",{"type":504,"tag":566,"props":898,"children":899},{},[900,918],{"type":504,"tag":570,"props":901,"children":902},{},[903,905,910,912],{"type":510,"value":904},"它把等待变成",{"type":504,"tag":522,"props":906,"children":907},{},[908],{"type":510,"value":909},"显式边界",{"type":510,"value":911},"，而不是组件里到处 ",{"type":504,"tag":530,"props":913,"children":915},{"className":914},[],[916],{"type":510,"value":917},"if (isLoading)",{"type":504,"tag":570,"props":919,"children":920},{},[921,923,928,930],{"type":510,"value":922},"它天然适合做",{"type":504,"tag":522,"props":924,"children":925},{},[926],{"type":510,"value":927},"页面壳 skeleton",{"type":510,"value":929}," 或 ",{"type":504,"tag":522,"props":931,"children":932},{},[933],{"type":510,"value":934},"局部区块 skeleton",{"type":504,"tag":673,"props":936,"children":938},{"id":937},"_32-工程建议优先保证稳定壳再做局部骨架",[939],{"type":510,"value":940},"3.2 工程建议：优先保证稳定壳，再做局部骨架",{"type":504,"tag":566,"props":942,"children":943},{},[944,949],{"type":504,"tag":570,"props":945,"children":946},{},[947],{"type":510,"value":948},"全局\u002F高层 layout：尽量稳定（不要在 loading 时整页换壳）",{"type":504,"tag":570,"props":950,"children":951},{},[952],{"type":510,"value":953},"列表\u002F详情等区域：在更低层 segment 做 skeleton",{"type":504,"tag":512,"props":955,"children":956},{},[957],{"type":504,"tag":516,"props":958,"children":959},{},[960],{"type":510,"value":961},"经验：Skeleton 的层级越合理，用户感知越“快”。",{"type":504,"tag":554,"props":963,"children":965},{"id":964},"_4-error错误边界要能兜底-能上报-能恢复",[966],{"type":510,"value":967},"4. Error：错误边界要“能兜底 + 能上报 + 能恢复”",{"type":504,"tag":673,"props":969,"children":971},{"id":970},"_41-errortsx-是什么",[972,974,979],{"type":510,"value":973},"4.1 ",{"type":504,"tag":530,"props":975,"children":977},{"className":976},[],[978],{"type":510,"value":637},{"type":510,"value":980}," 是什么？",{"type":504,"tag":566,"props":982,"children":983},{},[984,989],{"type":504,"tag":570,"props":985,"children":986},{},[987],{"type":510,"value":988},"它是 segment 级错误边界",{"type":504,"tag":570,"props":990,"children":991},{},[992,997,999,1005],{"type":504,"tag":522,"props":993,"children":994},{},[995],{"type":510,"value":996},"它必须是 Client Component",{"type":510,"value":998},"（通常要加 ",{"type":504,"tag":530,"props":1000,"children":1002},{"className":1001},[],[1003],{"type":510,"value":1004},"\"use client\"",{"type":510,"value":1006},"）",{"type":504,"tag":673,"props":1008,"children":1010},{"id":1009},"_42-设计要点",[1011],{"type":510,"value":1012},"4.2 设计要点",{"type":504,"tag":566,"props":1014,"children":1015},{},[1016,1021,1033],{"type":504,"tag":570,"props":1017,"children":1018},{},[1019],{"type":510,"value":1020},"给用户一个可理解的错误信息（不是白屏）",{"type":504,"tag":570,"props":1022,"children":1023},{},[1024,1026,1032],{"type":510,"value":1025},"提供重试（调用 ",{"type":504,"tag":530,"props":1027,"children":1029},{"className":1028},[],[1030],{"type":510,"value":1031},"reset()",{"type":510,"value":1006},{"type":504,"tag":570,"props":1034,"children":1035},{},[1036,1038],{"type":510,"value":1037},"上报（Sentry\u002F自研）要带：\n",{"type":504,"tag":566,"props":1039,"children":1040},{},[1041,1046,1051],{"type":504,"tag":570,"props":1042,"children":1043},{},[1044],{"type":510,"value":1045},"route 信息（segment\u002Fpath\u002FsearchParams）",{"type":504,"tag":570,"props":1047,"children":1048},{},[1049],{"type":510,"value":1050},"release\u002Fversion",{"type":504,"tag":570,"props":1052,"children":1053},{},[1054],{"type":510,"value":1055},"traceId（如果你有全链路）",{"type":504,"tag":512,"props":1057,"children":1058},{},[1059],{"type":504,"tag":516,"props":1060,"children":1061},{},[1062],{"type":510,"value":1063},"这里的上报策略会在“生产可用性”章节展开。",{"type":504,"tag":554,"props":1065,"children":1067},{"id":1066},"_5-not-found把无数据无权限真-404区分开",[1068],{"type":510,"value":1069},"5. Not Found：把“无数据\u002F无权限\u002F真 404”区分开",{"type":504,"tag":673,"props":1071,"children":1073},{"id":1072},"_51-not-foundtsx-的定位",[1074,1076,1081],{"type":510,"value":1075},"5.1 ",{"type":504,"tag":530,"props":1077,"children":1079},{"className":1078},[],[1080],{"type":510,"value":648},{"type":510,"value":1082}," 的定位",{"type":504,"tag":566,"props":1084,"children":1085},{},[1086,1091],{"type":504,"tag":570,"props":1087,"children":1088},{},[1089],{"type":510,"value":1090},"表达“资源不存在”或“无法访问该资源（以 404 语义呈现）”",{"type":504,"tag":570,"props":1092,"children":1093},{},[1094,1096,1102],{"type":510,"value":1095},"通常用于详情页：",{"type":504,"tag":530,"props":1097,"children":1099},{"className":1098},[],[1100],{"type":510,"value":1101},"\u002Fposts\u002F[id]",{"type":510,"value":1103}," 找不到",{"type":504,"tag":673,"props":1105,"children":1107},{"id":1106},"_52-常见误区",[1108],{"type":510,"value":1109},"5.2 常见误区",{"type":504,"tag":566,"props":1111,"children":1112},{},[1113,1118],{"type":504,"tag":570,"props":1114,"children":1115},{},[1116],{"type":510,"value":1117},"把所有错误都丢到 not-found：会导致监控缺失（500 被当成 404）",{"type":504,"tag":570,"props":1119,"children":1120},{},[1121],{"type":510,"value":1122},"把鉴权失败当成 not-found：要看业务（安全考虑可隐藏资源存在性，但要把错误上报到监控）",{"type":504,"tag":554,"props":1124,"children":1126},{"id":1125},"_6-prefetchnext-的预取默认很强但要理解边界",[1127],{"type":510,"value":1128},"6. Prefetch：Next 的预取默认很强，但要理解边界",{"type":504,"tag":673,"props":1130,"children":1132},{"id":1131},"_61-link-预取",[1133],{"type":510,"value":1134},"6.1 Link 预取",{"type":504,"tag":516,"props":1136,"children":1137},{},[1138,1140,1146],{"type":510,"value":1139},"Next 的 ",{"type":504,"tag":530,"props":1141,"children":1143},{"className":1142},[],[1144],{"type":510,"value":1145},"\u003CLink \u002F>",{"type":510,"value":1147}," 默认可能会预取：",{"type":504,"tag":566,"props":1149,"children":1150},{},[1151,1156],{"type":504,"tag":570,"props":1152,"children":1153},{},[1154],{"type":510,"value":1155},"目标路由的 RSC payload",{"type":504,"tag":570,"props":1157,"children":1158},{},[1159],{"type":510,"value":1160},"相关静态资源",{"type":504,"tag":516,"props":1162,"children":1163},{},[1164],{"type":510,"value":1165},"这会带来：",{"type":504,"tag":566,"props":1167,"children":1168},{},[1169,1174],{"type":504,"tag":570,"props":1170,"children":1171},{},[1172],{"type":510,"value":1173},"导航更快",{"type":504,"tag":570,"props":1175,"children":1176},{},[1177],{"type":510,"value":1178},"但也可能带来：带宽压力、数据提前拉取（与权限\u002F个性化有关）",{"type":504,"tag":673,"props":1180,"children":1182},{"id":1181},"_62-预取策略的工程化建议",[1183],{"type":510,"value":1184},"6.2 预取策略的工程化建议",{"type":504,"tag":566,"props":1186,"children":1187},{},[1188,1193],{"type":504,"tag":570,"props":1189,"children":1190},{},[1191],{"type":510,"value":1192},"对“命中率高”的导航（主流程）保持默认预取",{"type":504,"tag":570,"props":1194,"children":1195},{},[1196,1198],{"type":510,"value":1197},"对“命中率低\u002F代价高”的路由：\n",{"type":504,"tag":566,"props":1199,"children":1200},{},[1201,1213],{"type":504,"tag":570,"props":1202,"children":1203},{},[1204,1206,1212],{"type":510,"value":1205},"降低预取（按 Next 版本能力调整 ",{"type":504,"tag":530,"props":1207,"children":1209},{"className":1208},[],[1210],{"type":510,"value":1211},"prefetch",{"type":510,"value":1006},{"type":504,"tag":570,"props":1214,"children":1215},{},[1216],{"type":510,"value":1217},"或把数据获取延后到进入页面后（避免无效请求）",{"type":504,"tag":512,"props":1219,"children":1220},{},[1221],{"type":504,"tag":516,"props":1222,"children":1223},{},[1224],{"type":510,"value":1225},"注意：预取不是越多越好，它是预算问题。",{"type":504,"tag":554,"props":1227,"children":1229},{"id":1228},"_7-与数据获取缓存的关系先给边界细节放到第-12-章",[1230],{"type":510,"value":1231},"7. 与数据获取\u002F缓存的关系（先给边界，细节放到第 12 章）",{"type":504,"tag":516,"props":1233,"children":1234},{},[1235],{"type":510,"value":1236},"在 App Router 下，你会遇到两套“像缓存”的东西：",{"type":504,"tag":566,"props":1238,"children":1239},{},[1240,1252],{"type":504,"tag":570,"props":1241,"children":1242},{},[1243,1244,1250],{"type":510,"value":1139},{"type":504,"tag":530,"props":1245,"children":1247},{"className":1246},[],[1248],{"type":510,"value":1249},"fetch",{"type":510,"value":1251}," 缓存\u002F重验证（框架级，影响线上是否更新）",{"type":504,"tag":570,"props":1253,"children":1254},{},[1255],{"type":510,"value":1256},"客户端的缓存（例如 TanStack Query，偏交互级）",{"type":504,"tag":516,"props":1258,"children":1259},{},[1260],{"type":510,"value":1261},"架构建议（先立边界）：",{"type":504,"tag":566,"props":1263,"children":1264},{},[1265,1275],{"type":504,"tag":570,"props":1266,"children":1267},{},[1268,1273],{"type":504,"tag":522,"props":1269,"children":1270},{},[1271],{"type":510,"value":1272},"首屏\u002F页面级数据",{"type":510,"value":1274},"：更倾向于 Server Components + Next 缓存\u002F重验证",{"type":504,"tag":570,"props":1276,"children":1277},{},[1278,1283],{"type":504,"tag":522,"props":1279,"children":1280},{},[1281],{"type":510,"value":1282},"强交互数据",{"type":510,"value":1284},"（筛选、无限滚动、局部刷新）：更倾向于 Client Components + TanStack Query",{"type":504,"tag":516,"props":1286,"children":1287},{},[1288],{"type":510,"value":1289},"不要让同一数据域同时被两套缓存系统“各自为政”。",{"type":504,"tag":554,"props":1291,"children":1293},{"id":1292},"_8-checklist",[1294],{"type":510,"value":1295},"8. Checklist",{"type":504,"tag":566,"props":1297,"children":1300},{"className":1298},[1299],"contains-task-list",[1301,1314,1323,1332,1341],{"type":504,"tag":570,"props":1302,"children":1305},{"className":1303},[1304],"task-list-item",[1306,1312],{"type":504,"tag":1307,"props":1308,"children":1311},"input",{"disabled":1309,"type":1310},true,"checkbox",[],{"type":510,"value":1313}," segment tree 是否能表达清晰的信息架构（业务域分层）？",{"type":504,"tag":570,"props":1315,"children":1317},{"className":1316},[1304],[1318,1321],{"type":504,"tag":1307,"props":1319,"children":1320},{"disabled":1309,"type":1310},[],{"type":510,"value":1322}," 是否存在稳定 shell（layout）来避免切页闪屏？",{"type":504,"tag":570,"props":1324,"children":1326},{"className":1325},[1304],[1327,1330],{"type":504,"tag":1307,"props":1328,"children":1329},{"disabled":1309,"type":1310},[],{"type":510,"value":1331}," loading\u002Ferror\u002Fnot-found 是否分层（局部失败不拖垮整站）？",{"type":504,"tag":570,"props":1333,"children":1335},{"className":1334},[1304],[1336,1339],{"type":504,"tag":1307,"props":1337,"children":1338},{"disabled":1309,"type":1310},[],{"type":510,"value":1340}," 是否理解 prefetch 的收益与成本，并有预算策略？",{"type":504,"tag":570,"props":1342,"children":1344},{"className":1343},[1304],[1345,1348],{"type":504,"tag":1307,"props":1346,"children":1347},{"disabled":1309,"type":1310},[],{"type":510,"value":1349}," 数据获取边界是否明确（RSC vs Client Query），避免双重缓存真相？",{"type":504,"tag":554,"props":1351,"children":1353},{"id":1352},"关联阅读",[1354],{"type":510,"value":1352},{"type":504,"tag":566,"props":1356,"children":1357},{},[1358,1373,1387,1401],{"type":504,"tag":570,"props":1359,"children":1360},{},[1361,1363],{"type":510,"value":1362},"路由与 URL state 心智模型：",{"type":504,"tag":1364,"props":1365,"children":1367},"a",{"href":1366},".\u002F01-routing-and-url-state-mental-model.md",[1368],{"type":504,"tag":530,"props":1369,"children":1371},{"className":1370},[],[1372],{"type":510,"value":1366},{"type":504,"tag":570,"props":1374,"children":1375},{},[1376,1378],{"type":510,"value":1377},"TanStack Router 落地（对照）：",{"type":504,"tag":1364,"props":1379,"children":1381},{"href":1380},".\u002F02-tanstack-router-route-tree-search-loader-prefetch.md",[1382],{"type":504,"tag":530,"props":1383,"children":1385},{"className":1384},[],[1386],{"type":510,"value":1380},{"type":504,"tag":570,"props":1388,"children":1389},{},[1390,1392],{"type":510,"value":1391},"TanStack Query 与缓存一致性：",{"type":504,"tag":1364,"props":1393,"children":1395},{"href":1394},"..\u002F11-data-layer\u002F02-tanstack-query-caching-and-invalidation.md",[1396],{"type":504,"tag":530,"props":1397,"children":1399},{"className":1398},[],[1400],{"type":510,"value":1394},{"type":504,"tag":570,"props":1402,"children":1403},{},[1404,1406],{"type":510,"value":1405},"渲染与交付（Hydration\u002FNext 缓存事故）：",{"type":504,"tag":1364,"props":1407,"children":1409},{"href":1408},"..\u002F12-rendering-and-delivery\u002FREADME.md",[1410],{"type":504,"tag":530,"props":1411,"children":1413},{"className":1412},[],[1414],{"type":510,"value":1408},{"title":1416,"searchDepth":1417,"depth":1417,"links":1418},"",2,[1419,1420,1425,1429,1433,1438,1443,1447,1448,1449],{"id":556,"depth":1417,"text":559},{"id":668,"depth":1417,"text":671,"children":1421},[1422,1424],{"id":675,"depth":1423,"text":678},3,{"id":755,"depth":1423,"text":758},{"id":804,"depth":1417,"text":807,"children":1426},[1427,1428],{"id":810,"depth":1423,"text":813},{"id":834,"depth":1423,"text":837},{"id":872,"depth":1417,"text":875,"children":1430},[1431,1432],{"id":878,"depth":1423,"text":881},{"id":937,"depth":1423,"text":940},{"id":964,"depth":1417,"text":967,"children":1434},[1435,1437],{"id":970,"depth":1423,"text":1436},"4.1 error.tsx 是什么？",{"id":1009,"depth":1423,"text":1012},{"id":1066,"depth":1417,"text":1069,"children":1439},[1440,1442],{"id":1072,"depth":1423,"text":1441},"5.1 not-found.tsx 的定位",{"id":1106,"depth":1423,"text":1109},{"id":1125,"depth":1417,"text":1128,"children":1444},[1445,1446],{"id":1131,"depth":1423,"text":1134},{"id":1181,"depth":1423,"text":1184},{"id":1228,"depth":1417,"text":1231},{"id":1292,"depth":1417,"text":1295},{"id":1352,"depth":1417,"text":1352},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1451},"\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":1453},"\u003Cpath fill=\"currentColor\" d=\"M3 4h18v2H3zm0 7h12v2H3zm0 7h18v2H3z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1455},"\u003Cpath fill=\"currentColor\" d=\"m13.172 12l-4.95-4.95l1.414-1.413L16 12l-6.364 6.364l-1.414-1.415z\"\u002F>"]