Server Side Rendering w React to temat, do napisania którego zabierałem się już od dość dawna… W dobie rozbudowanych aplikacji internetowych typu SPA rozwiązanie to sprawdza się znakomicie i nie mogę pozwolić sobie na jego pominięcie na moim blogu! Ogólnie tematyka ta jest szeroka, postanowiłem więc podzielić to zagadnienie na mniejsze części i zrobić z tego serię. Z dzisiejszego wpisu dowiesz się więc, co to jest aplikacja izomorficzna/uniwersalna, czym jest Server Side Rendering oraz jakie są jego największe zalety. W kolejnych postach przedstawię natomiast różne sposoby konfiguracji tego podejścia w Twojej aplikacji.

Server Side Rendering i aplikacje uniwersalne/izomorficzne

Ogólnie rzecz biorąc aplikacją izomorficzną nazywamy taką aplikację internetową, która może być renderowana na wielu platformach jednocześnie. W naszym przypadku będzie to renderowanie zarówno na serwerze jak i na kliencie (przeglądarce internetowej). Izomorfizm aplikacji można osiągnąć na wiele sposobów - tego typu aplikacje tworzyliśmy w sumie na długo przed pojawieniem się SPA (Single Page Application). W końcu pod tę definicję można podciągnąć każdą stronę renderowaną najpierw na serwerze przez PHP/Ruby/C#/Javę, i w której kolejne interakcje z użytkownikiem odbywają się już z użyciem języka JavaScript.

W dzisiejszych czasach technologie oparte o język JavaScript pozwalają nam na to, aby aplikacje izomorficzne były jednocześnie uniwersalne. Co to znaczy? Otóż, aplikacje takie, oprócz tego, że są renderowane zarówno na serwerze jak i na kliencie to dodatkowo wykorzystują do tego w większości ten sam kod. Warto tutaj nadmienić, że te nazwy są też często używane zamiennie czyli mówiąc zarówno “aplikacja izomorficzna” jak i “aplikacja uniwersalna” mamy na myśli aplikację jednocześnie izomorficzną i uniwersalną.

Skoro rozmawiamy o React to posłużę się nim jako przykładem: tworząc uniwersalną i izomorficzną aplikację React, budujemy jedno wspólne drzewo komponentów, a następnie, przy pierwszym żądaniu do serwera, renderujemy je na serwerze opartym o node.js. Oczywiście wszelkie odwołania do REST API itp, również dzieją się na serwerze. W efekcie do przeglądarki “leci” kod HTML wypełniony wszelkimi niezbędnymi danymi. Na koniec przeglądarka ładuje skrypty JavaScript czyli kliencką wersję naszej aplikacji React (oczywiście są to te same komponenty). Po jej załadowaniu możliwe będą dalsze interakcje użytkownika z interfejsem.

Server Side Rendering to część serwerowa opisanego powyżej podejścia - tym właśnie zajmiemy się w niniejszej serii wpisów. Postaram się pokazać w niej, w jaki sposób skonfigurować serwer www oparty o node.js (na przykład express.js), jak wyrenderować za jego pomocą kod React i sprawić aby to wszystko razem prawidłowo ze sobą współdziałało.

Zady i walety aplikacji izomorficznych/uniwersalnych

Myślę, że na koniec warto wymienić kilka wad i zalet tego rodzaju aplikacji.

Na początek zalety:

  • wspólny kod dla serwera i klienta - jak przekonasz się w kolejnych wpisach, wszystkie komponenty naszej aplikacji będą takie same dla obu środowisk
  • szybkość ładowania i lepszy UX - dzięki temu, że pierwsze żądanie do serwera zwraca od razu wypełniony kod HTML, nie trzeba czekać na załadowanie się skryptów JavaScript, nie ma więc potrzeby pokazywać “loaderów” itp.
  • lepsze SEO - przy zastosowaniu renderowania po stronie serwera, nie ma obaw, że roboty wyszukiwarek internetowych będą miały problemy z odczytaniem naszej strony

Wady takiego podejścia to:

  • potencjalne problemy z kodem specyficznym dla danego środowiska - dla przykładu: po stronie serwera obiekt window nie jest zdefiniowany (istnieje wiele bibliotek rozwiązujących tego typu problemy ale trzeba o tym pamiętać)

Podsumowanie

To tyle na dziś. Mam nadzieję, że udało mi się zainteresować Cię tematem uniwersalnych aplikacji JavaScript. W kolejnych wpisach przekonasz się jak łatwo jest to osiągnąć w aplikacjach React. Jeśli jesteś ciekaw przykładów aplikacji wykorzystujących to podejście, to jedną z nich jest mój serwis Polski Front-End - wydaje mi się, że działa on całkiem szybko, a jednym z powodów tak dobrej wydajności jest właśnie zastosowanie Server Side Redenderingu.


P.S. Ten wpis jest częścią serii wpisów na temat Server Side Renderingu w React! Poniżej lista wszystkich wpisów tej serii: