Как работи технологията за сървърно рендиране (SSR)…

Server-Side Rendering (SSR) е техника, при която първото показване на уеб страница се случва на сървъра, а не в браузъра на потребителя.

При обичайното клиентско рендериране, браузърът получава празен HTML файл с връзка към JavaScript. Браузърът зарежда JavaScript, анализира го, изпълнява го и едва след това динамично изгражда DOM и показва съдържанието.

При SSR, сървърът обработва компонентите на приложението, генерира готов HTML код и го изпраща към браузъра.

Етапи на SSR:

Заявка: Браузърът на потребителя изпраща HTTP заявка към сървъра.
Рендериране на сървъра: Сървърът изпълнява JavaScript кода на приложението, включително логиката за рендериране на UI компонентите, и получава напълно оформена HTML низ.
Отговор: Сървърът изпраща този HTML файл към браузъра.
Първоначално показване: Браузърът получава HTML и веднага показва съдържанието на страницата, тъй като всички елементи вече са в разметката.
Хидратиране: След зареждане на HTML, браузърът зарежда и изпълнява JavaScript кода на приложението. Този код "оживява" статичната разметка, добавя интерактивност, обработчици на събития и свързва състоянието.

Предимства на SSR:

Подобрена SEO: Търсачките по-добре индексират страници с напълно оформен HTML.
По-бързо първо съдържание (FCP - First Contentful Paint): Потребителят вижда съдържанието на страницата по-бързо.
По-добър достъп за слаби устройства и бавен интернет: По-малка зависимост от производителността на клиентското устройство за показване на основното съдържание.

Недостатъци на SSR:

Повишено натоварване на сървъра: Сървърът извършва повече изчисления за рендериране.
Сложност при разработката: Трябва да се вземе предвид изоморфизмът на кода (възможността да се изпълнява както на сървъра, така и на клиента).
По-голям размер на отговора: Първият отговор на сървъра съдържа пълен HTML.

// Пример за клиентски код (псевдокод)
// Обикновено клиентското приложение получава празен div
const appDiv = document.getElementById('app');
// JavaScript се зарежда и създава съдържание
appDiv.innerHTML = `<h1>Здравей, свят!</h1>`;

// Пример за сървърен код (псевдокод с използване на framework)
// При SSR, сървърът генерира пълен HTML
import ReactDOMServer from 'react-dom/server';
import App from './App';

const html = ReactDOMServer.renderToString(<App />);
// Сървърът изпраща нещо като:
// <div id="app"><h1>Здравей, свят!</h1></div>

Как работи технологията за сървърно рендиране (SSR)?