#javascript #reactjs #next.js #server-side-rendering #getserversideprops
Вопрос:
Я из среды React. Реагируйте на серверы приложений всего веб-сайта по первому запросу, а затем используйте крючок useEffect() для извлечения данных. Я слышал, что Next.js также сделайте то же самое. Но мои сомнения таковы:
- Как и какие файлы Next.js служит. Являются ли это серверы только запрашиваемой страницей или всем веб-приложением(все страницы)?
- Если он обслуживает все веб-приложение, то как он извлекает данные, когда мы перенаправляем их на какую-либо страницу, использующую getServerSideProps?
Комментарии:
1. Он обслуживает только запрошенную страницу. Вы можете увидеть сгенерированные страницы, когда вы это сделаете
next build. В случае страниц, отображаемых серверомgetServerSideProps, вызывается при каждом запросе . Пожалуйста, обратитесь к документам для получения дополнительной информации. nextjs.org/docs/basic-features/data-fetching
Ответ №1:
React-это клиентская сторона, getStaticProps предназначена для SSG (генерация на стороне сервера) и вызывается только при создании статической страницы (или при повторной проверке), getServerSideProps предназначена для SSR (рендеринга на стороне сервера), и она будет повторно отправлять всю страницу по каждому запросу и, вероятно, обслуживать ее чем-то вроде renderToNodeStream , react-dom/server после чего она будет hydrate на стороне клиента.
getServerSideProps будет вызван, как только запрос попадет на сервер, затем вы сможете получить свои данные там, вернуть их оттуда, после чего они будут переданы в качестве реквизитов в компонент вашей страницы, который затем будет отрисован на стороне сервера и передан клиенту.
В качестве альтернативы вам не нужно делать все на стороне сервера, если вы просто хотите получать данные, как обычно, используя useEffect то, к чему вы привыкли, вы все равно можете делать это как всегда, это также будет выполняться на стороне клиента, как всегда. В этом случае он просто перенаправит сам компонент на клиентскую сторону, а не на всю страницу.
Вы должны использовать getServerSideProps , если вы действительно хотите, чтобы запрос достиг сервера и восстановил всю страницу, используя данные из этой функции. Если вы просто хотите получить данные на стороне клиента, сделайте это, как всегда.
Ответ №2:
Наконец-то я получил ответ!
Документы: https://nextjs.org/docs/basic-features/data-fetching#only-runs-on-server-side
Когда вы запрашиваете эту страницу при переходе на страницу на стороне клиента через next/link или next/маршрутизатор, Next.js отправляет запрос API на сервер, который запускает getServerSideProps. Он вернет JSON, содержащий результат выполнения getServerSideProps, и JSON будет использоваться для отображения страницы. Вся эта работа будет выполняться автоматически Next.js, так что вам не нужно делать ничего лишнего, пока у вас определены команды getServerSideProps.