构建时规划，运行时执行：解构 React Router 的 prerender 与 loader

问题的核心是：为什么要有两个看起来都在读取文件的函数？

答案是：因为它们分别服务于两个完全不同阶段 的两个完全不同目的。一个是"构建阶段"的"规划者"，另一个是"执行者"，这个"执行者"不仅在"构建阶段"工作，也可能需要在"运行阶段"独立工作。

我们把这两个阶段拆开看：

阶段一：网站"构建"时 (Build Time)

想象一下你按下了"发布网站"的按钮。这时，你的电脑（服务器）开始执行一系列任务，把你的代码变成一个可以访问的网站。这个过程只发生这一次。

任务 A：规划要做哪些页面的"静态版本"

谁来做？ prerender 函数。
它的目标是什么？ 快速生成一个**"工作清单"**。清单上列出了所有需要提前生成好 HTML 的页面的 URL 地址。
它怎么做？ 它调用 readProductsFromCSVFile()，这个函数一口气读取整个 CSV 文件 ，拿到所有产品的 ID，然后组装成一个 URL 列表，比如 ['/products/1', '/products/2', '/products/3', ...]。
结果是什么？ 一个简单的字符串数组 。prerender 的任务到此彻底结束。它不关心每个页面的内容是什么，只关心"有哪些页面要处理"。

任务 B：逐个执行清单，生成每个页面的 HTML

谁来做？ 构建工具会遍历"任务 A"生成的清单。对于清单上的每一项（比如 /products/1），它会调用 loader 函数。
它的目标是什么？ 获取这一个 特定页面（产品1）所需要的具体数据。
它怎么做？ 它调用 getProductFromCSVFile('1')。这个函数拿着 ID 1，去 CSV 文件里只查找 ID 为 1 的那一行数据 ，然后返回 { id: '1', name: '键盘', ... }。
结果是什么？ 一个包含产品1详细信息的对象。构建工具拿到这个对象后，就能渲染出 product-1.html 文件。

然后构建工具继续处理清单的下一项 /products/2，再次调用 loader...如此循环。

小结：在构建时，prerender 是总指挥，只干一件事：列清单。loader 是具体工人，被总指挥叫一次，就去干一件具体的活：为指定的产品找数据。

现在，你的网站已经发布上线了。用户开始访问。

情况一：用户访问 /products/1

情况二：用户访问一个"意外"的 URL，比如 /products/101

现在您应该明白了：

prerender 是一个一次性的规划者 ：它只在"构建时"工作，目的是为了生成一个批处理清单。它没有能力处理单个、实时的请求。
loader 是一个可复用的执行者 ：它被设计成一个独立的、能处理单个请求的专家。
- 在"构建时"，它被 prerender 生成的清单驱动，一遍遍地被调用来完成批处理任务。
- 在"运行时"，它可以被服务器直接调用，来处理那些没有被预先构建的"意外"请求。

所以，它们都需要读取文件，但：

这种 "规划"和"执行"分离 的设计，才使得系统既能拥有静态预渲染的极高速度，又能灵活地处理动态、实时的请求。