Now vibe coding, so learning hammer FE ?https://channel.meo-ai.comhttps://channel.meo-ai.com/posts/647https://channel.meo-ai.com/posts/647Fri, 29 May 2026 23:44:47 GMT<span class="post-title-source">《TanStack Router 与 Query 的最佳实践》</span><br /><br />标签：<a href="/search/result?q=%23%E5%89%8D%E7%AB%AF" title="#前端">#前端</a> <a href="/search/result?q=%23React" title="#React">#React</a> <a href="/search/result?q=%23TanStackQuery" title="#TanStackQuery">#TanStackQuery</a> <a href="/search/result?q=%23TanStackRouter" title="#TanStackRouter">#TanStackRouter</a> <a href="/search/result?q=%23%E6%95%B0%E6%8D%AE%E8%8E%B7%E5%8F%96" title="#数据获取">#数据获取</a> <a href="/search/result?q=%23SSR" title="#SSR">#SSR</a><br /><br />总结：<br />本文详解了 TanStack Router 与 TanStack Query 的集成方案，核心思路是将 Router 的 Loader 视为"预取触发器"，让 Query 接管全局缓存。通过关闭 Router 内置缓存、在 Loader 中预取 Query、组件中使用 useSuspenseQuery 或 useQuery 的组合策略，实现数据尽早获取、避免请求瀑布，同时兼容 SSR 流式渲染。作者强调始终使用 Query Hooks 而非 useLoaderData 获取数据，以维持自动重取、缓存失效和垃圾回收的正常运作。<br /><br />文章要点：<br />1. Router 自带缓存仅限单路由，Query 缓存全局可跨路由共享，更适合多路由共用数据场景<br />2. 在 Loader 中预取 Query 能让请求在组件渲染前甚至 JS 加载前就开始，配合 prefetch:'intent' 还能实现悬停预加载<br />3. 关闭 Router 缓存（defaultPreloadStaleTime: 0）避免与 Query 缓存冲突，让 Query 独掌缓存策略<br />4. 推荐用 useSuspenseQuery 配合 Router 的默认 Error/Pending 边界，组件只需专注"阳光路径"<br />5. Loader 中不 await 更灵活：useSuspenseQuery 实现阻塞加载，useQuery 实现延迟加载，由组件自主决定<br />6. SSR 场景下 useSuspenseQuery 更友好，支持流式渐进渲染；useQuery 需在 Loader 中 await 否则服务端无 markup<br />7. 切勿用 useLoaderData 替代 Query Hooks，否则会导致自动重取、失效刷新和垃圾回收全部失效<br />8. 将 Loader 视为"事件处理器"——只负责触发预取、不返回数据，是渐进优化性能的好心智模型<br /><br />URL：<a href="https://tkdodo.eu/blog/tan-stack-router-and-query" target="_blank" rel="noopener" title="https://tkdodo.eu/blog/tan-stack-router-and-query">https://tkdodo.eu/blog/tan-stack-router-and-query</a><a class="tgme_widget_message_link_preview" href="https://tkdodo.eu/blog/tan-stack-router-and-query" target="_blank" rel="noopener" title="TanStack Router has a built-in cache, so why would we need TanStack Query? There are, of course, reasons ..."> <div class="link_preview_site_name accent_color">tkdodo.eu</div> <img class="link_preview_image" alt="TanStack Router and Query" src="/static/https://cdn4.telesco.pe/file/btImzWDCsgmkqJ3KaJOgX-Bea9HEVbTjgGD2m7VH9P3_OJYSOfVsHCNhl8ZmvhLoLfhFHPs6oe89aM1Sf26XGRX4h6PPyhTBKSmcqHEjAHmLCCOrQGOsbjib7hzeVb7zfvX85tL0k7NpAaKMTLpeW2InaBPh1zwjO-XJcYjFFscQw4og0qBKMbbw6r_xd1kYbUooDKQgy2aobNQbxC2Y6oyiRNqjYuoQXygbXYITQLm35ff8C3lHvYfTpCih6PXkV-3bzp1MgVyttjjLC8MwGdmXklMsQ3UOU2KRUN6bK3XrRsKXlT_ivGlSS6mcEokiW3IepbCToSDo_i18-Eqr6g.jpg" width="1200" height="630" loading="eager" /> <div class="link_preview_title">TanStack Router and Query</div> <div class="link_preview_description">TanStack Router has a built-in cache, so why would we need TanStack Query? There are, of course, reasons ...</div> </a>