Эпизод 10: Великая миссия по предварительному рендерингу — поиски Арина мастерства в области пользовательского SSR и SSG

Статические хранилища Кодекса мерцали в тихом предвкушении. Эти хранилища были безмолвными хранителями знаний, их стены были увешаны свитками данных и светящимися страницами, ожидающими вызова Пользователей. Сегодня Арин стоял на пороге этих хранилищ, ему было поручено овладеть новым и важным ремеслом: созданием статических предварительно обработанных страниц, которые помогут Кодексу обслуживать своих пользователей быстрее, чем когда-либо прежде.

«Арин», Голос Капитана Жизненного Цикла разнесся по сводчатому залу, привлекая ее внимание. «Сегодня вы научитесь использовать возможности статического рендеринга. Речь идет не просто о знаниях — речь идет о подготовке Кодекса для удовлетворения потребностей Пользователей еще до того, как они возникнут».

Вызов, достойный настоящего защитника, подумала Арин, и в ее глазах загорелась решимость. Пришло время создать систему, которая позволила бы Кодексу предварительно отображать свои страницы, гарантируя мгновенный отклик при вызове.

1. Создание архивов – создание пользовательского SSG с помощью MDX

Капитан Лайфцикл шел рядом с Арин, когда она продвигалась глубже в Хранилища. Прокрутки освещаются данными, открывая скрипты и страницы, созданные задолго до того, как они понадобились пользователю. «Чтобы подготовить Кодекс, мы должны научиться собирать знания и хранить их на этих страницах», — сказал он.

Задача Арина была ясна: создать систему генерации статических сайтов (SSG) для блога Кодекса, где истории и уроки прошлого можно было бы использовать в любой момент.

Шаг 1. Сбор инструментов
Первым шагом было оснащение Кодекса средствами чтения и компиляции свитков — файлами MDX.

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

Камера тихо загудела, когда Арин активировал компоненты. Каждая установка была подобна руне, выгравированной в инфраструктуре хранилища, готовящей его к интерпретации и воспроизведению древних текстов.

Шаг 2. Написание первой прокрутки MDX
Арин взяла перо и начала писать первый блог Кодекса — рассказ о его истории, сотканный из интерактивных компонентов 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.

This is a special React component embedded within MDX!

С каждым штрихом страница светилась, ее содержимое теперь представляло собой смесь простого текста и сложных компонентов.

Шаг 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(
          
            
          
        );

        const htmlTemplate = `
          
          
            
              
              
              
            
            
              




Step 4: Running the Spell

Arin murmured the incantation to invoke the script.



node generateStaticBlogs.js




Она наблюдала, как статические хранилища оживают, каждый блог мягко светится, превращаясь в статическую страницу, готовую к показу пользователям.

Отражение Арина:

 «Эти статические страницы — больше, чем просто отголоски», —  подумала она, наблюдая, как своды мерцают знаниями. «Это готовность Кодекса служить, мгновенная и непоколебимая».



  
  
  2. Плюсы и минусы статической готовности


В воздухе прорезался голос Капитана Лайфцикла. «Помни, Арин, хотя статические страницы и эффективны, у них есть свои недостатки».

Плюсы:



Невероятно быстрая загрузка: предварительно обработанные страницы обслуживаются мгновенно, создавая у пользователей иллюзию безупречной скорости.

Мастерство SEO: полностью визуализированный HTML гарантирует, что истории Кодекса хорошо индексируются, что повышает видимость.

Удобство для разработчиков: MDX позволяет богатым компонентам React работать бок о бок с Markdown, сочетая простоту с интерактивностью.


Минусы:



Перестройка: страницы Кодекса должны быть перестроены для обновлений, что затрудняет управление динамическим контентом.

Первоначальное время сборки: создание больших архивов контента может занять некоторое время.


 «Это похоже на создание архива, Арин»,  Капитан Лайфцикл сказал,  «тот, за которым нужно ухаживать и обновлять его по мере написания новых историй». 



  
  
  3. Поэтапная статическая регенерация – Адаптивный хранитель


 «Но капитан»,  Арин нахмурилась, думая: « «что, если Кодексу нужно обновить свои истории, не переписывая все?» 

Капитан Лайфцикл кивнул. “Именно здесь на помощь приходит инкрементальная статическая регенерация. Это хранитель, который обновляет контент по мере необходимости, поддерживая актуальность страниц без переделки всего архива.”

Пример запланированного ISR с помощью Node-Cron:

Чтобы поддерживать актуальность страниц, Арин ввел охранное заклинание, которое запускалось через определенные промежутки времени.



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 Кодекс не просто реагирует — он адаптируется», —  подумала она, чувствуя готовность. «Пользователи всегда найдут новейшие версии Кодекса, готовые помочь им».





  
  
  Вывод: за пределами миссии


Хранилища стояли безмятежно и светились знанием, которое Арин вплела в них. Капитан Лайфцикл положил руку ей на плечо, в его глазах читалась гордость. “Вы научились предварительно отображать суть Кодекса. Но помните, что за пределами нашей сферы есть инструменты, которые делают это еще проще».

Арин кивнул, понимая, куда идти дальше. «Для Кодекса, для Пользователей мы готовимся, адаптируемся и всегда обслуживаем».





  
  
  Важное примечание для читателей:


Приведенные здесь примеры представляют собой фундаментальные подходы к пониманию пользовательских SSR и SSG. Для приложений производственного уровня обратите внимание на такие платформы, как Next.js, Remix и Astro, которые предлагают оптимизированные, безопасные и масштабируемые решения для предварительного рендеринга.