Что такое SSR?

2.0 Middle🔥 182 комментариев

#API и веб-протоколы

Комментарии (2)

🐱

deepseek-v3.2PrepBro AI7 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Что такое SSR (Server-Side Rendering)?

SSR (Server-Side Rendering) — это архитектурный подход в веб-разработке, при котором HTML-страница генерируется на сервере в ответ на запрос пользователя, а затем отправляется в браузер уже в готовом для отображения виде. Это классическая модель работы веб-приложений, которая получила новое дыхание с развитием современных JavaScript-фреймворков (React, Vue.js, Angular).

Ключевые принципы SSR

Рендеринг на сервере: Когда пользователь запрашивает страницу, сервер выполняет код приложения (часто на Node.js, PHP, Python или Go), который формирует полный HTML-документ с уже встроенными данными и разметкой.
Готовая к отображению страница: Браузер получает полностью сформированный HTML, который может немедленно отобразить, даже до загрузки и выполнения клиентского JavaScript.
Гибридный подход: В современных SSR-решениях после загрузки HTML страница "гидратируется" (hydrate) — клиентский JavaScript "оживляет" статическую разметку, добавляя интерактивность.

Как работает SSR на примере PHP

В традиционном PHP-приложении SSR — это стандартный способ работы. Рассмотрим пример:

<?php
// Пример SSR на чистом PHP
class ProductController {
    public function show($id) {
        // 1. Сервер получает запрос на /product/123
        // 2. Выполняем бизнес-логику: получаем данные из БД
        $product = $this->productRepository->find($id);
        
        // 3. Генерируем HTML на сервере
        $html = $this->renderTemplate('product.php', [
            'title' => $product->getName(),
            'price' => $product->getPrice(),
            'description' => $product->getDescription()
        ]);
        
        // 4. Отправляем готовый HTML клиенту
        echo $html;
    }
    
    private function renderTemplate($template, $data) {
        extract($data);
        ob_start();
        include __DIR__ . '/templates/' . $template;
        return ob_get_clean();
    }
}

<!-- templates/product.php -->
<!DOCTYPE html>
<html>
<head>
    <title><?= htmlspecialchars($title) ?></title>
</head>
<body>
    <h1><?= htmlspecialchars($title) ?></h1>
    <div class="price">Цена: <?= $price ?> руб.</div>
    <p><?= nl2br(htmlspecialchars($description)) ?></p>
    <!-- Готовый HTML сразу отображается в браузере -->
</body>
</html>

Преимущества SSR

SEO-дружественность: Поисковые боты легко индексируют полностью сформированный HTML.
Быстрая первоначальная загрузка: Пользователь видит контент сразу, без ожидания загрузки и выполнения JavaScript.
Работа в слабых сетях: Страница отображается даже при медленном соединении или отключённом JavaScript.
Единая кодовая база: Можно использовать один код и для серверного рендеринга, и для клиентской интерактивности.

Недостатки SSR

Нагрузка на сервер: Каждый запрос требует вычислительных ресурсов сервера.
Меньше интерактивности: Без дополнительного клиентского JavaScript страницы могут быть менее динамичными.
Сложность реализации: Для современных фреймворков настройка SSR требует дополнительной конфигурации.

SSR в современных фреймворках

Современные PHP-фреймворки также используют SSR:

// Пример с Laravel Blade
Route::get('/products/{id}', function ($id) {
    $product = Product::find($id);
    return view('product.show', ['product' => $product]);
});

{{-- resources/views/product/show.blade.php --}}
@extends('layouts.app')

@section('content')
    <h1>{{ $product->name }}</h1>
    <div>{{ $product->description }}</div>
    <!-- Blade-шаблон компилируется в PHP и выполняется на сервере -->
@endsection

SSR vs CSR (Client-Side Rendering)

В CSR (клиентском рендеринге) сервер отправляет почти пустой HTML и JavaScript-бандл, а браузер сам строит интерфейс. В SSR сервер делает тяжёлую работу по построению HTML, что особенно важно для:

Контент-ориентированных сайтов (блоги, новостные порталы)
Интернет-магазинов, где важна SEO-видимость
Приложений, где критична скорость первого отображения

Заключение

SSR остаётся важнейшей техникой в арсенале Backend-разработчика, особенно при работе с PHP. Современные тенденции (такие как Next.js для React или Nuxt.js для Vue) показывают, что гибридные подходы, сочетающие преимущества SSR и CSR, становятся стандартом для создания производительных, SEO-дружественных веб-приложений. Понимание SSR важно для выбора правильной архитектуры в зависимости от требований проекта.