Что такое SSR (Server-Side Rendering) и как это влияет на тестирование?

«Что такое SSR (Server-Side Rendering) и как это влияет на тестирование?» — вопрос из категории Архитектура, который задают на 24% собеседований AQA / Automation. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

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

Влияние SSR на процесс тестирования:

Аспект тестирования Влияние SSR
Нагрузочное тестирование Высокая нагрузка на сервер. Необходимо тестировать не только API, но и рендеринг страниц. Инструменты: JMeter, k6.
Скорость загрузки (Performance) Быстрый First Contentful Paint (FCP). Тестируем время отклика сервера и размер итогового HTML. Инструменты: Lighthouse, WebPageTest.
Тестирование верстки/контента Контент доступен сразу. Selenium-тесты могут работать без ожиданий загрузки контента через JS. Проверка SEO-метатегов становится критичной.
Тестирование интерактивности После загрузки HTML может потребоваться гидратация (hydration) JS. Необходимо проверять, что после гидратации все динамические функции (кнопки, формы) работают.
Тестирование API Могут появиться специфичные SSR-эндпоинты (например, для предзагрузки данных). Их также нужно покрывать тестами.

Пример проверки SSR в автотесте (Java + Selenium):

@Test
public void pageContentIsRenderedOnServer() {
    driver.get("https://example.com/product/123");

    // 1. Проверяем, что основной контент (например, название товара) есть в HTML сразу
    // Это возможно только при SSR, при CSR элемент изначально отсутствовал бы в DOM
    WebElement productTitle = driver.findElement(By.cssSelector(".product-title"));
    assertThat(productTitle.isDisplayed()).isTrue();

    // 2. Проверяем, что в исходном коде страницы есть данные, встроенные сервером
    // (например, в теге <script> с id="__NEXT_DATA__" для Next.js)
    String pageSource = driver.getPageSource();
    assertThat(pageSource).contains("Product Name: Cool Gadget");

    // 3. Проверяем корректность мета-тегов для SEO
    String metaDescription = driver.findElement(By.cssSelector("meta[name='description']"))
                                   .getAttribute("content");
    assertThat(metaDescription).isNotEmpty();
}

Ключевые проверки для QA: Убедиться, что SSR действительно происходит, контент виден без JavaScript, время ответа сервера в норме, а после гидратации клиентский функционал работает корректно.