偉大的預渲染任務——Arin 尋求定制 SSR 和 SSG 掌握-js教程-PHP中文網

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 是最新的，並準備好指導他們。」