Next JS — это среда JavaScript на основе React, используемая для создания веб-приложений. Основное преимущество Next JS по сравнению с обычным React — разница в выборке данных.
React использует рендеринг данных на стороне клиента, что означает, что когда пользователь открывает веб-страницу, данные отображаются во внешнем интерфейсе. Это приводит к снижению производительности веб-приложения, поскольку загрузка веб-страницы занимает больше времени. Здесь на помощь приходит Next JS.
В Next JS есть несколько способов получения данных, здесь мы будем изучать рендеринг на стороне сервера (SSR).
Вместо использования обычного рендеринга на стороне клиента Next JS дает разработчику возможность загружать данные на сервер, используя концепцию рендеринга на стороне сервера.
При рендеринге на стороне сервера (SSR) начальная страница визуализируется на сервере и передается на сторону клиента после отправки исходной HTML-страницы. Рендеринг на стороне клиента происходит так же, как и в обычном реагирующем приложении. Эта концепция значительно ускоряет загрузку данных и делает контент доступным для поисковых роботов.
Пример рендеринга на стороне сервера на Next JS.
Код в функции getServerSideProps выполняется на стороне сервера, поэтому данные извлекаются на сервере и возвращаются в виде свойств.
Затем функция TodoCard получает доступ к свойствам, которые затем можно отобразить на странице.
Следующая JS-маршрутизация
Next JS имеет очень простую в использовании систему маршрутизации, каждый файл, который вы создаете в каталоге pages, будет маршрутом.
Если я создам файл about.js внутри каталога pages:
Теперь, когда вы переходите к /about, контент в этом файле about.js будет отображаться.
Next JS — это забавный фреймворк, с которым можно поработать, чтобы узнать больше удивительных вещей о Next JS. Рекомендуем прочитать документацию.
