Якщо ви маєте досвід роботи з SEO, то, можливо, вже стикалися з концепцією рендерингу на серверній стороні (Server-Side Rendering, SSR). Але чому варто віддавати перевагу саме SSR, а не рендерингу на стороні клієнта?
У цьому матеріалі ми розглянемо, що таке рендеринг на серверній стороні (SSR), його роль у сучасній веб-розробці, а також відмінності між SSR та рендерингом на стороні клієнта. Ми також ознайомимося з фреймворками та бібліотеками, які підтримують SSR, та розберемося, як вони це реалізують.
Що являє собою рендеринг на серверній стороні (SSR)?
Рендеринг на серверній стороні (SSR) – це метод веб-розробки, при якому формування вмісту веб-сторінки відбувається на сервері, а не безпосередньо у браузері користувача.
Сервер генерує повністю відрендерену HTML-сторінку і відправляє її до браузера користувача. Це означає, що саме сервер бере на себе основний обсяг роботи. Браузер отримує вже готову до відображення сторінку, що значно прискорює час її первинного завантаження.
Як функціонує рендеринг на серверній стороні?
Коли користувач робить запит до веб-сторінки, сервер збирає весь необхідний код JavaScript, HTML і CSS, а потім відправляє готову сторінку у браузер користувача.
Таким чином, браузеру не потрібно створювати сторінку з нуля, як це відбувається при рендерингу на стороні клієнта. SSR забезпечує швидке початкове завантаження сторінки, а також є корисним для SEO.
Для реалізації рендерингу на серверній стороні використовуються веб-фреймворки, наприклад, Vue.js та Gatsby.js. Вони динамічно створюють повноцінну HTML-сторінку.
Ці фреймворки отримують дані з API або баз даних, а потім використовують компоненти або шаблони для формування функціональних HTML-документів. Після завершення формування сторінки сервер відправляє її браузеру користувача без додаткової обробки.
Зображення: Reactpwa
Ось як відбувається процес рендерингу на серверній стороні:
- Користувач надсилає HTTP-запит: Користувач вводить адресу веб-сайту у адресний рядок браузера. Браузер встановлює HTTP-з’єднання і надсилає запит на сервер.
- Отримання даних: Сервер отримує потрібні дані з API або бази даних.
- Попереднє відтворення: Сервер транслює усі необхідні компоненти JavaScript у статичний HTML і надсилає цей HTML до браузера користувача.
- Завантаження та рендеринг сторінки: Клієнт завантажує HTML, отриманий від сервера, та відображає сторінку.
- Гідратація: Клієнт завантажує весь JavaScript-код, необхідний для того, щоб зробити HTML-сторінку інтерактивною.
Рендеринг на серверній стороні vs рендеринг на стороні клієнта
Рендеринг на стороні клієнта є протилежністю рендерингу на серверній стороні. В цьому випадку браузер сам створює HTML-документ, який бачить користувач. Розглянемо ключові відмінності між цими двома підходами:
| Функція | Рендеринг на серверній стороні (SSR) | Рендеринг на стороні клієнта (CSR) |
| Час початкового завантаження | Швидкий час початкового завантаження | Може бути повільним, оскільки залежить від завантаження на стороні клієнта |
| Взаємодія з користувачем | Покращена та більш плавна взаємодія з користувачем при першому відвідуванні | Може спостерігатися повільніша взаємодія при першому завантаженні, але покращується під час наступних відвідувань. |
| Доступність | Весь важливий контент завантажується разом з початковим HTML-документом, який обробляється на сервері. | Доступність може бути проблемою, особливо якщо у користувача вимкнений JavaScript. |
| SEO | SSR має усі необхідні параметри для ефективного SEO. | Деякі пошукові системи можуть мати труднощі з індексацією динамічних сторінок, створених на стороні клієнта. |
| Масштабованість | Легко масштабувати веб-сайти з високим трафіком, використовуючи рендеринг на серверній стороні. | Розробникам потрібно розробити продуманий підхід для масштабування веб-сайтів з рендерингом на стороні клієнта. |
| Безпека | Легше зменшити вразливості на сервері, коли сторінки завантажуються на сервері. | Більш вразливий до атак, таких як міжсайтовий скриптинг (XSS), та інших вразливостей, пов’язаних з рендерингом на стороні клієнта. |
Переваги рендерингу на серверній стороні для SEO
- Швидке початкове завантаження: Час завантаження сторінки – один з ключових факторів, що впливає на враження користувача від веб-сайту. SSR дозволяє користувачам майже миттєво бачити повністю завантажену HTML-сторінку. Швидке завантаження зменшує час очікування користувача перед початком взаємодії з веб-сторінкою.
- Висока продуктивність на повільних пристроях/мережах: Мережа, яку користувачі використовують для доступу до веб-сторінок, може бути повільною, або вони можуть використовувати пристрої з недостатньо продуктивними операційними системами. Рендеринг на серверній стороні означає, що пристроям користувача не потрібно запускати велику кількість JavaScript, що підвищує продуктивність. Таким пристроям більше не потрібна велика пропускна здатність або обчислювальна потужність для відображення завантажених HTML-сторінок.
- Послідовна взаємодія з користувачем: SSR дає змогу справити гарне перше враження за допомогою функції Time to First Paint (TTFP). Користувачі сприймають ваш веб-сайт як швидкий, коли HTML-сторінки завантажуються миттєво завдяки SSR.
- Покращена пошукова оптимізація (SEO): Пошукові системи, такі як Google, Bing та інші, враховують багато факторів при ранжуванні веб-сторінок. Наприклад, вони аналізують взаємодію користувача, час, проведений на сторінках, та швидкість завантаження. SSR покращує всі ці параметри, що позитивно впливає на позиції сайту в результатах пошуку.
- Проста робота з динамічним контентом: Пошукові системи добре реагують на динамічний контент. Завдяки SSR розробники можуть легко обробляти динамічний контент, а також персоналізувати його на основі даних та вподобань користувачів.
- Масштабованість та кешування: При SSR сервер виконує початкове завантаження, що зменшує навантаження на клієнтську сторону та робить систему більш масштабованою. SSR також може використовувати кешування на рівні сервера та мережу доставки контенту (CDN) для зменшення навантаження на сервер і підвищення продуктивності.
Існує декілька інструментів і фреймворків для реалізації SSR. Деякі з них призначені виключно для підтримки рендерингу на серверній стороні, а інші – для підтримки як рендерингу на стороні клієнта, так і на сервері. Розглянемо декілька найпоширеніших:
Vue.js
Vue.js – це JavaScript-фреймворк, призначений для створення інтерфейсів користувача, побудований на основі стандартів JavaScript, HTML та CSS. За допомогою цього фреймворку можна створювати як прості, так і складні користувацькі інтерфейси, використовуючи компонентну та декларативну модель програмування.
Компоненти Vue за замовчуванням створюють та обробляють DOM (Document Object Model) у браузері. Однак, цей фреймворк також підтримує SSR для рендерингу компонентів у HTML-рядки на сервері та їх безпосередню відправку у браузер. Серверна програма Vue вважається “універсальною”, оскільки більша частина коду виконується як на сервері, так і на клієнті.
React.js
React – це JavaScript-бібліотека для створення інтерфейсів користувача. Ця бібліотека використовує модель програмування на основі компонентів, де можна розділити програму на невеликі компоненти для багаторазового використання. React також є декларативним, що робить код простим для розуміння та налагодження.
React розроблено для реалізації як рендерингу на стороні клієнта, так і на серверній стороні за замовчуванням. Якщо потрібно реалізувати рендеринг на стороні сервера у додатку React, необхідно налаштувати його за допомогою фреймворку на основі Node.js, наприклад, Express.js. Також потрібно оновити скрипти у файлі package.json, щоб забезпечити “запуск” програми з сервера Express.
Gatsby
Gatsby – це фреймворк на основі React для створення веб-сайтів. Цей фреймворк з відкритим кодом розроблений, щоб допомагати розробникам створювати швидкі веб-додатки. Gatsby інтегрується з різними системами керування контентом, такими як Drupal та WordPress, що полегшує отримання даних.
Для налаштування рендерингу на стороні сервера на Gatsby потрібен сервер Node.js. SSR працює в Gatsby Cloud, де кожен запит надходить до робочого процесу у функції getServerData. Усі дані з робочого процесу передаються до компонента React, який повертає HTML-документ.
Angular
Angular – це платформа розробки, створена за допомогою TypeScript. Ця платформа має компонентну структуру, яку можна використовувати для створення веб-додатків. Angular можна використовувати для створення як малих, так і великих корпоративних додатків.
Як і React, Angular не реалізує SSR за замовчуванням. Однак, можна налаштувати програму Angular для реалізації рендерингу на стороні сервера, поєднавши її з Express.js, базовим фреймворком Node.js. Angular Universal дозволяє відображати компоненти Angular на сервері і скорочувати час первинного завантаження.
Як перевірити, чи використовує веб-сайт SSR чи CSR
Якщо ви розробник або маркетолог, то вам може бути цікаво, чи використовує веб-сайт рендеринг на стороні сервера чи клієнта. На щастя, можна перевірити веб-сайт, щоб визначити підхід до рендерингу, який він використовує. Перевіримо сайт techukraine.net як приклад. Для цього клацніть правою кнопкою миші на будь-якій сторінці та виберіть пункт “Переглянути код сторінки”.
Якщо ви бачите такі теги, як <a>, <li> та <ul>, то можна бути впевненим, що сайт використовує рендеринг на стороні сервера.
Обмеження рендерингу на серверній стороні
- Підвищена складність коду: Реалізація рендерингу на стороні сервера може вимагати додаткової конфігурації на серверній стороні. Це може призвести до збільшення обсягу коду на сервері, що ускладнить його подальшу підтримку.
- Збільшене навантаження на сервер: Хоча було зазначено, що SSR може зменшити час завантаження, це також може бути вузьким місцем продуктивності під час великого трафіку. Сервер відповідає за рендеринг HTML-контенту, що іноді може перевантажити його або навіть призвести до збою.
Чи рендеринг на стороні сервера і тегування на стороні сервера – це одне й те ж?
Ні. Рендеринг на стороні сервера — це підхід веб-розробки, коли сервер відправляє повністю завантажену HTML-сторінку до браузера. SSR призначений для збільшення швидкості першого завантаження сторінки та покращення SEO.
Тегування на стороні сервера – це місце, де вся аналітика та відстеження виконуються на сервері. Коли теги обробляються на сервері, браузеру клієнта більше не потрібно мати справу з такими процесами, що підвищує безпеку та продуктивність. Дізнайтеся більше про тегування на стороні сервера, щоб краще зрозуміти цей процес.
Висновок
Рендеринг на серверній стороні є вдалим вибором для кожного веб-розробника, який прагне підвищити продуктивність свого веб-сайту шляхом збільшення швидкості завантаження та покращення взаємодії з користувачем.
З іншого боку, якщо SSR не реалізовано належним чином, це може бути складно, оскільки ускладнюється підтримка коду. Однак переваги SSR значно перевищують складності, тому багато організацій впроваджують його.
Також рекомендуємо прочитати про причини використання тегування на стороні сервера замість тегування на стороні клієнта.