react
为什么是 RSC (二）
渐进式渲染# Important
渐进式渲染，或者称作流式渲染。这不是一个只能在 RSC 中可以享受到的特征，这种渲染模式和 Suspense、 renderToPipeableStream 或 renderToReadableStream 有关。
但是在 Next.js…
Shiki 性能优化 - 按需加载语法解析
Shiki 是一个非常优秀的代码高亮库。 https://github.com/shikijs/shiki
众所周知，代码高亮库包含了众多的语言解析器，导致加载比较缓慢，并且加载太多无用的解析器造成大量流量浪费。
这一节我们来实现按需加载 Shiki 需要的语言解析器。
动态加载…
为什么是 RSC (一）
React 19 会正式引入 React Server Component (RSC) 的概念，Client Component 和 Server Component 从此将会正式分离。Next.js 从 13 版本就开始支持 Server Component。那么为什么是…
2024 年，该如何写一个全面兼容的 NPM 库
最近，把 rc-modal 做成了一个库。写代码倒是不难，无非就是把原本的代码封装抽象一下。倒是发包，和作为使用者如何使用这个包难住了。 首先，我们知道现在一个 npm 包如果不做 ESM Pure 的话，你需要考虑兼容 CJS/ESM，node 老版本和新版本（吃不吃…
模块化的请求数据统一管理的构想
在一个复杂的业务场景下，一个页面中被拆分多个组件，或者是多个组件共同组成一个独立的模块而不受到其他模块的影响。如下图所示。 Copy
{"type":"excalidraw","version":2,"source":"http://localhost:2323…
为什么我更推荐命令式 Modal
更新 24.3：已封装成组件库，欢迎大家来使用。 https://github.com/Innei/rc-modal
Modal 模态对话框。
一个非常常见的组件。不管是 C 端还是 B 端都能看到它的身影。但是你真的会用它吗？
什么是声明式 Modal#
组件库中一般都会内置这…
超级组合！NestJS + tRPC 与CSR绝佳搭档React Query，开启全新开发时代！
最近在重写一个 NestJS 的项目，想着这么集成下 tRPC 供管理面板前端使用。原本在管理面板都是裸写的 API 接口，也没有任何响应类型。如果使用 tRPC 的话，不仅不用手写 API 还能做到 End-to-End Type-safe. tRPC 是什么#
RPC…
浅谈 NextJS RSC/SSR 中数据水合和持久化数据（二）
上回说道在 SSR 中如何用 React Query 实现数据水合。这期来谈谈如何用 Jotai 实现。 使用 Jotai 对数据的管理后期对数据的修改和对 UI 的反应也会更加方便。
改造#
注入数据#
在 layout.tsx 我们依然使用 queryClient 去获取数…
使用 Jotai 抽离组件状态的经验
Jotai 是一个非常优秀的基于原子模型的 React 状态管理库。它采用自下而上的方法来构建全局 React 状态管理，通过组合原子来构建状态，并根据原子依赖关系优化渲染。这解决了 React 上下文的额外重新渲染问题，并消除了对 memoization 的需求。 使用…
浅谈 NextJS RSC/SSR 中数据水合和持久化数据（一）
因为最近在重写一个个人站点，尝试了 NextJS 全新的 RSC 架构之后，也踩了很多坑。打算用此文记录一些实践。 在 SSR 架构中，如果请求数据在服务端，在转到 CSR 渲染时依赖 SSR 的数据时，必须要保证在 CSR 时拿到的数据和服务端一致，只有这样还能保证两端渲染一致…
React 应用中性能优化的经验（二）
上回说道在 React 应用中列表组件应该去优化，今天复杂组件应该怎么写。Jotai 和 Zustand 咕咕咕了，下次再说。 写过大厂屎山的大伙应该都经历过，一个组件能有上百甚至上千行都是常事。一个组件内部嵌套一个组件也是常事。简单总结了下三不要：
不要在 Component…