第十一周

• 技术
  • Next.js 实践：从 SSR 到 CSR 的优雅降级
  • 解锁 SVG 新姿势：ChatGPT 绘制图标+SVG Symbol 自动导入
  • GPT-4 重磅发布，有哪些升级和变化？
  • deboucing-requests-with-react-query
  • Lazy Loading Routes in React Router 6.4+
• 工具
  • flexboard
  • react-xr
  • useragents.me
  • rxdrag
• 更新
  • Vite 4.2.0
• 其他
  • Rustt
  • bigstarrysur
• 一句话

技术

Next.js 实践：从 SSR 到 CSR 的优雅降级

本文介绍了在 Next.js 中实现从 SSR 到 CSR 的优雅降级，通过给页面组件增加 getServerSideProps 方法触发 SSR，并利用 useEffect 在浏览器端再次发起请求获取数据来实现 CSR。作者还抽象出了两个步骤：getServerSideProps 增加错误捕获和页面组件中判断 props 是否为空对象，进一步将这些逻辑封装成 NPM 包 next-ssr-fallback。

解锁 SVG 新姿势：ChatGPT 绘制图标+SVG Symbol 自动导入

用自然语言描述你想画的 Icon，让 ChatGPT 用 svg 生成

GPT-4 重磅发布，有哪些升级和变化？

deboucing-requests-with-react-query

React Query 可以防止同时请求相同的资源并能够轻松缓存响应，但不支持 debouncing。使用自定义查询和 40 行代码可将其添加到 React Query 中以避免不必要的请求。通过动画演示，可以看出 debouncing 在实践中的优势：减少了 91％的请求数量和 99％传输数据量。

Lazy Loading Routes in React Router 6.4+

React Router 6.4 引入了“数据路由器”，将数据获取与渲染分离，消除了渲染 + 获取链和旋转器。数据路由器允许并行获取和一次性呈现所有内容。但是，它通过下载包含所有加载程序和组件的 JavaScript 包来阻止数据提取的开始。React.lazy 提供了对组件树部分进行划分的功能，但受到我们试图通过 Data Routers 消除的紧密耦合问题所困扰。Route.lazy 在 React Router v6.9.0 中引入懒加载以在渲染周期之外引入懒惰性，使其能够与 Data Routers 协同工作，并允许我们通过 lazy() 在导航中匹配路径并同时获取新路由定义来缩小关键路径捆绑包。

工具

flexboard

支持开发可以拖拽侧边栏宽度的组件

react-xr

useragents.me

记录各个浏览器环境的 ua

rxdrag

开源的页面搭建工具

更新

Vite 4.2.0

1. 在 HTML 文件中支持环境变量替换
2. source-map 改进提升和
3. esm subpath 导入
4. ts 5.0 支持
5. esbuild 0.17 支持
6. 使用 Vite 包中的 Rollup 类型
7. 文档支持葡萄牙语翻译

其他

Rustt

学习 Rust 的资料仓库

bigstarrysur

好看的苹果系统壁纸

一句话

一些软件公司可以将最简单的软件项目，变成一系列艰苦的流程，包含无休止的会议，以及大量"相关者"的参与。 这些公司通过每周必须完成的一系列仪式和流程，消灭掉了编程的乐趣和生产力。

-- Hacker News 读者