Wraz ze wzrostem popularności Jamstack w świecie web developmentu pojawił się ogromny dylemat między Server Side Rendering (SSR) reprezentowany przez Next.js, oraz Static Site Generator (SSG) i Gatsby.js. Obie funkcjonalności pozwalają tworzyć bardzo szybkie i dobrze zoptymalizowane pod kątem SEO aplikacje.
Co to Gatsby.js?
Gatsby.js jest frameworkiem React.js, który pozwala budować błyskawicznie działające aplikacje dzięki generowaniu statycznych stron (Static Site Generator).
Gatsby.js posiada świetnie napisaną dokumentację, oraz jest bardzo prosty i przyjemny w nauce. Co więcej liczne startery i szablony umożliwiają budowę w pełni funkcjonalnej aplikacji w bardzo krótkim czasie.
Co to Next.js
Next.js to również framework React.js, który obsługuje Server Site Rendering. Jest obecnie najbardziej popularnym i najczęściej pobieranym frameworkiem React.js.
Next.js również możemy wykorzystać jako Static Site Generator, jednak jego największą zaletą jest możliwość korzystania z obu tych funkcjonalności. Dzięki temu możemy zdecycować, które treści mają zostać wyrenderowane po stronie serwera, a które mają być wygenerowane statycznie.
Server Side Rendering vs Static Site Generator
Gatsby.js jest frameworkiem, który umożliwia generowania statycznych stron. Static Site Generator generuje plik HTML w czasie budowania aplikacji. Nie wymaga do tego serwera Node.js. Wygenerowane pliki możemy wrzucić na zwykły hosting, np. Hostinger.
Next.js również możemy wykorzystać jako Static Site Generator, jednak jego największą zaletą jest Server Side Rendering. SSR dynamicznie generuje HTML za każdym razem, gdy przychodzi nowe żądanie HTTP. W tym przypadku wymagany jest serwer Node.js, na którym opiera się Next.js.
Przerywnik - chciałbym Cię serdecznie zaprosić na mojego discorda Digital Creators Community!
Kiedy używać Next.js
Jeśli masz na stronie dużo treści bądź planujesz dodawać wiele postów, to Static Side Generator nie będzie najlepszym rozwiązaniem. Powinieneś zdecydowanie wybrać Server Side Rendering i najbardziej popularny framework React.js - Next.js.
Powodem jest to, że w generatorze stron statycznych budowanie aplikacji będzie zabierało bardzo dużo czasu. Na tym etapie mojego bloga korzystam jeszcze z Gatsby.js i przy 7 postach strona buduje się ~1min 40sek, więc przy 200 postach będzie trwało wieki (bądź kilka minut).
Co więcej Next.js sprawdzi się rewelacyjnie, jeśli na stronie mamy dużo dynamicznego contentu. Wszelkie aktualne dane będą pobierane przy każdym żądaniu strony.
Kiedy używać Gatsby.js
Gatsby.js sprawdza się idealnie podczas budowania małych stron lub blogów, gdzie liczba stron jest przewidywalna i niewielka. Gatsby.js z każdym dodaniem nowej strony będzie potrzebował więcej czasu na budowę aplikacji.
Gatsby.js posiada również kilka starterów, szablonów oraz ogromną liczbę pluginów, które sprawiają, że uruchomienie w pełni funkcjonalnej aplikacji internetowej jest błyskawiczne.
Podsumowanie
Zarówno Next.js jak i Gatsby.js są wspaniałymi frameworkami, a wybór jednego z nich powinien polegać na indywidualnych wymaganiach projektu.
Podczas gdy Gatsby.js jest idealnym wyborem dla statycznych stron z niewielką liczbą stron, Next.js ma znaczną przewagę przy dynamicznych stronach.
Jeśli Twoja strona nie zawiera dynamicznych treści, to Gatsby.js pozwoli Ci w błyskawiczny sposób stworzyć stronę, czy bloga. Znacznie częściej sięga się jednak po Next.js, który z łatwością radzi sobie z większymi stronami, które zawierają dynamiczny content.
Spróbuj i przekonaj się sam!
Sprawdź poradnik w jaki sposób stworzyć bloga w Gatsby.js ✨