Поиск по сайту:

Понимание методов рендеринга Next.js: CSR, SSR, SSG, ISR


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

Рендеринг — это процесс преобразования кода React в HTML. Выбор метода рендеринга зависит от данных, с которыми вы работаете, и от того, насколько вам важна производительность.

В Next.js рендеринг очень универсален. Вы можете отображать страницы на стороне клиента или на стороне сервера, статически или постепенно.

Посмотрите, как работают эти методы и как работает каждый из них.

Серверный рендеринг

При рендеринге на стороне сервера (SSR) когда пользователь посещает веб-страницу, браузер отправляет на сервер запрос на эту страницу. При необходимости сервер извлекает необходимые данные из базы данных и отправляет их вместе с содержимым страницы в браузер. Затем браузер отображает его пользователю.

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

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

Используйте getServerSideProps для перестройки страницы каждый раз, когда пользователь ее запрашивает.

export default function Home({ data }) {
  return (
    <main>
      // Use data
    </main>
  );
}
 
export async function getServerSideProps() {
  // Fetch data from external api
 const res = await fetch('https://.../data')
  const data = await res.json()
 
  // Will be passed to the page component as props
  return { props: { data } }
}

getServerSideProps работает только на сервере, и вот как он работает:

  • Когда пользователь обращается к странице напрямую, она запускается во время запроса, и страница предварительно визуализируется с возвращаемыми реквизитами.
  • Когда пользователь обращается к странице по ссылке «Далее», браузер отправляет запрос серверу, который его запускает.

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

Динамическая выборка данных — это запросы fetch(), которые специально отказываются от кэширования, устанавливая для параметра кэша значение «no-store».

fetch('https://...', { cache: 'no-store' });

Альтернативно установите revalidate на 0:

fetch('https://...', { next: { revalidate: 0 } });

Эта функция в настоящее время находится на стадии бета-тестирования, так что имейте это в виду. Подробнее о динамической выборке данных можно прочитать в документации по бета-версии Next.js 13.

Клиентский рендеринг

Вам следует использовать рендеринг на стороне клиента (CSR), когда вам нужно часто обновлять данные или когда вы не хотите предварительно отображать свою страницу. Вы можете реализовать CSR на уровне страницы или компонента. На уровне страницы Next.js извлекает данные во время выполнения, а когда это делается на уровне компонента, он извлекает данные при монтировании. Из-за этого CSR может способствовать снижению производительности.

Используйте хук useEffect() для рендеринга страниц на клиенте следующим образом:

import { useState, useEffect } from 'react'
function Home() {
  const [data, setData] = useState(null)
  const [isLoading, setLoading] = useState(false)
 
  useEffect(() => {
    setLoading(true)
 
    fetch('/api/get-data')
      .then((res) => res.json())
      .then((data) => {
        setData(data)
        setLoading(false)
      })
  }, [])
 
  if (isLoading) return <p>Loading...</p>
  if (!data) return <p>No data</p>
 
  return (
    <div>
      // Use data
    </div>
  )
}

Вы также можете использовать крючок SWR. Он кэширует данные и повторно проверяет их, если они устаревают.

import useSWR from 'swr'
const fetcher = (...args) => fetch(...args).then((res) => res.json())
function Home() {
  const { data, error } = useSWR('/api/data', fetcher)
  if (error) return <div>Failed to load</div>
  if (!data) return <div>Loading...</div>
 
  return (
    <div>
      // Use data
    </div>
  )
}

В Next.js 13 вам необходимо использовать клиентский компонент, добавив директиву «use client» в начало файла.

"use client";
export default () => {
  return (
      <div>
       // Client component
      </div>
  );
};

Разница между SSR и CSR заключается в том, что данные извлекаются при каждом запросе страницы на сервере в SSR, тогда как данные извлекаются на стороне клиента в CSR.

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

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

В Next.js вы должны экспортировать функцию getStaticProps на страницу, которую хотите статически отображать.

export default function Home({ data }) {
  return (
    <main>
      // Use data
    </main>
  );
}
 
export async function getStaticProps() {
  // Fetch data from external API at build time
  const res = await fetch('https://.../data') 
  const data = await res.json()
 
  // Will be passed to the page component as props
 return { props: { data } }
}

Вы также можете запросить базу данных внутри getStaticProps.

export async function getStaticProps() {
  // Call function to fetch data from database
  const data = await getDataFromDB()
  return { props: { data } }
}

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

async function getData() {
  const res = await fetch('https://.../data');
  return res.json();
}
export default async function Home() {
  const data = await getData();
  return (
    <main>
      // Use data
    </main>
  );
}

Узнайте больше о статическом рендеринге в Next.js 13 из документации.

Инкрементно-статическая генерация

Бывают случаи, когда вы хотите использовать SSG, но также хотите регулярно обновлять контент. Именно здесь помогает инкрементная статическая генерация (ISG).

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

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

Чтобы использовать ISR, добавьте свойство revalidate к функции getStaticProps на странице.

export async function getStaticProps() {
  const res = await fetch('https://.../data')
  const data = await res.json()
 
  return {
    props: {
      data,
    },
    revalidate: 60
  }
}

Здесь Next.js попытается перестроить страницу, когда запрос поступит через 60 секунд. Следующий запрос приведет к ответу с обновленной страницей.

В Next.js 13 используйте повторную проверку при выборке следующим образом:

fetch('https://.../data', { next: { revalidate: 60 } });

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

Как выбрать метод рендеринга

На данный момент вы узнали о четырех методах рендеринга в Next.js — CSR, SSR, SSG и ISG. Каждый из этих методов подходит для разных ситуаций. CSR полезен для страниц, которым нужны свежие данные, где хорошее SEO не является проблемой. SSR также отлично подходит для страниц, использующих динамические данные, но он более оптимизирован для SEO.

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

Статьи по данной тематике: