Почему считаешь классический рендеринг проще SSR

Question

Почему считаешь классический рендеринг проще SSR

Тип вопроса: Архитектура Вероятность: 10% Категория: Frontend Разработчик

Ответ

Классический рендеринг (CSR) проще, потому что:

Меньше серверной логики – не нужны дополнительные серверные обработчики для рендеринга страниц. Просто отдаётся статичный HTML с пустым root div и JS-бандлом.
Единая среда выполнения – весь код выполняется в браузере, нет необходимости синхронизировать серверный и клиентский рендеринг.
Проще кэширование – статические файлы (JS/CSS) легко кэшируются CDN.

Пример CSR (React):

// Просто рендерим всё в клиенте
ReactDOM.render(<App />, document.getElementById('root'));

SSR требует:

Настроек сервера (Node.js, Express/Next.js)
Контроля гидратации (чтобы клиентский JS "подхватил" серверный рендер)
Учета различий API (например, window недоступен при SSR)

Ответ 18+ 🔞

Да ты послушай, какая история с этим рендерингом творится! Сижу я тут, думаю, ну что за нахуй, почему все так CSR любят, а? А оказывается, всё до пизды просто.

Ну смотри, классический клиентский рендеринг — это как в старые добрые времена: ты приезжаешь на пустую хату, а потом уже сам, сука, всю мебель заносишь, картины вешаешь, холодильник пивом забиваешь. Сервер тебе просто голые стены подкидывает — вот тебе index.html, вот тебе пустой div с id="root", а вот, блядь, здоровенный ящик с JS-кирпичами. Разбирайся сам, мудила.

И в этом, конечно, своя прелесть есть, ёпта. Во-первых, серверу похуй. Сидит он такой, ни о чём не думает. Никакой там дополнительной логики, чтобы страницы готовить. Кинул статику — и свободен, пошёл пиво пить. Во-вторых, всё в одной песочнице. Весь твой код бегает в браузере у пользователя, не надо париться, чтобы на сервере и на клиенте одно и то же рисовалось. И в-третьих, закешировать — раз плюнуть. Файлы-то статические, один раз CDN их схватил — и всё, летят как по маслу до скончания времён.

Код — вообще элементарщина, один хрен:

// И всё, блядь! Закинул приложение в коробку и пошёл нахуй.
ReactDOM.render(<App />, document.getElementById('root'));

А теперь приезжает этот ваш SSR, серверный рендеринг. О, ёперный театр! Это уже не хата, а, блядь, мебельный салон с полной сборкой. Клиент приезжает — а у него уже диван стоит, телевизор висит и даже пиво в холодильнике холодное.

Но чтобы так сделать, надо же:

Сервер настроить, чтобы он Node.js крутил, Express или Next.js. Это уже не статический хостинг, тут мозги надо включать.
С гидратацией не обосраться. Это самый сок, а! Сервер отрисовал страницу, а потом клиентский JS должен её тихонечко, как маньяк, "оживить", чтобы кнопки нажимались. Один косяк — и всё, пиздец, разъезжается.
Помнить, что на сервере нет window. Да-да, та самая история. Написал в компоненте window.location — и получил, сука, ошибку при рендере на сервере. Потому что сервер — он не браузер, у него нет этого объекта. Волнение ебать!

Вот и думай теперь, что проще. Иногда проще нахуй ничего не усложнять. Но если хочешь, чтобы страницы быстро показывались и поисковики их видели — придётся этот цирк с SSR осваивать. Выбор, блядь, всегда за тобой.