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