Szybkie i Nowoczesne Strony
4 godz. 29 min · ReactJS · Full-stack i Programowanie
Adam RomanskiFrontend developer & YouTube CreatorI tak i nie! Gatsby to faktycznie React wzbogacony o pewne supermoce. Na początku kursu dowiesz się, jak poprawnie ich używać. Opowiem Ci w jaki sposób zaszyto Reach Router we wnętrze Gatsbyego – zobaczysz, że to bardzo intuicyjne i wygodne rozwiązanie. Ponadto opowiem Ci, w jaki sposób tworzyć uniwersalne, globalne style i layouty dla naszej aplikacji, aby zaoszczędzić sobie pracy. W tym wszystkim pomogą nam pluginy przygotowane specjalnie dla Gatsbyego (psst! Czy wiesz, że Gatsby posiada ich ponad 1500?).
Nie masz konta na fejsie? Nie szkodzi! Facebook stworzył nie tylko popularną platformę społecznością (i Reacta 😎), ale także przełomową specyfikację dla GraphQL – języka służącego do komunikacji między klientem a serwerem. To właśnie GraphQL zasila Gatsbyego w warstwę danych. Nie ważne czy mówimy o obrazkach, plikach markdown, json, yaml czy po prostu API – aby to wszystko ze sobą pogodzić musisz znać GraphQL. A ja w tym kursie pokażę Ci, że korzystanie z niego to czysta przyjemność.
Na początku pomysł importowania obrazów przez GraphQL może Ci się wydawać przerostem formy nad treścią. Dlatego poświęciłem w tym kursie cały dział na to, aby pokazać Ci, jak potężne możliwości stoją przed developerem wyposażonym w GraphQL, Sharp Image Transformer oraz Gatsbyego. Zapomnij o skalowaniu, przerabianiu i dostosowywaniu obrazków ręcznie w programach graficznych. Sprytne rozwiązania w Gatsbym pozwolą Ci za pomocą paru linijek zoptymalizować zasoby wizualne dla twojej strony.
Zarządzanie treścią to krytyczny punkt wielu produktów cyfrowych – z jednej strony CMS (content management system) musi być użyteczny dla developera przygotowującego całą strukturę treści, ale z drugiej strony ich końcowym użytkownikiem zawsze jest edytor, który nie musi znać się na programowaniu. W tym kursie pokażę Ci, jak w dosłownie kilku krokach stworzyć wygodną w użyciu strukturę dla bloga w oparciu o pliki markdown. Z małym udziwnieniem. Będą to pliki MDX łączące prostotę plików markdown z potężnymi możliwościami Reacta.
HeadlessCMS to podejście, które może przywoływać na myśl horrory klasy B, natomiast ich działanie przyprawia o zachwyt rodem z komedii romantycznej. Gdy zobaczysz jak proste, intuicyjne i wygodne (zarówno dla developera i edytora) jest korzystanie z podejścia headless, już nigdy nie wrócisz do klasycznych CMS-ów. W tym kursie pokażę Ci to na przykładzie fenomenalnego produktu jakim jest DatoCMS, którego odkryłem podczas budowania dużej struktury informacji dla strony mojej firmy.
Deployment strony w Gatsbym zajmuje dosłownie kilka sekund, zwłaszcza jeśli użyjemy do tego odpowiednich narzędzi. W tym kursie dowiesz się, w jaki sposób Gatsby przygotowuje zasoby przed wysłaniem ich na serwer, skąd biorą się dane w Gatsbym oraz w jaki sposób wdrożyć gotową stronę za pomocą serwisu Netlify.
Ten kurs powstał z myślą o osobach, które chcą być na bieżąco ze zmieniającym się ekosystemem frontendowym. Kurs koncentruje się nie tylko na Gatsby.js, ale także na technologiach orbitujących wokół tej technologii, korespondujących z nowym trendem nazwanym JAMStack.
2.19.12+
Okej teraz już na serio zaczynamy wprowadzanie do gatsby js
i pierwszym pytaniem na które chciałbym ci odpowiedzieć jest czym właściwie
jest gatsby obecnie w react a właściwie w ekosystemie react
mamy kilka takich większych technologii które gdzieś tam się
wybijają które są wykorzystywane i takie trzy które należy wyróżnić to
jest oczywiście sam react po prawej stronie tutaj next js o którym trochę
więcej za chwilę i gatsby o którym będziemy mówić w tym kursie każda
z tych technologii wykorzystuje nieco inaczej react i w nieco inny sposób
przygotowuje pliki do wydeployowania na serwer inaczej też te
serwery się zachowują więc to wszystko trzeba teraz wyjaśnić przy okazji
w tej lekcji dowiesz się czym jest server side rendering czym jest generator stron statycznych i
czym jest client side rendering i to właśnie od client side renderingu zaczniemy
bo to właśnie z niego korzysta react js czyli nasza
czysta technologia react'owa zacznijmy więc od podstaw
od stworzenia aplikacji reactowej mamy tutaj kilka komponentów
oczywiście symbolicznie przedstawionych mamy app js searchbar header
galerię i jakąś listę to są komponenty takie bloki
z których budujemy naszą aplikację reactową i kiedy już stworzymy naszą aplikację
tak jak robiliśmy to na przykład w moim kursie o react czy o zaawansowanym
czy o podstawach czy o react w praktyce tam zawsze właśnie tworzyliśmy
tego typu komponenty które następnie jeśli chcielibyśmy je wrzucić
na serwer musimy zbuildować czyli właśnie przejść przez ten build proces
który przygotowuje pliki javascript do
wrzucenia na serwer przy pomocy webpacka pliki są odpowiednio
transpilowane kompresowane przygotowywane właśnie do tego żeby były optymalne
do uruchomienia w przeglądarce następnie ten
bundle wrzucamy na serwer te trzy prostokąty po prawej stronie to
jest symbol serwera do tego ograniczają się moje zdolności artystyczne mam nadzieję że ci
się podoba mój serwerek i po wrzuceniu na serwer zaczyna się prawdziwa
zabawa czyli korzystanie z naszej aplikacji reactowej co tam właściwie się dzieje więc
jeśli wejdziemy sobie na przykład na stronę netflix.com która
właśnie korzysta z react to wyślemy z naszego komputera z
naszej przeglądarki zapytanie na serwer netflix który
w odpowiedzi wyśle nam plik html plik js i tutaj dla ułatwienia
nie będę mówił w ogóle o stylach style nas nie interesują załóżmy że po
prostu netflix nie ma css ale to tylko na ten przykład
po prostu to by niepotrzebnie komplikowało całą strukturę tego diagramu
a jest to niepotrzebne więc dostaliśmy pliki html i js
co tam właściwie się znajduje wchodzimy sobie na netflix i
widzimy nowy film król i co właściwie
dzieje się tutaj pod przykrywką pod maską mamy plik html
który zawiera tylko jeden div ten div z kolei zawiera id
jakieś na przykład app w naszym przypadku i to właśnie po tym selektorze po id app
nasza aplikacja reactowa rozpoznaje że to jest ten kontener
do którego trzeba wrzucić wszystkie wyrenderowane rzeczy a właściwie rzeczy które renderują się
w locie bo to właśnie o to chodzi w client-side renderingu czyli
że mamy plik html w którym mamy jakiegoś diva i
w locie w czasie tak naprawdę oglądania naszej strony react
tworzy dla nas na naszych oczach te elementy które wcześniej sami zadeklarowaliśmy
w jsx i to właśnie w czasie renderowania też tych elementów pobierane
są dane dla przykładu dałem tutaj cms bo cms
może być właśnie takim miejscem cms to oczywiście content management system narzędzie
do zarządzania treścią to może być wordpress to może być grav cms to może być
jakiś customowy system do tworzenia treści cokolwiek
jest to w każdym razie w naszych tutaj diagramach miejsce z którego
pobierane są dane w momencie renderowania naszych elementów które
będą wyświetlone na przykład tutaj tytuł filmu i opis filmu te
dane są pobierane do naszego reacta i w locie wstrzykiwane
do naszego div id app i na tym właśnie polega magia
reacta że on w czasie rzeczywistym generuje nam te wszystkie
rzeczy i na przykład jeśli w danej sekundzie coś by się zmieniło na przykład
wczoraj był lekkoduchem tutaj mamy opis jeśli lekkoduch zostałby zastąpiony jakimś
nowym słowem to po odświeżeniu naszej przeglądarki od razu widzielibyśmy
to co się zmieniło jeśli do netflixa zostałby
dodany w danej sekundzie jakiś nowy serial to po odświeżeniu przeglądarki
natychmiast widzielibyśmy to co się zmieniło ponieważ te dane pobierane
są w momencie wykonywania naszego javascriptu w naszej przeglądarce czyli
po stronie klienta dlatego client side rendering to się nazywa renderowanie po stronie
klienta więc skoro rozumiemy już jak działa react mam nadzieję że
rozumiałeś rozumiałaś to już wcześniej z moich poprzednich kursów to teraz
przejdźmy sobie do next js next js stoi nieco bardziej
po tej drugiej stronie barykady czyli po stronie server side renderingu o którym
być może słyszałeś słyszałaś więc to po prostu renderowanie naszego reacta po
stronie serwera ale jak to działa zacznijmy od tej samej aplikacji tutaj
również kiedy chcemy wydeployować wyrzucić gdzieś na serwer naszą aplikacje musimy
przejść przez proces build który przygotowuje nasze pliki ale w odróżnieniu
od reacta który był wrzucony na taki zwykły serwer oznaczony
właśnie takimi prostokątami zwykły serwer to znaczy nie wiem ovh.pl
home.pl nazwa.pl s3 na amazonie jakiś
prosty taki kontenerek na google cloud platform cokolwiek co
służy do serwowani tak naprawdę statycznych plików nic
tu nie ma innego to jest zwykły najzwyklejszy serwerek taki do wrzucania gdzie
wrzucilibyśmy na przykład nie wiem jakieś obrazki jakiś prosty pojedynczy
plik html to sa właśnie tego typu serwery na które wrzucamy też aplikacje
reactowe one nie wymagają nic więcej natomiast tutaj musimy wykorzystać
serwer node a serwer node to nic innego jak maszyna
wirtualna czasami zwana też na przykład virtual private server
albo instancja na przykład na aws ec2 albo
instancja na google cloud platform która też potrafi uruchamiać node
generalnie jest to wirtualna maszyna na której wykonywana
jest komenda node a przez to że jest wykonywana komenda node to może
uruchamiać aplikacje node'owe bo next js w odróżnieniu od react
czy od gatsby nie jest wykonywane po stronie klienta on jest wykonywany
po stronie serwera i to go różni od tych dwóch pozostałych technologii
a teraz popatrz jak wygląda wykonywanie tego kodu
i odpowiadanie na zapytania z przeglądarki właśnie w next js
mamy tutaj nasz serwer node który jest dużo bardziej zaawansowany
niż ten serwer do plików statycznych on tutaj wykonuje komendę node która
uruchamia aplikacje node w naszym przypadku next który
właśnie jest oparty na react to tutaj żyje nasza strona wysyłamy
zapytanie tym razem ze strony jobs.netflix.com/teams ona
jest właśnie stworzona w next bo sprawdzałem i teraz to zapytanie leci na serwer
nasz serwer rozpoznaje że to zapytanie które przyszło to tak naprawdę jest komenda
get która jest na route teams ponieważ to node zajmuje się tutaj routingiem
tego wszystkiego żeby lepiej to zrozumieć polecam ci po prostu zobaczyć
jak działają serwery node albo po prostu aplikacja ekspresowa taka
najprostsza na świecie żeby zrozumieć jak node rozpoznaje które
zapytania na jakie route'y przychodzą route'y to znaczy te ścieżki tutaj po slashu w
naszym przypadku mamy get właśnie na teams on wtedy mówi okej mamy tutaj geta
dla teams musimy teraz pobrać wszystkie dane i to w tym momencie w
odróżnieniu od reacta pobierane są dane czyli w momencie wykonywania naszego
kodu na serwerze pobierane są dane kiedy już zostaną pobrane to wtedy
wszystko zostaje wyrenderowane po stronie serwera stąd
server side rendering i do naszego komputera do
naszej przeglądarki lecą wyrenderowane pliki powiesz wtedy
też dostaliśmy html i js tylko tutaj wygląda to zupełnie inaczej w
przypadku reacta renderowaliśmy wszystkie nasze elementy które widzimy na stronie w locie
w momencie wykonywania javascriptu po stronie przeglądarki to
wtedy tworzyły się wszystkie obrazki wszystkie napisy wszystkie
ramki wszystkie odstępy wszystko było ustalane dokładnie w tym
momencie kiedy javascript został wykonywany natomiast w next js
to wszystko trafia do nas z serwera czyli wszystkie wyrenderowane
elementy trafiają do nas bezpośrednio z serwera co sprawia że
cała operacja wyświetlenia naszej strony jest dużo mniej obciążająca dla naszej przeglądarki
ponieważ wyświetlenie wyrenderowanego htmla jest dużo łatwiejsze niż
stworzenie tej całej struktury htmlowej w oparciu o plik javascript
który najpierw trzeba wykonać nie jest natomiast tak że ten html
który dostajemy z naszego serwera jest statyczny ponieważ react ciągle jest
zaszyty pod maską tej strony i on tak naprawdę w momencie
wczytania się naszej strony zostaje wstrzyknięty z powrotem do
naszego html ożywiając wszystkie jego elementy i dlatego że wszystko
co najcięższe dzieje się po stronie serwera czyli zarówno pobieranie
danych jak i renderowanie tego wszystkiego to nasza strona
działa szybciej jest lepiej indeksowana jest
szybciej wczytana o ile mamy dobry serwer i to wszystko powoduje że next js
jest właśnie używany w tych miejscach gdzie wydajność szybkość i seo
są tymi najważniejszymi czynnikami i w porównaniu do reacta
na przykład który wyświetlał nam elementy po wczytaniu danych w tym miejscu
czyli podczas renderowania naszej aplikacji po stronie klienta tutaj
mamy renderowanie po pobraniu danych na stronie serwera ale zauważ
że to zapytanie które leci powoduje właśnie pobranie tych wszystkich danych więc
tak jak w react ci mówiłem że jeśli dodamy jakiś nowy film do netflixa on się natychmiast wyświetli
to tutaj będzie dokładnie to samo po odświeżeniu tej strony na przykład jeśli pojawi
się jakiś no nie wiem oferta pracy no jesteśmy tutaj dla na jobs w netflixie
więc pojawia się nowa oferta pracy i po odświeżeniu naszej przeglądarki
leci nowe zapytanie do naszego node serwera pobierają mi się nowe dane
z nową ofertą pracy ta nowa oferta pracy trafia na naszą
przeglądarkę i ją widzimy więc ten mechanizm działa tutaj bardzo podobnie
i podkreślam to dlatego że w gatsby będzie działało to nieco inaczej i to
chciałbym właśnie umówić już teraz zaczynamy
tak jak w poprzednich przykładach od tej samej aplikacji mamy tutaj to
samo co wcześniej robimy build i wrzucamy pliki na serwer
ale ale zaraz co to znaczy ssr build i
czemu cms znajduje się w tym miejscu pamiętasz jak
w next wszystko co związane z pobieraniem rzeczy z
renderowaniem plików działo się po stronie serwera i to nazywało się
server side rendering to tutaj server side rendering w gatsby
dzieje się właśnie podczas builda i ten build może być wykonywany albo
na twoim komputerze poprzez wykonanie komendy gatsby build albo na
przykład na circle ci czyli narzędziu które odpala właśnie maszynę
wirtualną po to aby na przykład właśnie zbudować jakiś projekt i wysłać go automatycznie
na serwer wtedy właśnie dzieje się ten server side
rendering w gatsby czyli on dzieje się raz i dzieje się podczas wykonywania komendy
build nie podczas wrzucania plików na serwer nie podczas wysyłania
zapytania z komputera tylko właśnie podczas budowania projektu dlatego
gatsby nazywamy generatorem stron statycznych bo on tak na prawdę renderuje
to wszystko tylko raz i wysyła statyczne pliki na serwer to
podczas właśnie tego server side renderingu nazwijmy to ale wykonywanego
po stronie komputera czy też narzędzia ci to podczas niego
pobierane są dane z cms z jakiegoś api ze wszystkiego skąd
można pobrać dane w gatsby i to właśnie w tym momencie te
dane są wstrzykiwane do naszego htmla później gatsby to wszystko bundle'uje
i możemy to wysłać na serwer jak to wygląda w praktyce w
praktyce jest tak że możemy sobie wejść na przykład na moją stronę hello roman kropka com wejść
do zakładki faq i tam możemy znaleźć odpowiedzi na najczęściej zadawane mi
pytania podczas wchodzenia na tę strony wysyłamy zapytanie na serwer i
na serwerze znajdują się tak naprawdę trzy rzeczy
takie podstawowe oprócz rzeczywiście stylów js i tak dalej mamy index
html czyli główną stronę tak jak byśmy weszli na hello roman kropka com mamy
folder faq w kórym znajduje się faq html plik który
zaraz odpalimy i mamy też 404 folder w którym znajduje
się 404 html tak generalnie wygląda ta struktura gatsby i
to mogliby zobaczyć jeśli weszlibyśmy na serwer czyli tak naprawdę gatsby
renderuje wszystkie rzeczy przygotowuje wszystkie pliki i wrzuca je na serwer tak
żeby ona czekały gotowe na nas żeby odpowiednie rzeczy wysłać w odpowiedzi
właśnie do naszego komputera więc jeśli wchodzimy już na
stronę faq na mojej stronie to podobnie jak
w przypadku next znajdziemy tam wyrenderowany html tak jak mówiłem renderowanie
dzieje się tutaj w tym momencie natomiast podobnie jak w przypadku
next tutaj również dostajemy plik js
który wstrzykuje reaktywność do naszego wyrenderowanego html
następuje tak zwane rehydration tak to się nazywa w gastby czyli właśnie
nawodnienie ponowne sprawienie że ten cały
interfejs staje się reaktywny i na przykład to że tutaj jak wpisujemy sobie w szukajce jakieś
rzeczy to odpowiednie elementy znikają inne się pokazują na podstawie
właśnie filtrowania całej tej listy pytań i to jest właśnie ta
potęga gatsby że możemy mieć reaktywność na zawołanie
w nim ponieważ możemy normalnie pisać react który będzie normalnie
odpalany na naszym komputerze ale wszystko co związane
z renderowaniem dzieje się podczas build przez to strona jest szybsza strona się
szybciej ładuje strona jest lepiej indeksowana i to jest właśnie taka
ciekawa fuzja next i react jakby pobranie z tych
dwóch technologii najlepszych rzeczy i stworzenie z tego jednego spójnego
produktu różnica tutaj jest inna bo tak jak
w przypadku react mówiłem tam o dodawaniu filmów do netfliksa czy
tak jak w przypadku next mówiłem tam o dodawaniu nowej pracy na
stronie o pracy w netflixie tak tutaj jeśli chciałbym dodać nowe
pytanie które pojawiłoby się na naszej stronie to zauważ że
bez tego etapu bez ponownego zbudowania naszej
strony to pytanie nie ma prawa pojawić się na naszym serwerze nie
ma prawa pojawić się na tej stronie więc jeśli nawet ja bym dodał w
cms jakieś nowe pytanie to zaraz po odświeżeniu strony ono
nie pojawi się tutaj w wynikach ponieważ najpierw cms musiałby
można tak oczywiście zrobić musiałby triggerować wywołać build
który stworzyłby nową wersję strony wyrenderował to wszystko wysłał
to na serwer i dopiero po całym tym procesie to nowe
pytanie pojawiłoby się na mojenj stronie i to jest właśnie powiedzmy
że minus gatsby ponieważ jeśli nasze dane często zmieniają się
na naszej stronie to wtedy może nie do końca warto właśnie z niego korzystać
choć z drugiej mamy tutaj oczywiście możliwość zaczytywanie asynchronicznego
danych bezpośrednio z naszego js i wyświetlanie go ponieważ nadal
piszemy tutaj w react i o tej reaktywności na zawołanie też na pewno
trochę opowiem więc o tym wszystkim już dalszej części kursu
a w następnej lekcji powiem ci kiedy właściwie warto korzystać z tego gatsbiego kiedy
z next kiedy z react jakie są takie czynniki które warto brać pod uwagę
to wszystko już za chwilę