第 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.

This is a special React component embedded within MDX!

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

第 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(
          
            
          
        );

        const htmlTemplate = `
          
          
            
              
              
              
            
            
              




Step 4: Running the Spell

Arin murmured the incantation to invoke the script.



node generateStaticBlogs.js




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

阿林的倒影：

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



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


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

优点：



极快的加载时间：立即提供预渲染页面，给用户带来无缝速度的错觉。

SEO 掌握：完全渲染的 HTML 可确保 Codex 的故事索引良好，获得可见性。

开发人员友好：MDX 允许丰富的 React 组件与 Markdown 并存，将简单性与交互性融为一体。


缺点：



重建：Codex 的页面必须重新构建以进行更新，从而使动态内容更难以管理。

初始构建时间：生成大型内容档案可能需要时间。


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



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


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

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

使用 Node-Cron 计划 ISR 示例:

为了使页面保持最新，阿林引入了一个守护咒语，该咒语将按设定的时间间隔运行。



npm install node-cron






const cron = require('node-cron');

cron.schedule('0 * * * *', () => {
  console.log('Regenerating static pages...');
  require('./generateStaticBlogs');
});

console.log('Scheduled ISR running every hour.');




阿林的见解：

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





  
  
  结论：超越使命


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

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





  
  
  读者重要提示：


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