Прошло несколько лет с тех пор, как я работал над разработкой клиентских приложений с использованием React.js. Этим приложениям в основном требовались мгновенные обновления и быстрое время отклика с использованием API-интерфейсов REST, чего мы можем достичь с помощью рендеринга на стороне клиента (CSR), что просто означает отправку файлов JS в браузер, и браузер будет запускать JS для рендеринга HTML. . Основное преимущество использования рендеринга на стороне клиента заключается в том, что вам не нужен сервер для запуска вашего приложения на стороне клиента. Основными недостатками использования CSR являются медленная начальная загрузка и сложность SEO.

Другой вариант — рендеринг на стороне сервера (SSR). SSR является предшественником CSR. В приложениях SSR сервер компилирует полный файл HTML и отправляет его в браузер, а браузер просто должен отобразить этот HTML. Это устраняет недостатки CSR, но SSR имеет свои недостатки. В SSR браузер должен вызывать сервер для получения нового HTML каждый раз, когда ему нужно получить обновленные данные. Этот подход является убийцей для приложений, управляемых данными. Эта проблема и тот факт, что JS-движки на стороне клиента стали более эффективными, являются причинами того, что разработка на стороне клиента перешла от SSR к CSR.

Но недостатки КСО по-прежнему имеют решающее значение для многих организаций. Единственный способ преодолеть все недостатки — использовать гибридный подход, который может наделить SSR возможностями CSR. Здесь на помощь приходит фреймворк Next.js.

Фреймворк Next.js предоставляет нам гибридный подход, при котором любой запрос к вашему серверу обрабатывается Next.js с ответом SSR. В дополнение к HTML-коду страницы этот ответ SSR также включает пакеты CSR, которые помогут пользователю перемещаться по остальной части приложения без повторного обращения к серверу. Это гарантирует, что начальное время загрузки будет низким, а поскольку ответ SSR имеет полный HTML, SEO также очень эффективен. Кроме того, Next.js также предоставляет нам множество инструментов для настройки гибридного подхода в соответствии с нашими потребностями, но мы вернемся к этому позже.

Погружение в ваш проект:

Команда Vercel проделала выдающуюся работу, максимально упростив настройку проекта. Все, что вам нужно сделать, это запустить следующую команду в CLI, чтобы настроить новый проект Next.js.

npx create-next-app@latest

Я бы рекомендовал использовать флаг --typescript для настройки проекта с уже установленным TypeScript (TS). Правильное создание и использование типов TS в вашем приложении значительно упрощает разработку, и вы сможете избежать множества производственных ошибок.

Дополнительные инструменты:

Помимо базовой настройки, вы можете установить SASS для стилизации, Prettier для форматирования кода и SWR, который является отличным инструментом для выборки и кэширования данных. Если вы используете SWR, вам может даже не понадобиться глобальное управление состоянием, такое как Redux.

Структура файла:

По умолчанию у вас будут каталоги pages, public и styles. Каталог public можно использовать только для размещения статических файлов, таких как robots.txt. Вы должны создать каталог src и переместить в него каталоги pages и styles. Next.js использует путь pages или src/pages для сборки проекта. Каждый файл JS или TS внутри страниц считается страницей в приложении.

Теперь, на мой взгляд, лучшая файловая структура src, которую вы можете иметь, это:

api - API related functions & variables
components - Commonly reusable components
config - Commonly used configurations & constants
contexts - Commonly Reusable contexts
hocs - Commonly reusable HOCs
hooks - Commonly reusable hooks
pages - Pages & global files like _app or _document
styles - Global styling & variables
types - All the custom type definitions
utils - Commonly used utility functions
views - A view for each page, components inside subdirectories

PS: Это очень самоуверенная файловая система, ее можно модифицировать по своему усмотрению.

Вам следует посетить документацию Next.js, чтобы найти более подробную информацию о Маршрутизация.

Примечание. Вы должны поддерживать и использовать файл маршрутов с функциями, которые возвращают путь к каждой созданной вами странице.

После этого момента вы можете смело начинать процесс разработки.

Оптимизации:

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

Изображений:

Next.js предоставляет библиотеку next/image, которая предоставляет нам пользовательский компонент изображения, который можно использовать для оптимизированного отображения изображений. Он добавляет к изображениям ленивую загрузку по умолчанию, предоставляет способ загрузки оптимизированных по размеру изображений с помощью служб доставки мультимедиа, таких как Imgix или Cloudinary, размытого заполнителя изображения, кэширования файла изображения и т. д.

Скрипты:

Next.js предоставляет библиотеку next/script, которая предоставляет нам настраиваемый компонент скрипта, который можно использовать для загрузки внешних скриптов простым и настраиваемым способом. Вы можете установить стратегию, чтобы сообщить Next.js, как и когда должен быть загружен скрипт. Это очень полезно при интеграции инструментов аналитики.

Получение данных:

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

  • getServerSideProps: этот метод можно использовать на странице для получения данных, требуемых этой страницей, на стороне сервера. Это полезно на динамических страницах для SEO и ускорения начальной загрузки. Он будет вызываться только на стороне сервера при каждом запросе к странице.
  • getStaticProps: этот метод можно использовать на статических страницах, которые могут использовать данные из API. Он вызывается во время сборки, генерирует статический HTML-файл для страницы и обслуживает этот файл по каждому запросу без какой-либо обработки. Его также можно использовать для добавочной статической регенерации (ISR), в которой вы можете установить ограничение по времени revalidate для страницы, которая будет регенерироваться через определенное время.
  • getStaticPaths: этот метод можно использовать, если вы хотите использовать getStaticProps на динамических страницах. Он также будет вызываться во время сборки, вам нужно вернуть список запросов, которые может использовать getStaticProps для создания статических версий динамической страницы для каждого из запросов.

Заключение:

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

«Везде, где работают умные люди, двери открыты» — Стив Возняк

Спасибо за чтение этого!