Что именно рендерит на сервере Next.js?

Question

[Тимур Макаров]

Добрый день! У меня нет чёткого понимания что происходит в Next.js и почему он называется server-side. Сайт компании zeit, разработчиков Next.js с виду напоминает обычный SPA, если посмотреть во вкладке Network, то по определённым путям он присылает кусок JavaScript-кода, разница между обычным SPA только в том, что SPA грузит всё сразу, а этот по требованию. Но я понимал server-side немного иначе - сервер рендерит HTML и отправляет на клиент вместе с React, а тот уже не производит первичный рендер, а просто управляет дальнейшими действиями. Скажите, я правильно понял работу Next.js и его серверный рендер? Спасибо за ответ :)

Answer 1

[nugig]

То что ты смотришь во вкладке Нетворк - это не сервер-рендеред, это и есть СПА. ССР - это то, благодарся чему ты сможешь использовать любой урл с этого сайта и сервер тебе отдаст отрендеренную статику. А дальше уже переходы будут как СПА.

И разницу ты не правильн опонял. Нормальный СПА не грузит все сразу, и тоже подгружает по роутам. НО ОН НЕ ОТДАЕТ СТАТИКУ ПО КАЖДОМУ УРЛ ЗАПРОСУ.

Answer 2

[Islam Ibakaev]

у них, видимо, code-splitting "из коробки", но ты и сам можешь настроить, если с вебпаком "в ладах"

При серверном рендеринге(поправьте, если ошибаюсь) сначала создаётся экземпляр store, затем он вскармливается корневому элементу приложения, чтобы данные заполнили компоненты(словно вода заполняет иссохшее русло реки), затем всё это "добро" рендерится в старый-добрый html и возвращается на клиент.

Затем на клиенте react проверяет совпадают ли значения аттрибутов data-react-checksum клиетского приложения и серверного. Если совпадают, это означает, что если мы "поднимем" клиентское приложение(дорогая операция), то что мы получим будет совпадать с тем, что отправил сервер. Выходит, что этого можно избежать. Именно это и делает реакт, просто копирует полученный на сервер DOM в клиентское приложение.

Next.js делает всё это за тебя. С одной стороны это хорошо, не надо возиться с настройкой серверного рендеринга, с другой стороны - плохо, потому что всё-таки стоит знать как всё происходит в деталях на сервере.