伟大的预渲染任务——Arin 寻求定制 SSR 和 SSG 掌握

第 10 集：伟大的预渲染任务 – Arin 寻求自定义 SSR 和 SSG 精通

---

法典静态库闪烁着安静的期待。这些金库是知识的沉默守护者，它们的墙壁上排列着数据卷轴和发光的页面，等待着用户的召唤。今天，Arin 站在这些金库的门口，肩负着掌握一项新的重要工艺的任务：创建静态预渲染页面，帮助 Codex 比以往更快地为用户服务。

“阿林”生命周期队长的声音在拱形房间里回响，吸引了她的注意力。 “今天，您将学习如何利用静态渲染的力量。这不仅仅是知识的问题，而是在用户的需求出现之前就准备好 Codex 来满足用户的需求。”

这对真正的防守者来说是一个值得挑战的挑战，阿林心想，她的眼睛里闪烁着坚定的光芒。是时候打造一个系统，允许 Codex 预渲染其页面，确保在调用时立即响应。

---

1.制作档案 – 使用 MDX 构建自定义 SSG

生命周期队长与阿林并肩走入避难所的深处。用数据照亮的卷轴，揭示了早在用户需要它们之前就已渲染的脚本和页面。 “为了准备法典，我们必须学会捕捉知识并将其存储在这些页面中，”他说。

Arin 的任务很明确：为 Codex 的博客构建静态站点生成 (SSG) 系统，可以随时调用过去的故事和教训。

第 1 步：收集工具
第一步是为 Codex 配备读取和编译其卷轴的方法 - MDX 文件。

npm install fs-extra react react-dom react-dom/server @mdx-js/react @mdx-js/mdx

当阿林启动组件时，房间里发出轻柔的嗡嗡声。每个装置都像一个符文蚀刻在金库的基础设施中，为解释和呈现古代文本做好准备。

第 2 步：编写第一个 MDX 卷轴
Arin 拿起一支鹅毛笔，开始撰写 Codex 的第一个博客，讲述其历史与交互式 React 组件的故事。

// blogs/hello-world.mdx
# Hello, World!

Welcome to Codex’s first blog post. This content is rendered from an MDX file, combining the simplicity of Markdown with the power of React components.

<specialnote>This is a special React component embedded within MDX!</specialnote>

每笔划过，页面都会发光，其内容现在是简单文本和复杂组件的混合体。

第 3 步：创建渲染卷轴的脚本
Arin 制作了一个咒语——一个脚本——可以读取卷轴，将它们编译成 React 组件，并将它们渲染为静态 HTML。

// generateStaticBlogs.js
const fs = require('fs-extra');
const path = require('path');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const { MDXProvider } = require('@mdx-js/react');
const mdx = require('@mdx-js/mdx');

const outputPath = './static-blogs';
const blogPath = './blogs';

(async () => {
  try {
    // Ensure the output directory exists
    await fs.ensureDir(outputPath);

    const blogFiles = await fs.readdir(blogPath);
    for (const file of blogFiles) {
      if (path.extname(file) === '.mdx') {
        const filePath = path.join(blogPath, file);
        const content = await fs.readFile(filePath, 'utf8');
        const compiledMdx = await mdx(content);
        const Component = new Function('React', compiledMdx)(React);

        // Render the component to a static HTML string
        const renderedBlog = ReactDOMServer.renderToString(
          <mdxprovider>
            <component></component>
          </mdxprovider>
        );

        const htmlTemplate = `
          
          
            
              <meta charset="UTF-8">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <title>${path.basename(file, '.mdx')}</title>
            
            
              <div>



<p><strong>Step 4: Running the Spell</strong><br>
Arin murmured the incantation to invoke the script.<br>
</p>

<pre class="brush:php;toolbar:false">node generateStaticBlogs.js

她看着静态库变得栩栩如生，每个博客都发出柔和的光芒，因为它转变为静态页面，准备好向用户提供服务。

阿林的倒影:
“这些静态页面不仅仅是回声，”她一边想，一边看着金库闪烁着知识的光芒。 “它们是 Codex 准备就绪、即时且坚定不移的服务。”

---

2.静态准备的优点和缺点

生命周期队长的声音划破空气。“记住，Arin，虽然静态页面很强大，但它们也有自己的权衡。”

优点：

• 极快的加载时间：立即提供预渲染页面，给用户带来无缝速度的错觉。
• 精通 SEO：完全渲染的 HTML 可确保 Codex 的故事索引良好，获得可见性。
• 开发人员友好：MDX 允许丰富的 React 组件与 Markdown 并存，将简单性与交互性融为一体。

缺点：

• 重建：必须重建 Codex 的页面以进行更新，这使得动态内容更难以管理。
• 初始构建时间：生成大型内容档案可能需要时间。

“这就像制作一个档案，Arin，”生命周期队长说，“随着新故事的编写，必须对其进行维护和更新。”

---

3.增量静态再生 – 自适应守护者

“但是队长，”Arin 皱起眉头思考，“如果 Codex 需要刷新它的故事而不重写所有内容怎么办？”

生命周期队长点点头。 “这就是增量静态再生的用武之地。它是一个根据需要更新内容的守护者，保持页面新鲜，而无需重新制作整个存档。”

使用 Node-Cron 的计划 ISR 示例:
为了使页面保持最新，Arin 引入了一个会按设定时间间隔运行的守护咒语。

npm install fs-extra react react-dom react-dom/server @mdx-js/react @mdx-js/mdx

// blogs/hello-world.mdx
# Hello, World!

Welcome to Codex’s first blog post. This content is rendered from an MDX file, combining the simplicity of Markdown with the power of React components.

<specialnote>This is a special React component embedded within MDX!</specialnote>

阿林的见解：
“有了 ISR，Codex 不只是做出反应，它还会适应，”她想，感到一种准备就绪的感觉。 “用户将始终发现 Codex 是最新的，并准备好指导他们。”

---

结论：超越使命

避难所静静地矗立着，并因阿林编织的知识而闪闪发光。生命周期队长将一只手放在她的肩膀上，眼中流露出自豪。 “你已经学会了预渲染 Codex 的本质。但请记住，有超出我们能力范围的工具可以让这一切变得更加容易。”

阿林点点头，明白前面的路。 “为了法典，为了用户，我们准备、适应并始终服务。”

---

读者重要提示：

此处提供的示例是理解自定义 SSR 和 SSG 的基本方法。对于生产级应用程序，请研究 Next.js、Remix 和 Astro 等框架，它们为预渲染提供优化、安全且可扩展的解决方案。