Клієнтська і серверна сторони — Веб-розробка

Код сучасного сайту зручно ділити на дві половини: клієнтський бік і серверний бік. Це як зал ресторану й кухня. У залі гість бачить меню, сервірування, рух офіціанта — те, що відбувається «перед очима». На кухні готують страву, перевіряють складники, ведуть облік — гість цього не бачить, але без кухні зал порожній.

Що таке клієнтський бік

Клієнтський бік — код, який виконується в браузері користувача. Він відповідає за те, що людина бачить і з чим взаємодіє прямо зараз: розмітка сторінки, стилі, кліки, анімації форм, перевірка поля «чи схоже це на email» до відправки. Класична трійка фронтенд: HTML (структура), CSS (вигляд), JavaScript (поведінка). Браузер завантажує ці файли з сервера й уже локально їх інтерпретує.

Приклад

Натиснули «Показати пароль» — око біля поля змінює тип input у браузері без обовʼязкового походу на сервері. Це клієнтський бік. А от «чи правильний пароль у базі» вирішує серверний бік: секретів бази в браузері бути не повинно.

Що таке серверний бік

Серверний бік — код на сервері: прийом HTTP-запитів, бізнес-правила, робота з базою даних, авторизація, формування відповіді (HTML, JSON, файл). Тут живуть мови й платформи на кшталт JavaScript (Node.js), Python, Java, PHP, C#, Go — список довгий. Важливо не зубріння назв, а роль: сервер тримає секрети, перевіряє права й віддає лише те, що клієнту дозволено бачити.

Хостинг означає, що файли й серверна логіка крутяться на машині в мережі 24/7. Клієнт лише підключається. Іноді кажуть «full stack» — людина або команда, яка розуміє обидва боки: і інтерфейс у браузері, і API з базою. Навіть якщо ви спеціалізуєтесь на одному боці, корисно знати межу відповідальності: що можна довірити браузеру, а що — лише серверу.

Увага

Усе, що потрапило в клієнтський бік (HTML/JS у браузері), потенційно видно користувачу. Не ховайте там секретні ключі API чи перевірку «чи адмін». Справжній контроль доступу — на серверний бік.

Як вони працюють разом

Типовий цикл: браузер (клієнт) робить HTTP-запит → сервер обробляє, читає базу, будує відповідь → клієнт отримує дані й малює інтерфейс, можливо ще раз звертається через API без перезавантаження всієї сторінки. Фронтенд без бекенд може бути статичною візитівкою. Бекенд без фронтенд — «кухня без залу»: API існує, але людям нікуди натискати. Веб Development — уміння зʼєднати обидва боки в один продукт.

Порада

Тримайте англійські терміни: клієнтський бік, серверний бік, фронтенд, бекенд, API. У вакансіях і командах саме так звучать ролі. Українською пояснюємо сенс, англійською — ярлики в резюме й тікетах.

Що запамʼятати

Клієнтський бік крутиться в браузері (HTML, CSS, JavaScript) і відповідає за досвід на екрані. Серверний бік крутиться на сервері: дані, правила, безпека, відповіді. Далі модуль Фронтенд розбере три шари клієнта окремо; модуль Бекенд — де «живе» сайт і як будують серверну частину.