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

---

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

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

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

---

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

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

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

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

npm install fs-extra 反応反応-dom 反応-dom/サーバー @mdx-js/反応 @mdx-js/mdx

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

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

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

// ブログ/hello-world.mdx ＃ こんにちは世界！ Codex の最初のブログ投稿へようこそ。このコンテンツは MDX ファイルからレンダリングされ、Markdown のシンプルさと React コンポーネントの機能を組み合わせています。 これは MDX 内に埋め込まれた特別な React コンポーネントです!

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

ストロークごとにページが輝き、そのコンテンツは単純なテキストと複雑なコンポーネントが混ざり合ったものになりました。

ステップ 3: スクロールをレンダリングするスクリプトの作成 アリンは、巻物を読み取って React コンポーネントにコンパイルし、静的 HTML としてレンダリングする呪文、つまりスクリプトを作成しました。

//generateStaticBlogs.js const fs = require('fs-extra'); const パス = require('パス'); 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 () => { 試す { // 出力ディレクトリが存在することを確認します await fs.ensureDir(outputPath); const blogFiles = await fs.readdir(blogPath); for (blogFiles の const ファイル) { if (path.extname(file) === '.mdx') { const filePath = path.join(blogPath, file); const content = await fs.readFile(filePath, 'utf8'); constコンパイル済みMdx = await mdx(コンテンツ); const コンポーネント = new Function('React', コンパイルされた Mdx)(React); // コンポーネントを静的な HTML 文字列にレンダリングします。 const renderedBlog = ReactDOMServer.renderToString( プロバイダ> ); const htmlTemplate = `