伟大的预渲染任务——Arin 寻求定制 SSR 和 SSG 掌握-js教程-PHP中文网

首页

web前端

js教程

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

DDD

Nov 28, 2024 pm 07:10 PM

Episode The Great Pre-Render Mission – Arin’s Quest for Custom SSR and SSG Mastery

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



<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 等框架，它们为预渲染提供优化、安全且可扩展的解决方案。

以上是伟大的预渲染任务——Arin 寻求定制 SSR 和 SSG 掌握的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7888

Java教程

1650

CakePHP 教程

1411

Laravel 教程

1302

PHP教程

1248

显示更多

Related knowledge

前端热敏纸小票打印遇到乱码问题怎么办？ Apr 04, 2025 pm 02:42 PM

前端热敏纸小票打印的常见问题与解决方案在前端开发中，小票打印是一个常见的需求。然而，很多开发者在实...

神秘的JavaScript：它的作用以及为什么重要 Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。