Next.JS: Как сделать ВСЕ запросы на стороне сервера

Я создаю приложение Next.JS, которое будет получать данные из API-интерфейса Python и базы данных Postgres.

Обычно это было бы просто, за исключением того, что требования таковы, что мне нужно отправлять все запросы со стороны сервера, а не клиента пользователя.

Я работал с и гроккингgetInitialProps, но я не уверен, что это полное решение, которое мне нужно из-за этой строки в README:

Для начальной загрузки страницы, getInitialProps будет выполняться только на сервере. getInitialProps будет выполняться на клиенте только при переходе на другой маршрут через компонент Link или с использованием API маршрутизации.

Кажется, что getInitialProps предназначен для начальной загрузки страницы, а не для последующей выборки данных на стороне сервера.

Как я могу спроектировать свое приложение Next.JS таким образом, чтобы все запросы приходили со стороны сервера?

Заметки:

  • Это нормально, что каждый запрос по существу приводит к начальной загрузке страницы.
  • Пользовательский клиент может общаться с сервером Node (Next.JS), так как он открыт для общественности. В настоящее время я экспериментирую с упаковкой Next.JS на экспресс-сервере.

Ты заранее за любую помощь

Источник

3 ответа

Решение

Я нашел решение, обернув Next.JS в Express!

Я поместил простой пример проекта на GitHub здесь

В репозитории есть хороший README, а также комментарии в коде, которые подробно рассказывают о том, что происходит.

Быстрое изложение:

  • Заверните Next.JS в экспресс-сервер. Явное рендеринг страниц путем вызова nextApp.render(...) что неявно происходит в стандартных приложениях Next.JS. Смотрите server.js
  • Используйте экспресс-маршрутизацию. Делайте запросы на стороне сервера перед рендерингом страниц с nextApp.render(...), Смотрите server.js.
  • Используйте стандартные теги привязки, чтобы запросы страниц попадали на экспресс-сервер. Смотрите index.js
  • nextApp.render предоставляет переданные значения на страницу в контексте (ctx) параметр getInitialProps, Вы можете сделать эти значения доступными на страницах this.props вернув их в getInitialProps, Смотрите stars.js

Предложения и улучшения приветствуются!

Источник

Я думаю, что это делается просто с помощью getServerSideProps() Официальные документы . Это так же просто, как и на самом деле: «Если вы экспортируете асинхронную функцию с именем getServerSideProps со страницы, Next.js будет предварительно отображать эту страницу при каждом запросе, используя данные, возвращаемые getServerSideProps».

Источник

Это вообще плохая идея.

Весь смысл SPA состоит в том, чтобы предотвратить загрузку всей страницы.

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

Далее предлагается использовать API для общения с сервером.

Источник
Другие вопросы по тегам