Frontend w React oraz Backend Node (np Express) - Javascript, zasada działania

pytanie zadane 1 grudnia 2022 w JavaScript przez DeJaVu Nowicjusz (160 p.)

Cześć! Żeby zostać lepiej zrozumianym, rozbiję moje pytanie na punkty:

1. Rozumiem, że można sobie utworzyć i wywołać - a potem odpalić serwer w Node, np za pomocą Express. Słucha on co się dzieje w domenie, na jakimś porcie.

2. Rozumiem, że aplikacja React zostaje utworzona jako swój niezależny byt, że można ją wywołać na serwerze.

3. Rozumiem, że można sobie zarówno na serwerze jak i po stronie klienta, na frondendzie tworzyć API, zapytania, komunikację. Rozumiem, że istnieje możliwość, aby utworzyć frontend w React na jednym porcie, a backend na innym - że istnieje coś takiego jak polityka CORS.

NATOMIAST:

Niestety, o dziwo, odpalając serwer w konsoli, pozwalając mu słuchać - niezależnie od tego czy frontend w React i backend w Node będą na tym samym porcie czy będą osobno na różnych, rozumiejąc że ten odpalony serwer sobie już funkcjonuje, w tym wszystkim nie potrafię dostrzec jak to się dzieje że on wie jak uruchomić część Reactową i wyświetlić ją. Jak to należy rozumieć, upraszczając, analogicznie do sytuacji że serwer rozumie jak odpalić np index.php (pomijając jakiekolwiek regexy) w głównym katalogu.

1 odpowiedź

odpowiedź 1 grudnia 2022 przez Comandeer Guru (607,060 p.)
wybrane 1 grudnia 2022 przez DeJaVu

Najlepsza

Backend w Node.js na Expressie i aplikacja Reactowa to dwa oddzielne byty i zwykle użytkownik nie wchodzi w bezpośrednią interakcję z backendem. Stąd problem po prostu nie istnieje, bo ten backend nie decyduje, kiedy coś ma być renderowane.

Taki backend zwykle jest sprowadzany do roli REST API (lub API opartego o GraphQL), a więc do źródła danych. Aplikacja Reactowa wysyła do niego zapytania i jest odpowiedzialna za sensowne wyświetlanie tego, co takie API zwraca.

Dodatkowo aplikacja React może mieć własny "backend", który będzie odpowiedzialny za komunikację z takim backendem w Express.js, ale również – za server-side rendering. Czasami takie rozwiązanie nazywa się middleendem.

Zatem cała aplikacja może składać się z trzech warstw:

frontend – Reactowa aplikacja, z którą user wchodzi w interakcję,
middleend – backendowa część apki Reactowej, zajmująca się server-side renderingiem oraz komunikacją z API (jeśli np. wymaga ona uwierzytelniania kluczem i nie chcemy go wyciekać we frontendzie),
backend – aplikacja w Express.js (lub dowolnej innej technologii), która będzie służyła za REST/GraphQL API.

Jest też coś takiego jak MERN stack. Zwykle jest on ograniczony tylko do dwóch warstw – frontendu i backendu, bez warstwy middleendu. Wówczas aplikacja w Express.js zachowuje się jak "normalny" backend, czyli w chwili, gdy user wysyła żądanie pod jakiś adres, Express.js serwuje mu odpowiedź w postaci kodu HTML zawierającego też kod Reacta. Da się połączyć SSR Reacta z Expressem. Niemniej w dobie rozwiązań pokroju Next.js czy Gatsby zaryzykowałbym stwierdzenie, że się odchodzi od takiego typowego MERN stacku na rzecz nieco bardziej złożonych rozwiązań, które wykorzystują odrębny backend-API.

komentarz 1 grudnia 2022 przez DeJaVu Nowicjusz (160 p.)

Bardzo dziękuję Ci za tak szybką reakcję. Wiesz co, ale trochę o inne sedno mi chodzi.

Przyjmijmy, że mamy taką prostą strukturę aplikacji:

{

Katalog: Backend - tutaj jest serwer Express

Katalog: Frontend - tutaj jest front React

}

Uruchamiam serwer Express. No i jak to się dzieje, że Frontend który jest tak jakby obok, automatycznie zostaje obsłużony i wyświetlony użytkownikowi? Z czego to wynika? Skąd tak naprawdę serwer (tutaj Express) wie, że ma uruchomić plik HTML znajdujący się w katalogu public w aplikacji React, która znajduje się w katalogu Frontend?

:)

1	komentarz 1 grudnia 2022 przez Comandeer Guru (607,060 p.) Bo user wysyła żądanie pod jakiś adres, np. domena.pl/ i serwer widzi, że chodzi o ścieżkę / (czyli główną). Więc wtedy po prostu serwuje plik index.html z katalogu public.