Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Які проблеми продуктивності є у CSR?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)CSR (Client-Side Rendering) перекладає майже всю роботу на браузер користувача, що зручно для розробки, але з точки зору продуктивності має низку системних проблем. **Ключове:** основні проблеми - довгий порожній екран при старті, важкий JavaScript, блокування інтерфейсу, повільне завантаження даних і складнощі з SEO.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення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 або комбінувати його із серверним рендерингом**, щоб користувач бачив контент якомога раніше.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.