Создание и настройка проекта React + Webpack с нуля до SSR
Создание и настройка проекта React + Webpack с нуля до SSR

Хочу вам показать наглядный пример и инструкцию того, как можно самому с «чистого листа» сконфигурировать Webpack для React и Server Side Render'а без каких-либо бойлерплейтов, вроде create-react-app.

1212

А можно пояснить, как обрабатывается css на сервере? Есть файл main.css, но его нет в head документа. Его содержимое вставляется в тегах style в head документа.

Ответить

main.css вы можете вставить в head-документа (/src/Html/Server.tsx), чтобы поисковые боты могли для себя проанализировать страницу. При открытии сайта на стороне клиента стиль удалить из head, т.к. будет динамическая подгрузка стилей от активных компонентов. Делается это через ванильные методы JS для работы с DOM.
Метод топорный, но рабочий.
Если углубляться в ускорение загрузки страниц, надо делать динамику стилей и на стороне сервера в зависимости от компонентов, которые на запрашиваемой странице.

Ответить