Now vibe coding, so learning hammer FE ?
《TanStack Router 与 Query 的最佳实践》
标签：#前端 #React #TanStackQuery #TanStackRouter #数据获取 #SSR
总结：
本文详解了 TanStack Router 与 TanStack Query 的集成方案，核心思路是将 Router 的 Loader 视为"预取触发器"，让 Query 接管全局缓存。通过关闭 Router 内置缓存、在 Loader 中预取 Query、组件中使用 useSuspenseQuery 或 useQuery 的组合策略，实现数据尽早获取、避免请求瀑布，同时兼容 SSR 流式渲染。作者强调始终使用 Query Hooks 而非 useLoaderData 获取数据，以维持自动重取、缓存失效和垃圾回收的正常运作。
文章要点：
1. Router 自带缓存仅限单路由，Query 缓存全局可跨路由共享，更适合多路由共用数据场景
2. 在 Loader 中预取 Query 能让请求在组件渲染前甚至 JS 加载前就开始，配合 prefetch:'intent' 还能实现悬停预加载
3. 关闭 Router 缓存（defaultPreloadStaleTime: 0）避免与 Query 缓存冲突，让 Query 独掌缓存策略
4. 推荐用 useSuspenseQuery 配合 Router 的默认 Error/Pending 边界，组件只需专注"阳光路径"
5. Loader 中不 await 更灵活：useSuspenseQuery 实现阻塞加载，useQuery 实现延迟加载，由组件自主决定
6. SSR 场景下 useSuspenseQuery 更友好，支持流式渐进渲染；useQuery 需在 Loader 中 await 否则服务端无 markup
7. 切勿用 useLoaderData 替代 Query Hooks，否则会导致自动重取、失效刷新和垃圾回收全部失效
8. 将 Loader 视为"事件处理器"——只负责触发预取、不返回数据，是渐进优化性能的好心智模型
URL：https://tkdodo.eu/blog/tan-stack-router-and-query
标签：#前端 #React #TanStackQuery #TanStackRouter #数据获取 #SSR
总结：
本文详解了 TanStack Router 与 TanStack Query 的集成方案，核心思路是将 Router 的 Loader 视为"预取触发器"，让 Query 接管全局缓存。通过关闭 Router 内置缓存、在 Loader 中预取 Query、组件中使用 useSuspenseQuery 或 useQuery 的组合策略，实现数据尽早获取、避免请求瀑布，同时兼容 SSR 流式渲染。作者强调始终使用 Query Hooks 而非 useLoaderData 获取数据，以维持自动重取、缓存失效和垃圾回收的正常运作。
文章要点：
1. Router 自带缓存仅限单路由，Query 缓存全局可跨路由共享，更适合多路由共用数据场景
2. 在 Loader 中预取 Query 能让请求在组件渲染前甚至 JS 加载前就开始，配合 prefetch:'intent' 还能实现悬停预加载
3. 关闭 Router 缓存（defaultPreloadStaleTime: 0）避免与 Query 缓存冲突，让 Query 独掌缓存策略
4. 推荐用 useSuspenseQuery 配合 Router 的默认 Error/Pending 边界，组件只需专注"阳光路径"
5. Loader 中不 await 更灵活：useSuspenseQuery 实现阻塞加载，useQuery 实现延迟加载，由组件自主决定
6. SSR 场景下 useSuspenseQuery 更友好，支持流式渐进渲染；useQuery 需在 Loader 中 await 否则服务端无 markup
7. 切勿用 useLoaderData 替代 Query Hooks，否则会导致自动重取、失效刷新和垃圾回收全部失效
8. 将 Loader 视为"事件处理器"——只负责触发预取、不返回数据，是渐进优化性能的好心智模型
URL：https://tkdodo.eu/blog/tan-stack-router-and-query
tkdodo.eu
TanStack Router and Query
TanStack Router has a built-in cache, so why would we need TanStack Query? There are, of course, reasons ...
《利用浏览器Canvas进行数据压缩》
标签：#前端 #JavaScript #CanvasAPI #数据压缩 #PNG编码 #浏览器兼容性 #SPA
总结：本文介绍了一种利用浏览器Canvas API将任意数据压缩为PNG图像格式的技术方案。通过将字节数据编码为像素颜色值并生成PNG图像，可以间接调用浏览器内置的压缩算法，实现无需外部依赖的数据压缩。该方法特别适用于需要在旧版浏览器中压缩数据、或需要将SPA状态序列化到URL中的场景，提供了Compression Streams API不可用时的替代方案。
文章要点：
- 背景需求：在静态网站和SPA中，有时需要将状态数据序列化到URL hash中，因此需要前端数据压缩方案；虽然2023年5月后Compression Streams API已普及，但旧版浏览器仍需替代方案
- 核心原理：浏览器内置了优化的压缩库用于HTTP请求和图片处理，通过将数据编码为PNG像素数据，可间接利用浏览器的无损压缩能力
- 技术实现：将Uint8Array数据按RGB通道编码到Canvas像素中（首字节存储最后一像素的有效字节数），Alpha通道固定为255以确保跨浏览器一致性，最终通过toDataURL("image/png")获取base64编码的压缩数据
- 解压流程：异步加载生成的PNG图片，读取像素数据后过滤Alpha通道，根据首字节指示的有效长度提取原始字节数据
- 方案特点：即使考虑PNG格式开销，压缩后的数据通常仍小于原始数据；完全基于浏览器原生API，无需外部库依赖
- 应用场景：旧浏览器兼容性支持、URL状态序列化、纯前端数据压缩需求
文章URL：https://jstrieb.github.io/posts/canvas-compress/
标签：#前端 #JavaScript #CanvasAPI #数据压缩 #PNG编码 #浏览器兼容性 #SPA
总结：本文介绍了一种利用浏览器Canvas API将任意数据压缩为PNG图像格式的技术方案。通过将字节数据编码为像素颜色值并生成PNG图像，可以间接调用浏览器内置的压缩算法，实现无需外部依赖的数据压缩。该方法特别适用于需要在旧版浏览器中压缩数据、或需要将SPA状态序列化到URL中的场景，提供了Compression Streams API不可用时的替代方案。
文章要点：
- 背景需求：在静态网站和SPA中，有时需要将状态数据序列化到URL hash中，因此需要前端数据压缩方案；虽然2023年5月后Compression Streams API已普及，但旧版浏览器仍需替代方案
- 核心原理：浏览器内置了优化的压缩库用于HTTP请求和图片处理，通过将数据编码为PNG像素数据，可间接利用浏览器的无损压缩能力
- 技术实现：将Uint8Array数据按RGB通道编码到Canvas像素中（首字节存储最后一像素的有效字节数），Alpha通道固定为255以确保跨浏览器一致性，最终通过toDataURL("image/png")获取base64编码的压缩数据
- 解压流程：异步加载生成的PNG图片，读取像素数据后过滤Alpha通道，根据首字节指示的有效长度提取原始字节数据
- 方案特点：即使考虑PNG格式开销，压缩后的数据通常仍小于原始数据；完全基于浏览器原生API，无需外部库依赖
- 应用场景：旧浏览器兼容性支持、URL状态序列化、纯前端数据压缩需求
文章URL：https://jstrieb.github.io/posts/canvas-compress/
