Помещение обработчиков событий в NextJS _document - и связь между страницами NextJS и React SPA

Question

Я изучаю NextJS и пытаюсь понять разницу между серверным и клиентским React-кодом - хотя NextJS кажется великолепным, у меня возникают некоторые проблемы с концептуальным пониманием различия между двумя типами рендеринг и что эти различия означают .

Например, я встретил следующий комментарий в документации NextJS, в разделе, описывающем `_document``

// _document is only rendered on the server side and not on the client side
// Event handlers like onClick can't be added to this file

Почему нельзя помещать обработчики событий в _document? В чем разница между этим и размещением их на стороне клиента?

Также я несколько сбит с толку, потому что NextJS, похоже, ориентирован на создание «страниц» - то есть есть поддержка добавления <HEADER> и т. Д., Как если бы мы создавали статический веб-сайт. Но если бы я построил React SPA, была бы только одна страница, не так ли? Можно моделировать разные «страницы» с помощью маршрутизатора React, но фактическое содержание HTML (заголовок, тело и т. Д.) Остается прежним, нет? То есть мы никогда не покидаем настоящую HTML-страницу?

Я могу использовать NextJS OK - следуя учебным пособиям по документации - но ясно концептуально Мне не хватает леса для деревьев. Любые подсказки или указатели очень ценятся!

Answer 1

pages/_app.js - это то место, где вам нужны клиентские коды. Он распределяется между всеми страницами.

pages/_document.js работает только в SSR. поэтому вам нужно поставить соответствующий код там.

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

SSR означает рендеринг на стороне сервера, и это происходит, когда вы набираете url в urlbar и нажимаете ввод или когда вы обновляете страницу кнопкой обновления.

CSR Рендеринг на стороне клиента, с другой стороны, является способом SPA (одностраничное приложение). поэтому URL-адрес изменился, но нет вызова с сервера. Он ищет ресурсы в каталоге pages для маршрутизации.

Next HEAD - это способ манипулировать тегами заголовка, такими как meta, title и т. Д. На каждой странице. Это даст вам свободу в настройке метки головы.