伟大的预渲染任务——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 是最新的，并准备好指导他们。”
结论：超越使命
避难所静静地矗立着，并因阿林编织的知识而闪闪发光。生命周期队长将一只手放在她的肩膀上，眼中流露出自豪。 “你已经学会了预渲染 codex 的本质。但请记住，有超出我们能力范围的工具可以让这一切变得更加容易。”
阿林点点头，明白前面的路。 “为了法典，为了用户，我们准备、适应并始终服务。”
读者重要注意事项：
此处提供的示例是理解自定义 ssr 和 ssg 的基本方法。对于生产级应用程序，请研究 next.js、remix 和 astro 等框架，它们为预渲染提供优化、安全且可扩展的解决方案。
以上就是伟大的预渲染任务——Arin 寻求自定义 SSR 和 SSG 掌握的详细内容，更多请关注硕下网其它相关文章！