Next.js
Next.js — открытый JavaScript фреймворк, созданный поверх React.js для создания веб-приложений компанией Vercel (ранее ZEIT). Фреймворк был предназначен для решения проблемы React.js, связанной с отрисовкой приложения на стороне сервера - SSR, также дополняет React.js удобными решениями по навигации (routing) между страницами с помощью файлового подхода (file-system based router). Работает на сервере и в браузере.
Был создан 25 октября 2016 года компанией Vercel (ранее ZEIT).
Server Side Rendering
[править | править код]Server Side Rendering[1] (сокращенно SSR) — принцип веб-приложений, используемый Next.js, переводится с английского языка как «Отрисовка (Рендеринг) на стороне сервера». SSR Рендеринг помогает снизить нагрузку на устройство, которое использует приложение (например на сайте в браузере), ведь большинство операций производимых в приложении, относящиеся к его отображению, происходит на сервере, а не на устройстве пользователя (телефоне, планшете, компьютере и т.п.).
SEO-оптимизация
[править | править код]SSR также улучшает SEO, так как в обычном подходе, который использует React (подход SPA), все отрисовывается на стороне клиента (устройстве пользователя сайта), поэтому код страниц подгружается когда пользователь заходит на страницу, но робот поисковых систем может только просмотреть изначальный код страницы, ещё не обработанный React. Next.js решает эту проблему.
Оптимизация изображений
[править | править код]Фреймворк Next.js использует специальный компонент <Image> для создания оптимизированных изображений, который является надстройкой над <img> в HTML. Он преобразовывает изображения в современные форматы по типу WebP или AVIF и также уменьшает их размер для более быстрой загрузки страницы.[2]
App Router
[править | править код]App Router - система маршрутизации в Next.js начиная с 13 версии, представленная как альтернатива существовавшему Pages Router. Она основана на использовании каталога app и реализуют автоматизированную файловую маршрутизацию, в которой структура каталогов напрямую определяет URL страницы с использованием специальных файлов (например, page.js, layout.js, loading.js, error.js)[3][4]
В отличии от Pages Router, App Router поддерживает концепцию серверных компонентов React и позволяет переносить часть логики на сервер вместо отправки JavaScript-кода клиенту.
Примечания
[править | править код]- Официальный сайт: https://nextjs.org/
- Плюсы Server Side Rendering: https://medium.com/walmartglobaltech/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8
Ссылки
[править | править код]- ↑ Alex Grigoryan. The Benefits of Server Side Rendering Over Client Side Rendering (англ.). Medium (17 апреля 2017). Дата обращения: 11 июля 2021. Архивировано 2 октября 2021 года.
- ↑ Getting Started: Image Optimization | Next.js (англ.). nextjs.org. Дата обращения: 4 мая 2026.
- ↑ Getting Started: Layouts and Pages | Next.js (англ.). nextjs.org. Дата обращения: 4 мая 2026.
- ↑ Building Your Application: Routing | Next.js (англ.). nextjs.org. Дата обращения: 4 мая 2026.
Литература
[править | править код]- Коншин, К. (2018). Следующий. js Краткое руководство: рендеринг на стороне сервера выполнен правильно . Packt Publishing Ltd.
- Таккар М. Далее. js // Создание приложений React с рендерингом на стороне сервера. — Апресс, Беркли, Калифорния, 2020. — С. 93-137.
- Таккар М. Модульное тестирование с использованием Jest // Создание приложений React с рендерингом на стороне сервера. — Апресс, Беркли, Калифорния, 2020. — С. 153—174.