Объясните статическую генерацию приложений на React и ее преимущества

Статическая генерация (Static Site Generation, SSG) — это метод предгенерации HTML-страниц вашего приложения на этапе сборки. В отличие от серверной рендеринга (SSR), где страницы создаются на сервере каждый раз, когда пользователь запрашивает страницу, в статической генерации страницы создаются один раз и сохраняются как статические файлы, которые потом могут быть быстро и эффективно раздаваемы пользователям.

Преимущества статической генерации:

Пример использования статической генерации в React

Для статической генерации приложения на React можно использовать фреймворк Next.js. Вот простое примеры:

Установка Next.js

npx create-next-app my-static-site
cd my-static-site

Генерация статической страницы

Теперь давайте создадим статическую страницу:

import React from 'react';

const HomePage = ({ data }) => {
  return (
    <div>
      <h1>Добро пожаловать на мой статический сайт!</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
    </div>
  );
};

// Функция для статической генерации
export async function getStaticProps() {
  // Получаем данные из API или другого источника
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const data = await res.json();

  return {
    props: {
      data: data.slice(0, 10), // берём первые 10 постов
    },
  };
}

export default HomePage;

Запуск приложения

Теперь вы можете запустить приложение с помощью команды:

npm run dev

Результат

Когда вы откроете ваш браузер и перейдете на http://localhost:3000, вы увидите статически сгенерированную страницу с заголовком и списком постов, которые были загружены во время сборки.

Заключение

Статическая генерация — это мощный инструмент для разработчиков, который позволяет создавать быстрые, безопасные и SEO-дружественные приложения. Используя фреймворки, такие как Next.js, вы можете легко внедрить SSG в ваше приложение, улучшив производительность и опыт пользователей.