Next.js — это популярный JS-фреймворк, обладающий невероятной мощью. Это один из моих любимых фреймворков, поскольку он проделывает огромную работу, делая свои API простыми и понятными. Он стал производственным фреймворком для React, и это справедливо.
Мы часто склонны визуализировать вещи 🔮 и концепции, чтобы лучше их понять. Если вы хотите освоить Next.js, он предоставляет множество техник для получения данных таким образом, который подходит для вашего случая использования. Вам нужно знать, как и когда получать данные, вот и все. 🌸
Существует множество эффективных 💪 способов получения данных. Вот несколько из них:
Теперь, когда мы знаем, как они называются, давайте рассмотрим, как вы можете получать данные в Next.js в виде визуальных образов:
Генерация статических сайтов (SSG) 💯.
SSG отлично подходит для статических сайтов. Если на вашем сайте много статического контента, SSG подойдет как нельзя лучше. 💯
Без вызовов API, т.е. без внешних данных: 🙅♀️
По умолчанию он предварительно рендерится, так как данные доступны нам статически. Мы не вызываем никаких API, поэтому Next.js будет хранить их во время сборки. Например, страница «О сайте», статические навигационные данные, заголовки и т.д.
С вызовами API, т.е. внешними данными 👌
SSG предварительно генерирует, т.е. загружает весь статический контент во время сборки до того, как вы развернете свой сайт, а затем обслуживает его напрямую, что означает, что он не будет делать живые вызовы API для каждого пользователя, а вместо этого будет получать данные из сборки. Один и тот же HTML будет использоваться для каждого запроса, что делает его молниеносным⚡️.
При любой возможности используйте SSG, так как это значительно повышает производительность.
Инкрементная статическая регенерация (ISR) ⚡️.
Этот метод является одним из моих любимых 💜 способов получения данных. Он дает вам лучшее из двух миров — SSG + SSR. Вы можете выбрать повторную генерацию определенной страницы или страниц через определенный интервал времени. Допустим, вы установите интервал в 60 секунд ⏰ и первый пользователь, который посетит страницу, получит устаревшие данные, но последующие пользователи получат свежие данные. 🏄♀️
Допустим, вы управляете магазином кофе ☕️ и один из ваших продуктов становится популярным. Теперь вы хотите получить последние данные об этом магазине, но эти данные не будут обновляться каждую минуту. С помощью ISR вы можете сказать, что я хочу, чтобы данные о магазине с идентификатором 456232 обновлялись каждые 5 минут 🕰. Таким образом, вы все еще получаете 👆 преимущества предварительной генерации данных во время сборки, но также пользуетесь преимуществами свежих данных.
Пример: Старые твиты Twitter, не многие пользователи будут посещать старые твиты, так что это нормально, что старые твиты имеют устаревшие данные, хотя, с ISR, вы можете получить свежие данные для следующего запроса 🙂.
Рендеринг на стороне сервера (SSR) 🪴.
В SSR HTML генерируется для каждого запроса на сервере. Вы хотите использовать SSR для новостной ленты, где мы всегда хотим получать самые свежие и актуальные новости, но также хотим предварительно отрендерить данные, так как это хорошо для SEO. 🤖
SSR работает только на сервере, а не в браузере. 🤠
Рендеринг на стороне клиента (CSR) 👩💻
Это традиционный способ рендеринга контента для клиента 👌. При использовании CSR нам не нужно предварительно рендерить данные, вместо этого мы получаем данные во время выполнения в useEffect. Браузер отвечает за рендеринг контента для клиента. Это может повлиять на производительность, так как данные не кэшируются. 😰
Я надеюсь, что этот пост был вам полезен 🙌. Если да, то напишите в комментариях 💬 о том, как вы планируете использовать Next.js или уже используете его. Если вы хотите узнать больше о Next.js, у меня есть курс на 2 платформах: Udemy иZero to Mastery.