Skip to main content

Які проблеми продуктивності є у CSR?

Next.jsMiddle~2 хв читання
Запропонувати правку

CSR (Client-Side Rendering) перекладає майже всю роботу на браузер користувача. Це зручно для розробки, але з точки зору продуктивності у такого підходу є низка системних проблем.

Розберемо основні.

1. Порожній екран при першому завантаженні

При CSR сервер зазвичай віддає майже порожній HTML і великий JavaScript-бандл.

Що відбувається:

  1. Завантажується JS
  2. JS виконується
  3. Завантажуються дані
  4. Лише потім з'являється контент

Користувач довго бачить порожнечу або спінер.

Це напряму погіршує:

  • FCP
  • LCP
  • перше враження від сайту

2. Великий JavaScript-бандл

У CSR часто:

  • весь код застосунку вантажиться одразу
  • навіть код для невикористовуваних екранів
  • багато сторонніх бібліотек

Наслідки:

  • довгий download JS
  • довгий parse і execute JS
  • навантаження на слабкі пристрої

Особливо боляче на мобільних.

3. Блокування основного потоку браузера

JavaScript виконується в основному потоці.

При CSR:

  • ініціалізація застосунку
  • рендер компонентів
  • обчислення й ефекти

усе це може блокувати інтерфейс.

Результат:

  • кнопки не натискаються
  • скрол лагає
  • інтерфейс «заморожений»

4. Повільний перший рендер даних

Дані в CSR зазвичай:

  • запитуються після завантаження JS
  • приходять асинхронно
  • викликають повторні рендери

Через це:

  • з'являється «мигання» контенту
  • багато станів завантаження
  • зайві перемальовування

Користувач бачить процес завантаження, а не результат.

5. Проблеми з SEO

Пошукові роботи:

  • гірше обробляють важкий JS
  • можуть не дочекатися завантаження даних
  • витрачають більше ресурсів на сторінку

У результаті:

  • індексування повільніше
  • частина контенту може бути пропущена
  • позиції нижчі, ніж у сторінок з готовим HTML

6. Залежність від пристрою й мережі

CSR сильно залежить від:

  • потужності CPU
  • обсягу пам'яті
  • якості інтернету

Те, що швидко на MacBook:

  • може гальмувати на бюджетному Android

Продуктивність стає непередбачуваною.

7. Складність оптимізації

Щоб CSR працював швидко, доводиться вручну:

  • налаштовувати code splitting
  • оптимізувати завантаження даних
  • боротися із зайвими рендерами
  • стежити за розміром бандла

Без цього застосунок швидко деградує за швидкістю.

Підсумок

Основні проблеми продуктивності CSR:

  • довгий порожній екран на старті
  • важкий JavaScript
  • блокування інтерфейсу
  • повільне завантаження даних
  • слабка передбачуваність на різних пристроях
  • складнощі з SEO

Саме тому сучасні фреймворки намагаються зменшити частку CSR або комбінувати його із серверним рендерингом, щоб користувач бачив контент якомога раніше.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Запропонувати правку