~ 4 мин.
Процесс аутентификации - это процесс проверки, кем является пользователь, а процесс авторизации контролирует, к чему пользователь может получить доступ. Next.js поддерживает несколько шаблонов аутентификации, каждый из которых предназначен для совершенно разных вариантов использования. На этой странице будет рассмотрен каждый случай, чтобы вы могли выбрать для своего проекта подходящий исходя из своих ограничений.
Вадим Пашаев
4/13/2022
Перевод документации
Процесс аутентификации - это процесс проверки, кем является пользователь, а процесс авторизации контролирует, к чему пользователь может получить доступ. Next.js поддерживает несколько шаблонов аутентификации, каждый из которых предназначен для совершенно разных вариантов использования. На этой странице будет рассмотрен каждый случай, чтобы вы могли выбрать для своего проекта подходящий исходя из своих ограничений.
Первый шаг к тому, чтобы определить, какой шаблон аутентификации вам нужен, — это понять, какую стратегию выборки данных вы хотите использовать. Затем мы можем определить, какие поставщики аутентификации поддерживают эту стратегию. Существует два основных шаблона:
Next.js автоматически определяет, что страница является статической, если нет требований к блокирующим данным. Об этом говорит отсутствие на странице функций getServerSideProps и getInitialProps. Вместо этого ваша страница может отображать состояние загрузки данных на пришедшей с сервера странице, а затем получать данные пользователя на стороне клиента.
Одним из преимуществ этого паттерна является то, что он позволяет обслуживать страницы из глобальной CDN и предварительно загружать их с помощью next/link. На практике это приводит к более быстрому TTI (Time to Interactive).
Давайте рассмотрим пример страницы профиля. Он изначальное отобразит загрузочный скелет и как только запрос пользователя будет завершен, он покажет имя пользователя:
Посмотреть этот пример в действии вы можете на странице.
Если вы экспортируете асинхронную функцию getServerSideProps со страницы, Next.js будет предварительно рендерить эту страницу при каждом запросе, используя данные, возвращаемые getServerSideProps.
Давайте преобразуем пример загрузки данных пользователя, чтобы использовать рендеринг на стороне сервера. Если есть сеанс, верните пользователя в качестве опоры для компонента «Профиль» на странице. Обратите внимание, что в этом примере нет скелета загрузки.
Преимуществом этого шаблона является предотвращение появления неаутентифицированного контента перед тем как поступят пользовательские данные. Важно отметить, что получение пользовательских данных в getServerSideProps блокирует рендеринг до тех пор, пока не будет разрешен запрос к вашему поставщику аутентификации. Чтобы предотвратить создание узкого места и увеличение вашего TTFB (время до первого байта), вы должны обеспечить быстрый запрос аутентификации. В противном случае рассмотрите статическую генерацию.
Теперь, когда мы обсудили паттерны аутентификации, давайте рассмотрим конкретных поставщиков и рассмотрим, как они используются с Next.js.
Если у вас есть существующая база данных с пользовательскими данными, вы, вероятно, захотите использовать решение с открытым исходным кодом, которое не зависит от поставщика.
Обе эти библиотеки поддерживают любой шаблон аутентификации. Если вы заинтересованы в Passport, у нас также есть примеры для него с использованием безопасных и зашифрованных файлов cookie:
Чтобы увидеть примеры с другими поставщиками аутентификации, проверьте папку примеров.