banner
innei

innei

写代码是因为爱,写到世界充满爱!
github
telegram
twitter
被裁员后的恐惧
最近一直都在被裁员之后的恐惧中。 不知不觉已经过去了一个多月了。 上个月的 9 号下午,通知我被优化了,没有任何的征兆,原因是项目组资金砍半了,人也要砍半。想起来也是伤感,自从离开小红书后,选择降薪去到一家喜欢的公司做充满艺术感的产品,本以为能够一直做下去…
cover
cover

一种适用于 Zustand 和 React Query 的前端数据管理方式

在上面这篇文章中提到当 React Query 托管的数据过于复杂或者冗余的话,后续在前端做数据的乐观更新会变得非常复杂并且不可控。 Note 乐观更新指,前端在进行数据操作时,通过 API 方式向服务器提交数据,之后数据在 UI 上的更新由前端提供,不需要等待服务器的响应…
探讨 React Server Component 与 React Client Component 的环境隔离与实践
前言 我们知道,在 React Server Component 环境下,渲染的运行时永远都是在 server 的,而在 RCC 中,两者环境都可能存在。为了控制一个库的引用方只能处于某种环境中,而在另一个环境中报错,我们可以使用 client-only 或者 server…
cover
cover

跨仓库全自动构建项目并部署到服务器

最近,Vercel 又又对价格进行了调整,让 Hobby 越来越不够用了,所以放弃了使用 Vercel,转向私有服务器部署 Next.js 项目。 对于私有服务器的部署体验是非常不友好的。第一,没有 Vercel 这样的全自动部署,也不能及时回滚。第二,Next.js…
cover

为什么是 RSC (二)

渐进式渲染 Important 渐进式渲染,或者称作流式渲染。这不是一个只能在 RSC 中可以享受到的特征,这种渲染模式和 Suspense、 renderToPipeableStream 或 renderToReadableStream 有关。 但是在 Next.js…
cover
cover
cover
cover

Shiki 性能优化 - 按需加载语法解析

Shiki 是一个非常优秀的代码高亮库。 https://github.com/shikijs/shiki 众所周知,代码高亮库包含了众多的语言解析器,导致加载比较缓慢,并且加载太多无用的解析器造成大量流量浪费。 这一节我们来实现按需加载 Shiki 需要的语言解析器。 动态加载…
cover
cover
cover
cover

为什么是 RSC (一)

React 19 会正式引入 React Server Component (RSC) 的概念,Client Component 和 Server Component 从此将会正式分离。Next.js 从 13 版本就开始支持 Server Component。那么为什么是…
cover
cover

INFP-T的内心世界、个人站点更新

超共鸣!INFP-T 的内心剧场 在网上看到这样一个视频,简直说的就是我了。 https://www.bilibili.com/video/BV13F4m1F7Cf 社交五分钟,复盘一整天,晚上睡觉都在想。甚至在群里说了句话没人回,都要思考是不是自己说错了啥…
cover

利好 SharedWorker 实现跨页面单例 WebSocket

在之前的文章中,我详细的介绍了站点的实时人数是如何实现的?,在方案中,我留下了一个悬念,如何使用 SharedWorker 在页面之间共享 Socket 实例,实现跨页面单例 WebSocket。 动机 探索这个问题的背景是无意间在知乎看到了 WebSocket 的一个问题…
cover
cover
cover

一次构建多处部署 - Next.js Runtime Env

我们一般通过控制 env 的方式去做到 "Build once, deploy many" 哲学。但是在 Next.js 中,环境变量分为两种,一个种是可被用于 Client 侧的 NEXT_PUBLIC_ 开头的环境变量,另一个种是只能被用于 Server 侧的环境变量…
cover

站点的实时人数是如何实现的?

经常光顾我站的读者应该都看到过我站底部有显示当前在线的人数。在不久之前我还为其增加了显示当前正在阅读具体哪篇文章的人数排行,并且在具体的某篇文章左侧增加时间线,用于展示当前所有正在阅读此文章的读者阅读进度。 如果你看过我站的开源项目的话大概知道此站是由 Mix Space…
cover
cover
cover

2024 年,该如何写一个全面兼容的 NPM 库

最近,把 rc-modal 做成了一个库。写代码倒是不难,无非就是把原本的代码封装抽象一下。倒是发包,和作为使用者如何使用这个包难住了。 首先,我们知道现在一个 npm 包如果不做 ESM Pure 的话,你需要考虑兼容 CJS/ESM,node 老版本和新版本(吃不吃…
缓存标头和利用边缘网络加速访问
本文以 Cloudflare + Vercel 为例。 了解缓存标头 在生产中,我们通常会利用 Redis 去缓存接口数据。对于前端应用来说,我们一般会利用内容分发网络(CDN)去缓存页面和其他静态资源。 我们知道 HTTP 标头 cache-control 可以用来强缓存资源。…
嘿,请看这里
最近在写一本小册。 聊点不一样的 Next.js 大概有人已经看过了。 如果你有任何意见请告诉我。也可以在底下留言。 目前正在编写中,处于免费开放试读阶段。 请给我动力让我能够继续编写下去。谢谢您。 此文由 Mix Space 同步更新至 xLog 原始链接为 https…
cover
cover
cover
cover

Server Action & Streamable UI

Note 此小节启发于 https://sdk.vercel.ai/docs/concepts/ai-rsc 以下代码在 Next.js 14.1.2-canary.3 中可以工作,其他版本或许会有改动 此文章首次发布于我正在编写的 聊点不一样的 Next.js 小册…
cover
cover
cover

编程夜话与影游旅程

网站的新变化 年间这几天,夜不能寐,总想快点实现一些想法。起因是:https://x.com/ctnicholasdev/status/1754889044423741926?s=20 然后我也有了实现这个功能的想法。 现在他来了。虽然可能不太准。你可以通过页面左侧查看,这个只有…
cover
cover

NextJS/React 加载远程组件

前言 写过文档的大佬们都知道 MDX 这个东西,对原本的 Markdown 进行了扩展,可以在 Markdown 中直接使用框架组件(React,Vue 等等)。 现在也有很多静态生成的博客使用 MDX 去编写博文,在博文中内嵌了 React 组件,在一些需要交互式的场景中…
24M1
这段日子一直在家里,也不知道干了啥,这就快到年底了。 技术 写了 2 篇文章。 https://innei.in/posts/programming/modular-request-data-management-concept https://innei.in/posts…
Ownership of this blog data is guaranteed by blockchain and smart contracts to the creator alone.