nextjs
为什么是 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。那么为什么是…
利好 SharedWorker 实现跨页面单例 WebSocket
在之前的文章中,我详细的介绍了站点的实时人数是如何实现的?,在方案中,我留下了一个悬念,如何使用 SharedWorker 在页面之间共享 Socket 实例,实现跨页面单例 WebSocket。 动机
探索这个问题的背景是无意间在知乎看到了 WebSocket 的一个问题…
Server Action & Streamable UI
Note 此小节启发于 https://sdk.vercel.ai/docs/concepts/ai-rsc
以下代码在 Next.js 14.1.2-canary.3 中可以工作,其他版本或许会有改动
此文章首次发布于我正在编写的 聊点不一样的 Next.js 小册…
浅谈 NextJS RSC/SSR 中数据水合和持久化数据(二)
上回说道在 SSR 中如何用 React Query 实现数据水合。这期来谈谈如何用 Jotai 实现。 使用 Jotai 对数据的管理后期对数据的修改和对 UI 的反应也会更加方便。
改造
注入数据
在 layout.tsx 我们依然使用 queryClient 去获取数据…
浅谈 NextJS RSC/SSR 中数据水合和持久化数据(一)
因为最近在重写一个个人站点,尝试了 NextJS 全新的 RSC 架构之后,也踩了很多坑。打算用此文记录一些实践。 在 SSR 架构中,如果请求数据在服务端,在转到 CSR 渲染时依赖 SSR 的数据时,必须要保证在 CSR 时拿到的数据和服务端一致,只有这样还能保证两端渲染一致…
Next.js 13 App Router 迁移吐槽
关注 Next.js 的 Layouts RFC 很久了,当时这个 RSC 出来的时候,我还感到很兴奋,我想着这个特征的出现应该就能解决首屏加载初始数据的问题,比起现在的各种 HACK 方法应该会优雅很多。 不曾想到的是 Next.js 13 把 Layout 和 Server…