Узнайте, как использовать статическую генерацию и серверный рендеринг в Next.js для создания динамических и статических страниц. Узнайте, как работают эти подходы, как их настроить и как использовать функции `getStaticProps` и `getServerSideProps`. Научитесь, как улучшить производительность сайта и оптимизировать его для поисковых систем.

[↓↓↓ Пропустить текст, смотреть видео ↓↓↓](#watch-now)

## Статическая генерация (SSG)

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

Для того чтобы использовать SSG в Next.js, нужно импортировать функцию `getStaticProps` в файле страницы. Эта функция будет вызываться при сборке проекта и возвращать данные, которые будут использоваться для генерации статической страницы. 

Например:

    export async function getStaticProps() {
      const res = await fetch('https://api.example.com/posts');
      const posts = await res.json();

      return {
        props: {
          posts,
        },
      };
    }

    function Blog({ posts }) {
    // рендеринг блога на основе данных, полученных из props
    }

    export default Blog;

В этом примере функция getStaticProps получает список постов с удаленного API и возвращает их в качестве пропсов для страницы блога. Когда проект будет собран, Next.js создаст статический файл для страницы блога, используя полученные данные.

## Серверный рендеринг (SSR)

Серверный рендеринг (SSR) - это процесс создания страниц на стороне сервера при каждом запросе. Это позволяет динамически изменять содержимое страницы на основе пользовательских запросов и данных.

Чтобы использовать SSR в Next.js, нужно импортировать функцию `getServerSideProps` в файле страницы. Эта функция будет вызываться при каждом запросе к странице и возвращать данные, которые будут использоваться для рендеринга страницы. 

Например:

    export async function getServerSideProps(context) {
      const { params } = context;
      const res = await fetch(`https://api.example.com/posts/${params.id}`);
      const post = await res.json();

      return {
        props: {
          post,
        },
      };
    }

    function Post({ post }) {
      // рендеринг поста на основе данных, полученных из props
    }

    export default Post;

В этом примере функция getServerSideProps получает параметр id из контекста запроса и использует его для получения данных конкретного поста с удаленного API. Когда пользователь запрашивает страницу поста, Next.js вызывает функцию getServerSideProps для получения данных и рендерит страницу на основе полученных пропсов.

## Watch Now

Смотрите так же пример использования в реально проекте


О чем вы узнаете в этом уроке

Что такое SSG и SSR в Next JS - динамические и статические страницы

Next JS уроки - SSR и SSG

Узнайте, как использовать функции getStaticProps и getServerSideProps

Узнайте, как использовать статическую генерацию и серверный рендеринг в Next.js для создания динамических и статических страниц, улучшения производительности сайта и оптимизации для поисковых систем.

OB Web Dev

OB Web Dev

Статическая генерация и серверный рендеринг в Next.js

Статическая генерация и серверный рендеринг в Next.js

Получить скидку на курс основы WebDev