Чим код, що виконується у браузері, відрізняється від коду, що виконується на сервері?

1. Що таке client-side code і де він виконується?

Client-side code (код на стороні клієнта) — це програмний код, який завантажується з сервера та виконується безпосередньо у веббраузері на пристрої користувача (в його браузерному контексті). Головне його призначення — покращення зовнішнього вигляду, структури, навігації та інтерактивної поведінки вебсторінки.

2. Що таке server-side code і де він виконується?

Server-side code (код на стороні сервера / backend / серверні сценарії) — це програма, яка виконується на вебсервері (або сервері застосунків) ще до того, як відповідь буде надіслана користувачеві. Його основне завдання — обробка запитів клієнта, бізнес-логіка, взаємодія з базою даних та генерація динамічної відповіді (HTML, JSON, файли).

3. Які задачі зазвичай виконують HTML, CSS і JavaScript у браузері?

Усі три технології працюють у браузері узгоджено як єдина команда:

HTML створює «скелет» і структуру сторінки, розмічаючи заголовки, списки, форми, кнопки й текстові блоки.

CSS відповідає за зовнішнє оформлення («шкіру»): задає кольори, шрифти, сітку layout, відступи, розташування елементів та анімації.

JavaScript «оживляє» сторінку: забезпечує динаміку та інтерактивність (обробку дій користувача, клієнтську перевірку форм, оновлення вмісту сторінки без її повного перезавантаження).

4. Які задачі зазвичай виконує backend-код на сервері?

На сервері backend-код виконує такі ключові функції:

Обробка та валідація даних: перевірка й очищення даних, отриманих від користувача через форми або API.

Взаємодія з базою даних: ефективне збереження, пошук, оновлення та вилучення інформації (наприклад, товарів, користувачів).

Контроль доступу та автентифікація: перевірка облікових даних, керування правами доступу, сесіями (Session) та токенами (JWT).

Генерація відповідей: підстановка даних у HTML-шаблони або формування вихідних даних у форматі JSON/XML для API.

Фонові операції: надсилання e-mail сповіщень, логування подій та інтеграція з іншими бізнес-системами.

5. До яких даних і ресурсів має доступ код у браузері, а до яких — код на сервері?

Код у браузері (Client-side): має доступ до об'єктного дерева сторінки (DOM), браузерних API, куків та клієнтських сховищ. При цьому весь код, надісланий у браузер, є повністю відкритим для перегляду, аналізу та модифікації користувачем.

Код на сервері (Server-side): має direct доступ до серверної бази даних, файлової системи сервера, внутрішніх мережевих сервісів та секретних змінних оточення. При цьому вихідний код серверних скриптів залишається повністю прихованим від відвідувачів.

6. Чому секретні дані, паролі, API keys і логіку безпеки не можна зберігати тільки у frontend-коді?

Оскільки JavaScript у браузері виконується на комп’ютері користувача, будь-який відвідувач (або зловмисник) може відкрити вихідний код у DevTools, витягти змінні чи маніпулювати ними. Довіряти клієнтському коду перевірку паролів або зберігати в ньому секретні API-ключі небезпечно — зловмисник може підробити значення або обійти перевірку. Головне правило безпеки — ніколи не довіряти даним із клієнта та здійснювати всі критичні перевірки й збереження секретів виключно на сервері.

7. Як браузерний код і серверний код обмінюються даними через HTTP request, HTTP response та API?

Взаємодія відбувається за схемою Клієнт–Сервер за допомогою протоколу HTTP:

HTTP Request (Запит): браузер формує та надсилає запит на сервер. Запит містить URL-адресу, метод (GET, POST, PUT, DELETE тощо), заголовки (Headers), куки та, за потреби, тіло (Body) з даними.

Обробка на сервері: вебсервер або вебзастосунок приймає запит, аналізує його параметри/тіло, виконує обчислення або запити до бази даних.

HTTP Response (Відповідь): сервер повертає відповідь зі статус-кодом (наприклад, 200 OK, 404 Not Found, 302 Found), заголовками та тілом (HTML-кодом або JSON-структурою).

За допомогою Web API (наприклад, Fetch API) frontend-код може надсилати асинхронні HTTP-запити на backend і отримувати JSON-дані для миттєвого оновлення потрібного блоку сторінки без її повного перезавантаження.

8. Що відбувається на frontend і backend при відправці форми, вході в акаунт або оформленні замовлення?

На Frontend:

Користувач вводить дані у форму та натискає кнопку відправки.

Виконується первинна клієнтська перевірка формату (наприклад, чи вказано @ в email).

Дані кодуються (як URL-параметри для GET або у тілі запиту для POST) та надсилаються на вказаний у атрибуті action URL.

На Backend:

Сервер приймає та зчитує тіло запиту.

Проводиться обов’язкова сувора перевірка та очищення даних (sanitization/escaping) для захисту від SQL-ін'єкцій та XSS-атак.

Якщо це вхід в акаунт — перевіряється пароль у БД та створюється сесія (із записом Session ID у cookie) чи генерується JWT-токен.

Якщо це замовлення — оновлюється база даних (фіксується покупка, змінюється залишок на складі) та надсилається відповідь зі статусом або редиректом.

9. Чи може один і той самий JavaScript виконуватися в браузері та на сервері (Node.js), і чим відрізняється середовище?

Так, JavaScript може виконуватися і в браузері, і на сервері за допомогою середовища Node.js.

Основні відмінності середовищ виконання:

У браузері: JavaScript працює всередині захищеної «пісочниці», має доступ до об'єктів DOM (document, window) та UI-подій, але позбавлений прямого доступу до файлової системи чи мережевих сокетів ПК із міркувань безпеки.

В Node.js (на сервері): JavaScript виконується на рушії V8 поза браузером. Він не має об'єктів DOM чи window, але володіє повним доступом до файлової системи (node:fs), створення HTTP-серверів (node:http), системних процесів та змінних оточення за допомогою подієвого циклу (Event Loop).

10. Як розподіл логіки між client та server впливає на швидкість, безпеку, SEO та архітектуру?

Швидкість (Performance): винесення логіки на клієнт (Single Page Applications) робить подальшу взаємодію чутливою, але великі JS-файли уповільнюють перше завантаження. Серверний рендеринг (SSR) або статична генерація (SSG) забезпечують швидку первинну появу контенту, але часті додаткові мережеві запити до сервера можуть створювати затримки.

Безпека: перенесення авторизації, бізнес-правил та роботи з БД на сервер надійно захищає код і дані від втручання. Клієнтська логіка вразлива до XSS, IDOR та маніпуляцій, якщо backend не перевіряє запити повторно.

SEO (Індексація): сторінки з серверним рендерингом (SSR / SSG) віддають готовий HTML, який роботи Google легко індексують. Чисто клієнтський рендеринг (CSR) змушує робота чекати виконання JS, що може затримувати або ускладнювати процес індексації.

Архітектура: розділення на frontend (UI) та backend (API) дозволяє створювати гнучкі сервіси, підключати мобільні додатки та сайти до єдиного API та простіше масштабувати систему.