Cześć
Czy ktoś mógłby mnie nakierować na to na co powinienem zwrócić uwagę przy pisaniu appki w ReactJs, która będzie się rozrastać zarówno o treści typowo statyczne (tekst na nowo powstających podstronach) jak i te bardziej dynamiczne (jakieś komponenty, które coś przeliczają <ceny, powierzchnie itp., itd.> ).
Chodzi mi o to żeby po zbundlowaniu strony(domyślnie do jednego pliku) i wrzuceniu jej na serwer móc później wrzucać na nowo tworzące się w późniejszym terminie podstrony.
Chciałbym te podstrony dodawać do appki bez bundlowania tego co było już wcześniej zbundlowane. Jak powinien wyglądać szkielet czegoś takiego ?
Wiem, że temat jest obszerny, więc wystarczy mi jakiś w miarę sensowny link. Dodam, że backend w razie czego również jako tako ogarniam.
Appka będzie się rozrastać co tydzień, a nawet częściej i chciałbym ją na bieżąco klientowi dostarczać (nowe podstrony) bez zmiany tego co już istnieje.
Musisz poczytać o tym jak robi się routing w React.
Przy aplikacji SPA będziesz musiał użyć biblioteki podobnej do react router (https://reactrouter.com/), która pozwala na tworzenie dynamicznego routingu.
Załóżmy, że mamy taki przykład
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/o-nas" element={<AboutUsPage />} />
<Route path="/blog/:category" element={<CategoryPage />} />
<Route path="/blog/:category/:articleId" element={<ArticlePage />} />
</Routes>
to przy adresach /blog/:category oraz /blog/:category/:articleId biblioteka będzie próbować dopasować dowolną treść jaką podamy jako adres url
/blog/sport/
/blog/sport/mistrzostwa-swiata-w-pilce-noznej
/blog/technologia
/blog/technologia/powstaly-nowe-procesory-amd
itd
Wtedy pobierasz dany adres po stronie aplikacji, wysyłasz go do swojego backendu przez API i on sprawdza, czy dana podstrona istnieje.
@Xarviel: Routing ogarniam, ale nie do końca o to mi chodziło.
Mam np. istniejącą stronę dot. finansów.
Po jakimś czasie np.(teraz tego nie wiem ) przychodzi mi do głowy wzbogacić ją o temat płac a dodatkowo chcę zamieścić na niej kalkulator płacowy.
Potem, po miesiącu lub tygodniu pomyślałem, że napiszę więc jakąś podstronę o kredytach a przy okazji pomyślałem o dodaniu do niej kalkulatora spłaty rat kredytów.
W przykładzie, który dałeś, z góry musze określić temat podstrony a chcę je umieszczać sukcesywnie, etapami.
Nie wiem czy muszę zagłębiać się np. w mikrousługi i konteneryzację ? Wolałbym nie.
Pomysły dla reacta + ewentualnie (niekoniecznie, ale jak trzeba) w backend?
@Xarviel: O.K. - jeżeli jesteś pewien i podtrzymujesz, że przy pomocy dynamicznego routingu w React można zrobić to o czym napisałeś i to co uszczegółowiłem w moim następnym poście to daj znać - zgłębię wówczas to jeszcze bardziej.
liter napisał(a):
@Xarviel: O.K. - jeżeli jesteś pewien i podtrzymujesz, że przy pomocy dynamicznego routingu w React można zrobić to o czym napisałeś i to co uszczegółowiłem w moim następnym poście to daj znać - zgłębię wówczas to jeszcze bardziej.
To jest jeden z elementów, który do tego będzie na pewno potrzebny.
Oprócz samego routingu możesz poczytać jeszcze o połączeniu Reacta z panelem administracyjnym (CMS) typu WordPress, Strapi, DatoCMS itd, bo myślę, że mniej więcej o to tobie chodzi.
Wtedy po stronie CMSa można zarządzać treścią na podstronach, a po stronie aplikacji musisz przygotować szablon, który to pobierze z bazy i wyświetli.
Rozwiązałoby to część problemów z dodaniem nowych podstron, albo zmianą tekstu na stronie, bo byłyby dynamiczne, ale przy niektórych zmianach nadal byłby potrzebny raz na jakiś czas build aplikacji.
Taka uwaga ode mnie. React w podejściu typowym SPA gdzie strony budowane są w całości przez javascript w kliencie przeglądarki to nie jest najlepsze rozwiązanie pod kątem SEO. Co prawda crawlery Google radzą sobie jakoś z odpalaniem javascriptu i zbudowaniem tego, ale Google to nie wszystko. Jeżeli myślisz o aspektach takich jak pozycjonowanie tych treści, miniaturki w social przy udostępnianiu itp to niestety ale react spa nie jest najlepszym rozwiązaniem. Tutaj może pomóc np. Next.js który może w locie renderować dynamiczny content na serwerze dzięki czemu pierwszy plik HTML pobrany przez przeglądarkę ma już w sobie właściwy content i meta tagi.
@szman: O.k. - z tym SEO chyba się zgadzam. Piszę, że "chyba", bo osobiście tego nie przerabiałem i nie wiem czy to co piszesz tak w 100% jest aktualne (świat leci do przodu), bo są jakieś rozwiązania, które w tym pomagają (react-gtm-module, google-ga4). Nie wiem czy tak dobrze jak render po stronie serwera, ale zarówno te narzędzia w połączeniu z rozwijającymi się narzędziami (botami) jakie zapuszcza mr. Google dają coraz lepsze rezultaty.
Nie będę się jednak upierał przy konkretnym rozwiązaniu. Nie chciałbym jednak odkrywać Ameryki na nowo i byłbym wdzięczny na podesłanie linka do jakiegoś w miarę dobrego opracowania dotyczącego tego zagadnienia - czyli: rozrastającej się sukcesywnie strony ( nowo tworzona treść + jakieś kalkulatory, dynamiczna interakcja) + SEO.
To wszystko bez konieczności grzebania w kodze istniejącej już, postawionej na serwerze stronie, ... a przynajmniej bez grzebania co tydzień lub dwa.
Co tydzień lub dwa chciałbym jedynie dołączać i integrować z istniejącą treścią ten nowy kod.