#13 前端月刊

React

如何为你的应用选择最佳渲染策略

静态站点生成 (SSG),

服务器端渲染 (SSR),

客户端渲染 (CSR),

增量静态再生 (ISR)

实验性部分预渲染 (PPR)

Feature	SSG	ISR	SSR	CSR**
构建时间	长	Varies	短	短
First Byte 时间	快	最快*	最慢	中等
Largest Contentful Paint	最快	最快*	中等	最慢
数据新鲜度	静态	周期/按需	实时	实时
服务器计算时间	最低	低	高	最低
客户端性能	极好的	极好的	好的	Varies
交互性	有限的***	有限的***	完整的	完整的

• 重新验证后的第一个请求等于SSR速度。所有其他请求都等于SSG速度。

** 在其他渲染策略之上进行增强。

*** 可以使用客户端 JavaScript 进行增强。

React conf 2024 演讲视频

错过了 live 可以看回放

Google Translate 导致 React 应用崩溃

当我们讲一个英文网站使用翻译插件翻译的时候，再进行页面上的一些操作可能会导致页面崩溃。（也可以尝试打开 nextjs 文档网站，打开翻译，点选菜单）。

这是因为翻译插件会修改 DOM 元素，强行给翻译的文本插入一个s font 节点，导致 React 丢失了对原本 TextNode 的操作。看下面两种情况。

查看例子：https://martijnhols.nl/gists/demo/google-translate-text-not-updating-repro

// before
<p>some {number}</p>

// after
<p><font>一些 </font><font>{number}</font></p>

查看例子：https://martijnhols.nl/gists/demo/google-translate-crashes-ternary-repro

// before
{a ? <>some {number}</> : <>no data</>}

// after
<><font>some </font><font>{number}</font></>

这个问题不仅仅是 React 使用虚拟 DOM 的框架都会有这个问题。也不仅仅是翻译插件，密码管理器、广告拦截器等等等会操作 DOM 的插件都存在这种隐含问题。

TypeScript

为什么 unknown 类型很有用

我们应该很少会用到 unknown 类型，但其实这个类型非常有用。

除了文章中例子，经常会碰到的例子就是 try cache 中 error，就是一个 unknown 类型，因为无法推倒 throw 的是个什么，所以经常需要写下面这样的代码

try {
 // ...
} cache (e) {
  // e 是个 unknown
  if (e instanceof Error) {
    // 通过判断，限定 e 的类型为 Error
    console.error(e.message)
  }
}

理解多环境下的 tsconfig.json配置

我们使用 ts 的时候一定会接触配置 tsconfig.json ，但往往我们工程的 TS 代码在不同的工作环境运行，这篇文章帮助理解在一个工程中多种环境下配置中合适的 tsconfig。（多种环境是指，你开发的是 web、test、node、e2e 等等内容）

重点两个属性：

• include, 控制哪些文件受该配置影响

• references, 控制哪些文件（配置文件包含的文件）需要类型检查，但是只有各自包含的文件会受其配置影响。

其他

JavaScript 中内存泄漏的常见原因（V8 引擎）

在 Nodejs 中，有这些内存类型：

• RSS：总内存，包括代码、堆、栈
• 堆总量：为 JS 对象分配的内存
• 堆已使用量：对象实际使用量
• 外部的：与 JS 绑定的 c++ 对象
• ArrayBuffer：为 ArrayBuffer 分配的内存

泄漏原因其实我们大多是了解一些的，这篇文章可以再温习一遍。

fffuel：把 svg 玩出花来

fffuel是一组颜色工具和免费的 SVG 生成器，用于渐变、图案、纹理、形状和背景等等，真的能把 svg 玩出花来