Понимание методов рендеринга 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 работает только на сервере, и вот как он работает:

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

Когда пользователь получает доступ к странице через ссылку Next, браузер посылает запрос на сервер, который ее запускает.

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

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

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


В качестве альтернативы установите revalidate на 0:

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


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

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

Вы должны использовать рендеринг на стороне клиента (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 по умолчанию используется статический рендеринг, а содержимое извлекается и кэшируется, если вы не установили опцию кэширования на off

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 используйте revalidate в fetch следующим образом:

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


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

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

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

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