エピソードグレートプリレンダーミッション – アリンのカスタム SSR と SSG マスタリーの探求-jsチュートリアル-php.cn

エピソードグレートプリレンダーミッション – アリンのカスタム SSR と SSG マスタリーの探求

DDD

リリース： 2024-11-28 19:10:12

オリジナル

629 人が閲覧しました

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

エピソード 10: グレートプリレンダーミッション – カスタム SSR と SSG マスタリーを目指すアリンの探求

コーデックスの静的保管庫は、静かな期待で輝いていました。これらの保管庫は知識の沈黙の守護者であり、その壁にはユーザーの召喚を待つデータの巻物と輝くページが並んでいた。今日、アリンはこれらの保管庫の入口に立って、新しく重要な技術を習得するという任務を負っていました。それは、Codex がこれまでよりも早くユーザーにサービスを提供できるようにする、静的な事前レンダリングされたページを作成するというものです。

「アリン」 ライフサイクル船長の声がアーチ型の部屋に響き渡り、彼女の注目を集めた。「今日は、静的レンダリングの力を活用する方法を学びます。これは単なる知識の問題ではありません。ユーザーのニーズが発生する前に、それを満たすために Codex を準備することが重要です。」

これは真のディフェンダーにふさわしい挑戦だ、とアリンは決意を瞳に輝かせながら思った。 Codex がページを事前レンダリングして、呼び出されたときに即座に応答できるようにするシステムを作成する時期が来ました。

1.アーカイブの作成 – MDX を使用したカスタム SSG の構築

キャプテン・ライフサイクルは、アリンがVaultsの奥深くに移動するときに一緒に歩きました。スクロールはデータで照らされ、ユーザーが必要とするずっと前にレンダリングされたスクリプトとページを明らかにします。 「コーデックスを準備するには、知識を取得してこれらのページに保存する方法を学ばなければなりません。」彼は言いました。

Arin のタスクは明確でした。Codex のブログ用に静的サイト生成 (SSG) システムを構築し、過去のストーリーや教訓を瞬時に呼び出せるようにすることです。

ステップ 1: ツールを集める
最初のステップは、Codex に巻物 (MDX ファイル) を読み取ってコンパイルする手段を装備することでした。

npm install fs-extra react react-dom react-dom/server @mdx-js/react @mdx-js/mdx

ログイン後にコピー

アリンがコンポーネントを作動させると、チャンバーが静かに鳴り響きました。それぞれのインスタレーションは、保管庫のインフラストラクチャーに刻まれたルーン文字のようなもので、古代の文書を解釈してレンダリングする準備を整えていました。

ステップ 2: 最初の MDX スクロールの作成
アリンは羽根ペンを手に取り、インタラクティブな React コンポーネントで織り込まれた Codex の歴史の物語である Codex の最初のブログを作成し始めました。

// 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: スクロールをレンダリングするスクリプトの作成
アリンは、巻物を読み取って 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

ログイン後にコピー

彼女は、静的ボールトが動き出し、各ブログが柔らかく輝き、ユーザーに提供される準備が整った静的ページに変化するのを眺めました。

アリンの反省:
「これらの静的なページは、単なるエコーではありません。」 知識できらめく保管庫を眺めながら、彼女は思いました。 「コーデックスは即座に、そして揺るぎなく提供する準備が整っています。」

2.静電気対策の長所と短所

キャプテン・ライフサイクルの声が空気を切り裂いた。「覚えておいてください、アリン、静的ページは強力ですが、それぞれのトレードオフがあります。」

長所:

非常に速い読み込み時間: 事前にレンダリングされたページが即座に提供され、ユーザーにシームレスな速度の錯覚を与えます。
SEO マスタリー: 完全にレンダリングされた HTML により、Codex のストーリーが適切にインデックス付けされ、可視性が高まります。
開発者に優しい: MDX を使用すると、豊富な React コンポーネントが Markdown と並行して動作し、シンプルさと対話性を融合できます。

短所:

再構築: Codex のページは更新のために再構築する必要があるため、動的コンテンツの管理が難しくなります。
初期ビルド時間: コンテンツの大規模なアーカイブの生成には時間がかかる場合があります。

「アーカイブを作成するようなものです、アリン」 キャプテン・ライフサイクルは言いました。「新しいストーリーが書かれるたびに管理し、更新する必要があります。」

3.増分静的再生 – アダプティブキーパー

「でも、船長」 アリンは考えながら眉間にしわを寄せた、「コーデックスがすべてを書き換えずにストーリーを更新する必要がある場合はどうなるでしょうか?」

キャプテン・ライフサイクルはうなずいた。「そこで、増分静的再生が登場します。これは、必要に応じてコンテンツを更新し、アーカイブ全体を作り直すことなくページを新鮮に保つキーパーです。」

Node-Cron を使用したスケジュールされた ISR の例:
ページを最新の状態に保つために、アリンは設定された間隔で実行されるガーディアンスペルを導入しました。

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 を常に最新の状態に保ち、ガイドする準備ができています。」

結論: 使命を超えて

Vaults は静かに佇み、アリンが織り込んだ知識で輝いていました。ライフサイクル船長は彼女の肩に手を置き、その目には誇りが見えました。「Codex の本質をプリレンダリングする方法を学びました。ただし、これをさらに簡単にする私たちの領域を超えたツールがあることを忘れないでください。」

アリンはうなずき、今後の道を理解した。 「コーデックスのために、ユーザーのために、私たちは準備し、適応し、常にサービスを提供します。」

読者への重要な注意事項:

ここで提供される例は、カスタム SSR と SSG を理解するための基本的なアプローチです。運用レベルのアプリケーションの場合は、プリレンダリング用に最適化され、安全でスケーラブルなソリューションを提供する Next.js、Remix、Astro などのフレームワークを検討してください。

以上がエピソードグレートプリレンダーミッション – アリンのカスタム SSR と SSG マスタリーの探求の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。