本文介绍了使用Bun插件实现部分预渲染（PPR）的技术及其在JSX框架中的应用。文章讨论了部分预渲染的概念和优势，以及如何使用Bun插件来实现它。此外，还介绍了预渲染宏和开源项目Prerender Macro，并提供了不同框架的演示项目链接。
该插件提供了一种简单的方法，通过导入组件并添加“prerender”属性，来实现部分预渲染。此外，还提供了演示项目，以帮助人们理解插件在不同框架中的配置需求。
未来，期望生成基础设施即代码（IaC），以更好地与云服务集成。
前言
介绍了使用 Bun 插件实现部分预渲染（Partial Prerendering, PPR）的技术和优势，以及如何在 JSX 框架中应用这一技术。今日前端早读课文章由 @飘飘翻译分享。
正文从这开始～～
在现代 web 开发中，优化 web 应用的性能至关重要。一种广受欢迎的方法是部分预渲染，这是一种将静态和动态内容渲染相结合的技术，可以同时提高打包大小和运行时速度。在本文中，我们将深入探讨部分预渲染的概念，并了解其优势，尤其是在通过即时编译（AOT）渲染时。
【第3266期】Figma mobile 引擎的演变：换掉我们编译的自定义编程语言
我们还将介绍如何使用 Bun 插件来实现部分预渲染，并且可以以一种简单的方式将其应用于所有 JSX 框架。
部分预渲染的工作原理
在使用 JSX 组件时，我们通常会生成静态和 / 或动态页面。有些框架允许你在编译时预渲染静态页面，这显著提升了初始加载时间。然而，大多数路由并不完全是静态或动态的。你可能有一个既有静态内容又有动态内容的路由。
部分预渲染（PPR）是在构建时渲染静态组件，并将动态组件的渲染推迟到运行时。这意味着不是在运行时动态渲染所有组件，而是在构建过程中将一些组件作为 HTML 预先渲染。
【第3061期】新一代 Web 预渲染技术
在服务器端渲染 (SSR) 的场景下，许多情况下我们有完全静态的组件，比如头部、底部等。如果我们在构建时仅预渲染一次，然后在每次请求时不再重复渲染这些组件，就可以节省数毫秒的渲染时间。
蓝色部分表示运行时渲染时间：
渲染与部分预渲染的对比
甚至在我们使用的组件的数据也可能是静态的。想象一下我们在电子商务首页展示静态数据部分，需要将数据硬编码到 JSON 文件中以提高速度，但是：
-
仍然需要解析 JSON 并渲染组件。
-
数据库和硬编码的数据之间存在重复。
在这种情况下，我们可以直接从源请求数据，而不是硬编码数据，并提前预渲染组件，以节省毫秒级的解析和渲染时间。
优势
-
更小的打包文件
-
更快的运行时渲染
-
每个请求消耗更少的资源
-
更好的用户体验
-
更好的 SEO
宏
Bun 引入了 宏 的概念到 JavaScript 中。宏是一种新范式，只需添加一个 import 属性，就可以提前进行优化。
import { random } from './random.ts' with { type: 'macro' };
console.log(`你的随机数是 ${random()}`);
通过添加这个
macro
属性，宏在打包时运行
random
函数，并将返回的值直接嵌入你的打包文件中。
【第2183期】Promise原理&宏微任务
这使得我们能够直接从源文件请求静态数据，而不是提前硬编码数据并传递数据。在运行宏之后，打包器会执行死代码消除操作，这样我们就可以得到更小的打包文件大小。那么，我们能否直接使用宏预渲染组件呢？
嗯，Bun 编译器和宏之间的通信需要对数据进行序列化，因此并非所有数据都支持，只支持以下数据：
