Рендеринг с помощью NextJS
NextJS существует уже несколько лет, и полюбили его с тех пор, как впервые попробовали. Это потрясающий фреймворк с множеством хороших решений, но что нам понравилось, так это рендеринг на стороне сервера. Это то, что React поддерживал в течение долгого времени, но до недавнего времени и улучшений React v18 это было довольно сложно сделать. NextJS решает эту проблему очень простым и довольно гибким способом, поэтому в оставшейся части этой статьи у вас будет обзор этого.
Типы рендеринга
Поддерживается три типа рендеринга. Это:
1. Рендеринг на стороне клиента
Как только приложение загружено, все необходимые данные извлекаются на клиенте. Когда все извлечено, контент генерируется и отображается в пользовательском интерфейсе. Это также причина, по которой он называется клиентским, потому что вся работа выполняется на клиенте.
2. Рендеринг на стороне сервера
Этот вариант очень похож на клиентский, но с очевидной разницей в том, что все происходит на сервере. Как только пользователь делает запрос, на сервере подготавливаются все данные и генерируется контент, который отправляется пользователю в качестве ответа. После того, как этот контент загружен и показан, загружается весь JavaScript и все слушатели подключаются в процессе, который называется гидратацией. Чтобы использовать этот тип рендеринга, вам необходимо предоставить функцию getServerSideProps, с помощью которой вы получаете все данные, необходимые для вашего компонента.
3. Генерация статической стороны
Статическая генерация на стороне сервера - это своего рода особый тип рендеринга на стороне сервера. Разница в том, что рендеринг происходит не по запросу, а во время сборки. Возможно, у вас есть несколько страниц, которые вы хотите иметь готовыми, но они не будут часто меняться, тогда вы можете сгенерировать их содержимое во время сборки и просто подавать их уже готовыми. Существует также возможность генерировать новый контент после сборки с помощью инкрементной статической регенерации, но на данный момент это немного более продвинутая тема. Чтобы использовать этот тип рендеринга, вы предоставляете функцию getStaticProps, где вы получаете все необходимые реквизиты.
Примеры
В следующих трех разделах мы покажем, как работает каждый тип рендеринга. Сначала вы увидите небольшой компонент, отображающий имя и фамилию человека, а после него - для каждого типа рендеринга и способ загрузки данных для него.
export default function Person() {
const person = {
firstName: "John",
lastName: "Doe"
};
return (
<>
Hello {person.firstName} {person.lastName}!
</>
)
}Выше приведен компонент начальной страницы, который мы будем использовать в остальных примерах. Как вы можете видеть, это очень просто. Он имеет жестко закодированный объект с личными данными и отображает их в формате HTML. Для остальных примеров будем использовать конечную точку API /api/person для загрузки этих данных.
Рендеринг на стороне клиента
При выполнении всего на стороне клиента существует несколько способов загрузки данных. Команда NextJS рекомендует использовать хук useSWR из пакета SWR npm. Следующий фрагмент кода является примером того, как это делается.
import useSwr from 'swr';
export default function ClientPerson() {
const fetcher = (...args) => fetch(...args).then((res) => res.json())
const { data, error } = useSwr('/api/person', fetcher)
if(error) return <div>error</div>;
if(!data) return <div>loading</div>;
return (
<>
Hello {data.firstName} {data.lastName}!
</>
)
}Когда вы используете этот хук, он возвращает объект, содержащий несколько свойств, и некоторые из них являются данными и ошибкой, но есть и другие. Кроме того, вы можете запустить его условно, установив значение URL как null для случаев, когда вы не хотите запускать. Этот хук также имеет другие преимущества, такие как кэширование. Если компонент будет повторно отрисован, но значение выборки не изменится, он загрузит ответ из кэша.
Чтобы просмотреть эффекты этого типа рендеринга, вы можете открыть инструменты инспектора. На вкладке сеть вы сначала увидите загружаемую страницу, а затем дополнительный запрос на получение персональных данных из API.
Помимо этого хука, вы можете использовать обычную выборку. Проблема в том, что вам нужно обернуть его чем-то вроде хука useEffect. Причина в том, что все компоненты NextJS могут рендериться на сервере, и никакие функции, специфичные для браузера, не должны выполняться при начальном рендеринге.
Рендеринг на стороне сервера
При рендеринге на сервере, если ваш компонент не зависит от данных, можно просто оставить как есть. Но если это так, что и является целью этого примера, вам нужно экспортировать функцию getServerSideProps, которая возвращает объект, который будет передан как свойства компонента.
export default function ServerPerson({ person }) {
return (
<>
Hello {person.firstName} {person.lastName}!
</>
)
}
export async function getServerSideProps(context) {
return {
props: {
person: { firstName: "John", lastName: "Doe" }
}, // will be passed to the page component as props
}
}Как видно из приведенного выше примера кода, getServerSideProps — это асинхронная функция. И это по причине. Возвращаемые вами данные могут быть взяты из какого-либо асинхронного источника, например базы данных или другого API.
Но теперь давайте немного расскажем о том, как это работает внизу. Если вы проверите вкладку сеть вашего инспектора, на этот раз будет всего один запрос. Когда запрос пользователя поступает на сервер, сначала подготавливается реквизит. Как только это будет сделано, они будут отправлены в компонент, и будет сгенерирован окончательный HTML-код. Этот HTML-код возвращается в качестве ответа, и как только он отображается, запускается процесс, называемый гидратацией. Здесь все обработчики щелчков и другие прослушиватели привязаны к элементам.
Генерация статического сайта
Статическая генерация похожа на рендеринг на стороне сервера, но с некоторыми отличиями. Первое отличие заключается в используемой функции. В то время как на стороне сервера используется getServerSideProps, здесь используется getStaticProps.
export default function PersonStatic({ person }) {
return (
<>
Hello {person.firstName} {person.lastName}!
</>
)
}
export async function getStaticProps(context) {
return {
props: {
person: { firstName: "John", lastName: "Doe" }
}, // will be passed to the page component as props
}
}Глядя на это, вы можете задаться вопросом, в чем разница и почему используйте эту функцию вместо другой? И причина в том, когда генерируется контент. При рендеринге на стороне сервера, как мы уже упоминали, генерация контента выполняется по запросу, а этот - при сборке приложения. Как только пользователь делает запрос, контент уже существует и немедленно возвращается.
Это также может дать вам подсказку о том, когда использовать какой тип рендеринга. Если ваш контент динамичен и изменяется, рендеринг на стороне сервера может быть лучшим вариантом. Если у вас есть какой-то контент, который не будет меняться, то статическая генерация может быть лучше.
Кроме того, есть несколько более продвинутых опций со статической генерацией. Выше мы привели вам пример того, когда есть фиксированная страница, но вы также можете сделать это для динамических маршрутов. Допустим, список элементов, который редко меняется. В этом случае вы могли бы предоставить другую функцию, getStaticPaths, которая предоставит список маршрутов, которые вы хотите предварительно отобразить. Другие могут возвращать 404, или вы можете заставить их вести себя как генерация на стороне сервера.
Заканчивая
NextJS — удивительный фреймворк, и, как вы могли видеть выше, он поддерживает многое, когда дело доходит до рендеринга. Тем не менее, имейте в виду, что у каждого типа есть свой вариант использования. Надеемся, что из приведенных выше примеров вы лучше поймете каждый тип и сможете принять наилучшее решение. Код, использованный в приведенных выше примерах, можно найти в репозитории GitHub.
