Frontend a backend: jaka jest różnica?
Frontend to część aplikacji, która działa w przeglądarce użytkownika — strony, przyciski, formularze i animacje, które widzi i klika. Backend to część działająca na serwerze, której użytkownik nie widzi: przechowuje i pobiera dane, stosuje reguły biznesowe, sprawdza, kto może co zrobić, i komunikuje się z innymi usługami, takimi jak płatności czy e-mail. Te dwie części rozmawiają przez API, a razem z bazą danych tworzą aplikację „full-stack”.
Dlaczego to ważne, gdy budujesz z AI
Kiedy opisujesz aplikację narzędziu AI, opisujesz obie połowy naraz, nawet jeśli tego nie zauważasz. „Klienci mogą zarezerwować termin” oznacza formularz rezerwacji (frontend), reguły dotyczące wolnych terminów (backend) i miejsce, w którym zapisywane są rezerwacje (baza danych).
Znajomość tego podziału pomaga na trzy praktyczne sposoby:
- Bezpieczeństwo. Wszystko, co znajduje się we frontendzie, użytkownik może zobaczyć i zmienić. Reguły i sekrety muszą być w backendzie.
- Debugowanie. „Przycisk nie reaguje” i „przycisk reaguje, ale nic się nie zapisuje” wskazują na różne połowy aplikacji. Jeśli powiesz, co widzisz, AI szybciej znajdzie przyczynę.
- Hosting i koszty. Strona z samym frontendem jest tania i prosta w hostingu. Backend musi gdzieś działać, co wpływa na to, ile płacisz i jak aplikacja zachowuje się, gdy jest bezczynna.
Codzienna analogia
Wyobraź sobie restaurację.
Frontend to sala restauracyjna: menu, stoliki, wystrój i kelner przyjmujący zamówienie. Jest zaprojektowana dla gości, a goście widzą i dotykają wszystkiego.
Backend to kuchnia i biuro: kucharze, magazyn, kasa i zasady szefa dotyczące zniżek. Goście tam nie wchodzą i nie powinni mieć takiej możliwości.
API to przejście między nimi — okienko, przez które wchodzą zamówienia i wychodzą dania, w ustalonym formacie. Baza danych to magazyn i księga zamówień.
Klient może przepisać swoje zamówienie na kartce (frontend jest pod jego kontrolą), ale kuchnia nadal decyduje, co ugotuje i ile to kosztuje. Dlatego ważne kontrole powinny znajdować się po stronie zaplecza.
Za co odpowiada każda strona
| Frontend | Backend | |
|---|---|---|
| Działa na | Urządzeniu użytkownika, w przeglądarce | Serwerze, którym zarządzasz ty (lub twój hosting) |
| Główne zadanie | Wyświetlanie, zbieranie danych wejściowych, reagowanie na kliknięcia | Przechowywanie danych, stosowanie reguł, egzekwowanie uprawnień, wywoływanie innych usług |
| Czy użytkownicy widzą i mogą zmienić kod? | Tak — jest pobierany do ich przeglądarki | Nie |
| Czy może przechowywać sekretne klucze API? | Nie | Tak, w zmiennych środowiskowych |
| Typowe technologie | HTML, CSS, JavaScript/TypeScript, React, Vue, Svelte, Tailwind | Node.js, Python (FastAPI, Django), C#, Java, Go, Ruby |
| Co zwykle idzie nie tak | Układ rozjeżdża się na telefonie, przycisk nic nie robi, wolna strona | Dane się nie zapisują, wyświetlają się błędne dane, błędy, luki bezpieczeństwa |
Niektóre frameworki zacierają tę granicę. Next.js na przykład pozwala, by jeden projekt zawierał zarówno kod przeglądarki, jak i kod serwera. Zasada pozostaje ta sama: zawsze pytasz, gdzie działa ten element?
Przykład: rezerwacja zajęć
Oto, co dzieje się, gdy ktoś rezerwuje zajęcia jogi, krok po kroku.
| Krok | Gdzie | Co się dzieje |
|---|---|---|
| 1 | Frontend | Strona z harmonogramem się ładuje i prosi backend o zajęcia w tym tygodniu. |
| 2 | Backend | Odczytuje zajęcia i rezerwacje z bazy danych, oblicza wolne miejsca i zwraca listę w formacie JSON. |
| 3 | Frontend | Wyświetla każde zajęcia z godziną, prowadzącym i liczbą wolnych miejsc. |
| 4 | Frontend | Użytkownik wybiera zajęcia i wpisuje imię oraz e-mail. Formularz sprawdza, czy e-mail wygląda poprawnie (to uprzejmość, nie gwarancja). |
| 5 | Frontend → Backend | Wysyła żądanie POST /api/bookings przez API. |
| 6 | Backend | Ponownie sprawdza dane wejściowe, weryfikuje, czy zajęcia nie są pełne, zapisuje rezerwację i prosi usługę e-mail o wysłanie potwierdzenia, używając sekretnego klucza. |
| 7 | Backend → Frontend | Zwraca „zarezerwowano” albo „niestety, brak miejsc”. |
| 8 | Frontend | Pokazuje ekran potwierdzenia. |
Zwróć uwagę na kroki 4 i 6: dane wejściowe są sprawdzane dwa razy. Kontrola we frontendzie daje natychmiastową informację zwrotną; kontrola w backendzie jest tą, która naprawdę się liczy, bo zdeterminowany użytkownik może całkowicie ominąć frontend.
Najważniejsze pojęcia
| Termin | Znaczenie |
|---|---|
| Klient / serwer | Klient to przeglądarka (lub aplikacja), która wysyła żądania; serwer na nie odpowiada. |
| UI | Interfejs użytkownika — ekrany i kontrolki. |
| API | Ustalony sposób, w jaki frontend prosi backend o dane lub działania. |
| Endpoint | Jeden konkretny adres w API, na przykład /api/bookings. |
| Full stack | Frontend, backend i baza danych razem. Zobacz czym jest aplikacja full-stack. |
| Strona statyczna | Frontend bez własnego backendu; te same pliki dla wszystkich. |
| SPA | Aplikacja jednostronicowa: frontend, który aktualizuje stronę w przeglądarce zamiast ładować nowe strony. |
| Renderowanie po stronie serwera (SSR) | Serwer buduje kod HTML strony przed jej wysłaniem, co może poprawić szybkość i SEO. |
| Zmienne środowiskowe | Ustawienia i sekrety przekazywane backendowi podczas działania, trzymane poza kodem. |
Czy twoja aplikacja potrzebuje backendu?
| Jeśli twoja aplikacja… | Czy potrzebuje backendu? |
|---|---|
| Pokazuje informacje takie same dla wszystkich | Nie |
| Ma formularz kontaktowy, który tylko wysyła wiadomość do ciebie | Zwykle niewielki backend albo usługę formularzy |
| Zapisuje dane, które zobaczą inni | Tak |
| Ma logowanie i prywatne dane | Tak |
| Przyjmuje płatności | Tak — przynajmniej do tworzenia płatności i odbierania webhooków |
| Używa płatnego API AI lub innego API z kluczem sekretnym | Tak, by klucz nie trafił do przeglądarki |
Częste błędy i nieporozumienia
- Umieszczanie sekretnych kluczy we frontendzie. Będą widoczne dla każdego, kto otworzy narzędzia deweloperskie przeglądarki. To najpoważniejszy częsty błąd w aplikacjach budowanych z AI.
- Egzekwowanie reguł tylko we frontendzie. Ukrycie przycisku „usuń” dla użytkowników bez uprawnień nie jest ochroną; backend musi odrzucić takie żądanie.
- Zakładanie, że backend to „tylko baza danych”. Baza przechowuje dane. Backend decyduje, kto może je czytać i zmieniać, i w jaki sposób.
- Myślenie, że JavaScript oznacza frontend. JavaScript i TypeScript działają także na serwerach, dzięki Node.js.
- Obwinianie złej połowy. Jeśli strona wygląda dobrze, ale dane są błędne, problem zwykle leży w backendzie lub bazie, a nie w projekcie.
- Przesadne budowanie. Portfolio nie potrzebuje własnego backendu. Dodanie go to koszt i dodatkowe ruchome części.
O co poprosić swojego narzędzia AI
- „Które części tej aplikacji działają w przeglądarce, a które na serwerze?”
- „Przenieś wszystkie klucze API do backendu i odczytuj je ze zmiennych środowiskowych.”
- „Waliduj każdy formularz także na serwerze, nie tylko w przeglądarce.”
- „Wymuś w backendzie, by tylko administratorzy mogli usuwać rezerwacje.”
- „Strona wygląda dobrze, ale dane się nie zapisują — sprawdź logi backendu dla tego żądania.”
- „To prosta strona marketingowa; zostaw ją tylko z frontendem, chyba że potrzebujemy backendu.”
Frontend i backend w Mythex
Nowy projekt w Mythex startuje od frontendu opartego na Vite, React, TypeScript i Tailwind, a agent dodaje backend, gdy aplikacja go potrzebuje. Możesz też poprosić o osobne API w Node, Python (FastAPI), C# lub Java, działające obok frontendu w tym samym projekcie. W podglądzie przełączasz się między stroną a serwerem API, a publikacja wdraża oba, z bazą danych i magazynem plików dodawanymi w razie potrzeby. Dokumentacja opisuje aplikacje wieloserwisowe, przewodnik o hostingu stron wyjaśnia, gdzie działa każda połowa po publikacji, a szablony aplikacji to szybki sposób, by zobaczyć przykłady full-stack.
Pytania
Czym różni się frontend od backendu?
Frontend to część aplikacji, która działa w przeglądarce użytkownika — strony, przyciski i formularze, które widzi i klika. Backend działa na serwerze, którego użytkownik nigdy nie widzi; przechowuje dane, stosuje reguły biznesowe, sprawdza uprawnienia i komunikuje się z innymi usługami.
Czy każda aplikacja potrzebuje backendu?
Nie. Strona marketingowa, portfolio czy prosta strona lądowania mogą mieć tylko frontend. Gdy aplikacja musi zapisywać wspólne dane, logować użytkowników, przyjmować płatności lub używać sekretnych kluczy API, potrzebuje jakiegoś backendu.
Czy HTML to frontend, czy backend?
HTML, CSS i JavaScript uruchamiane w przeglądarce to frontend. JavaScript może działać także na serwerze dzięki Node.js — wtedy jest kodem backendu. Decyduje nie język, lecz to, gdzie kod działa.
Co oznacza full stack?
Full stack oznacza obejmowanie zarówno frontendu, jak i backendu (a zwykle także bazy danych). Aplikacja full-stack ma wszystkie trzy części, a deweloper full-stack pracuje nad wszystkimi.