当前位置：首页 > 文章列表 > 文章 > 前端 > 伟大的预渲染任务——Arin 寻求自定义 SSR 和 SSG 掌握

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

来源：dev.to 2024-11-22 12:13:03 0浏览收藏

珍惜时间，勤奋学习！今天给大家带来《伟大的预渲染任务——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 />
          </mdxprovider>
        );

        const htmltemplate = `
          <!doctype html>
          <html lang="en">
            <head>
              <meta charset="utf-8" />
              <meta name="viewport" content="width=device-width, initial-scale=1.0" />
              <title>${path.basename(file, '.mdx')}</title>
            </head>
            <body>
              <div id="root">${renderedblog}</div>
            </body>
          </html>
        `;

        // write the rendered html to a file
        await fs.writefile(`${outputpath}/${path.basename(file, '.mdx')}.html`, htmltemplate);
        console.log(`static blog page for ${file} generated successfully!`);
      }
    }
  } catch (error) {
    console.error('error generating static blogs:', error);
  }
})();

第四步：运行咒语
阿林低声念出咒文来调用脚本。

node generatestaticblogs.js

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

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

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

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

优点：

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

缺点：

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

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

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

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

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

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

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 是最新的，并准备好指导他们。”