Такие читатели, как вы, помогают поддерживать MUO. Когда вы совершаете покупку по ссылкам на нашем сайте, мы можем получать партнерскую комиссию.

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

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

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

Рендеринг на стороне сервера

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

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

instagram viewer

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

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

экспортпо умолчаниюфункцияДом({ данные }) {
возвращаться (
<основной>
 // Использоватьданные
</main>
 );
}
экспортасинхронныйфункцияgetServerSideProps() {
// Получаем данные из внешнего API
константа разрешение = Ждите выборка('https://.../data')
константа данные = Ждите res.json()
// Будет передан компоненту страницы в качестве реквизита
возвращаться { реквизит: { данные } }
}

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

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

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

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

принести('https://...', { кеш: 'нет магазина' });

В качестве альтернативы установите для повторной проверки значение 0:

принести('https://...', { далее: { перепроверить: 0 } });

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

Рендеринг на стороне клиента

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

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

Импортировать { useState, useEffect } от «реагировать»
функцияДом() {
константа [данные, setData] = useState(нулевой)
константа [isLoading, setLoading] = useState(ЛОЖЬ)
использовать эффект (() => {
 установитьЗагрузка(истинный)


принести('/api/get-data')
 .тог((рез) => res.json())
 .тог((данные) => {
 setData (данные)
 установитьЗагрузка(ЛОЖЬ)
 })
 }, [])


если (загрузка) вернуть <п>Загрузка...</п>
 если (!данные) вернуться <п>Нет данных</п>
возвращаться (
<див>
 // Использоватьданные
</div>
 )
}

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

Импортировать использоватьSWR от 'свр'
const fetcher = (...args) => fetch(...args).then((res) => res.json())
функцияДом() {
константа {данные, ошибка} = useSWR('/api/данные', сборщик)
 если (ошибка) вернуть <див>Ошибка загрузки</div>
 если (!данные) вернуться <див>Загрузка...</div>
возвращаться (
<див>
 // Использоватьданные
</div>
 )
}

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

"использоватьклиент";
экспортпо умолчанию () => {
возвращаться (
<див>
// Клиентский компонент
</div>
 );
};

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

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

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

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

экспортпо умолчаниюфункцияДом({ данные }) {
возвращаться (
<основной>
 // Использоватьданные
</main>
 );
}
экспортасинхронныйфункцияgetStaticProps() {
// Получаем данные из внешнего API во время сборки
константа разрешение = Ждите выборка('https://.../data') 
константа данные = Ждите res.json()
// Будет передан компоненту страницы в качестве реквизита
возвращаться { реквизит: { данные } }
}

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

экспортасинхронныйфункцияgetStaticProps() {
 // Вызовфункциякпринестиданныеотбаза данных
константа данные = Ждите получитьДанныеИзБД()
возвращаться { реквизит: { данные } }
}

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

асинхронныйфункцияполучить данные() {
константа разрешение = Ждите выборка('https://.../data');
возвращаться res.json();
}
экспортпо умолчаниюасинхронныйфункцияДом() {
константа данные = Ждите получить данные();
возвращаться (
<основной>
 // Использоватьданные
</main>
 );
}

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

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

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

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

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

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

экспортасинхронныйфункцияgetStaticProps() {
константа разрешение = Ждите выборка('https://.../data')
константа данные = Ждите res.json()
возвращаться {
 реквизит: {
 данные,
 },
 перепроверить: 60
 }
}

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

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

принести('https://.../data', { следующий: { перепроверить: 60 } });

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

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

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

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