Как на самом деле работает SSR на NextJS?

Некоторое время я использую NextJS, но не совсем понимаю, как на самом деле работает его процесс SSR.

Я поместил console.log внутрь метода некоторых компонентов return и вижу, что они выполняются на стороне клиента. Разве они не должны отображаться на консоли сервера, потому что используется SSR?

Кроме того, когда я пытаюсь console.log объект window, NextJS выдает ошибку, говоря, что window не определен. Это еще больше сбило меня с толку, потому что, согласно моему предыдущему тесту, console.log работает на стороне клиента, но, согласно этой ошибке, он работает на сервере.


reactjs next.js server-side-rendering vercel
person Anonymous    schedule 09.05.2021    source источник
comment
Вы не выбрали ответы ни на один из ваших предыдущих вопросов. Обязательно просмотрите прошлые вопросы и щелкните пустую галочку рядом с ответом, который помог вам больше всего, чтобы помочь другим найти его и дать людям фальшивые баллы в Интернете.   -  person Andy Ray    schedule 09.05.2021

Ответы (2)


arrow_upward
3
arrow_downward

Если вы настроили компоненты React для рендеринга на сервере (что необходимо для нестатических сайтов), когда код выполняется на сервере в NodeJS, оконного объекта нет. Это существует только в браузере. Вы должны учитывать это в компонентах SSR.

В Next есть функции, позволяющие контролировать, когда компоненты доступны только для клиента или сервера, например dynamic импорт.

В конце концов, Next на сервере в основном выполняет renderToString, и обслуживает HTML с сервера, ничем не отличается от любого другого веб-сервера, обслуживающего HTML.

Оказавшись в клиенте, React гидратирует визуализированную DOM, так как в нем повторно запускает React поверх HTML, созданного сервером. Он не меняет DOM, но добавляет такие вещи, как интерактивность, обработчики кликов и т. Д., Которые вы определили для своего приложения.

person Andy Ray    schedule 09.05.2021
comment
Но когда выполняется навигация, NextJS объясняет, что он извлекает данные страницы с помощью getServerSideProps. Это вернет JSON, который будет использоваться для повторного рендеринга страницы. Но этот повторный рендеринг выполняется на стороне клиента, а не на стороне сервера. Итак, похоже, что в этой части нет никакого SSR. - person Anonymous; 10.05.2021

arrow_upward
0
arrow_downward

На стороне сервера nextjs генерирует .js в вашем каталоге .next, если это GetServerSideProps. Если это ISR (GetStaticProps + revalidate), то он создает файлы .html, .json и .js в каталоге .next для этой страницы (или этих страниц, если они динамические). При использовании GetStaticProps sans revalidate он создает .html и .json в каталоге .next. Если не используется метод рендеринга на стороне сервера (например, GetStaticProps или GetServerSideProps), он создает только .html во время сборки (автоматическая статическая оптимизация).

Это еще не все, но это то, что я заметил, изучив содержимое выходных страниц в каталоге .next.

person Andrew Ross    schedule 09.05.2021