Практические шаги для включения SSR в Next.js:

1. Настройка компонента страницы:

   • В дополнение к стандартному статическому методу getStaticProps включите getServerSideProps для рендеринга на стороне сервера.
   • Этот метод выполняется при каждом запросе, что делает его подходящим для динамических данных.
   • Убедитесь, что вы экспортируете этот метод в вашем компоненте страницы.

2. Использование данных:

   • getServerSideProps должен возвращать необходимые данные, как это обычно делается для методов получения данных в Next.js.
   • Данные будут доступны в качестве пропсов вашему компоненту страницы.

3. Развертывание на системе, поддерживающей SSR:

   • Next.js предоставляет SSR “из коробки”, что означает, что вам не нужно изменять конфигурации для поддержки этой функциональности.
   • Для эффективности вы можете использовать механизм кэширования для данных, которые остаются постоянными между последующими запросами.

Пример кода: Страница, требующая рендеринга на стороне сервера

1. Компонент страницы: Pages/ServerSide.js

    export default function ServerSide({ time }) {
      return <p>Текущее время: {time}</p>;
    }
    
    export async function getServerSideProps() {
      return {
        props: {
          time: new Date().toISOString(),
        },
      };
    }

Этот код предоставляет проп time, который обновляется при каждом запросе, демонстрируя рендеринг на стороне сервера.

2. Ссылка в вашем приложении: ParentComponent.js

    import Link from 'next/link';
    
    export default function ParentComponent() {
      return (
        <div>
          <Link href="/ServerSide">Страница с текущим временем</Link>
        </div>
      );
    }

Пользователи видят обновленное время каждый раз, когда они обращаются к странице “Страница с текущим временем”.

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

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

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

Когда использовать getStaticProps

• Постоянство контента: Для контента, который не меняется часто, например, для блога, где вам не нужно перестраивать страницу каждый раз при изменении.
• Получение данных: Когда данные получаются из бессерверного CMS, внутреннего API, внешних сервисов или баз данных, которые не связаны в реальном времени.
• Производительность: Для выигрыша от кэширования и более быстрого обслуживания страниц, особенно для контента, который часто запрашивается.

Пример кода: Использование getStaticProps

export async function getStaticProps() {
  // Получение данных из API
  const res = await fetch('https://example.com/data');
  const data = await res.json();
 
  // Передача данных на страницу через пропсы
  return {
    props: { data },
    // Перегенерация страницы каждые 60 секунд (опционально)
    revalidate: 60,
  };
}
 
export default function MyStaticPage({ data }) {
  // Рендеринг данных на странице
  // ...
}

Назад