Nodea — logo

Nuxt.js

Nuxt.js to otwartoźródłowy framework do budowy aplikacji webowych oparty na Vue.js. Pełni względem Vue tę samą rolę, jaką Next.js pełni względem React — dodaje renderowanie po stronie serwera, generowanie stron statycznych, automatyczny routing i szereg optymalizacji, których sam Vue nie dostarcza. Dzięki temu pozwala tworzyć szybkie i przyjazne wyszukiwarkom aplikacje bez ręcznego składania całej konfiguracji.

Jak działa Nuxt.js?

Nuxt oferuje kilka trybów renderowania. W trybie SSR (Server-Side Rendering) HTML strony generowany jest na serwerze przy każdym żądaniu, co daje szybkie wyświetlenie treści i pełną indeksowalność. W trybie SSG (generowanie statyczne) strony budowane są raz podczas kompilacji i serwowane jako gotowe pliki. Możliwy jest też klasyczny tryb aplikacji jednostronicowej (SPA) renderowanej w przeglądarce.

Podobnie jak Next, Nuxt opiera routing na strukturze katalogów — plik komponentu Vue umieszczony w odpowiednim folderze automatycznie staje się nową ścieżką aplikacji, bez ręcznej konfiguracji tras. Framework dostarcza też gotowe mechanizmy pobierania danych, zarządzania stanem i modułowej rozbudowy. Działa w środowisku Node.js.

Zastosowanie w praktyce

Nuxt.js wybierają zespoły pracujące w ekosystemie Vue, które potrzebują lepszego SEO i szybszego pierwszego renderu niż w czystym SPA. Sprawdza się przy sklepach internetowych, portalach treściowych, blogach oraz stronach marketingowych, gdzie liczy się jednocześnie interaktywność i widoczność w Google. W trybie statycznym dobrze wpisuje się w architekturę JAMstack.

Sposób wdrożenia zależy od trybu pracy. Aplikacja SSR wymaga środowiska Node.js działającego w sposób ciągły, więc naturalnym miejscem uruchomienia jest serwer VPS lub platforma obsługująca runtime Node. Wariant w pełni statyczny można wyeksportować do plików i serwować z dowolnego hostingu bądź sieci CDN, co maksymalnie upraszcza i potania infrastrukturę.

Powiązane pojęcia

Najczęstsze pytania

Czym różni się Nuxt.js od Next.js?

Oba frameworki rozwiązują ten sam problem — dodają renderowanie serwerowe, generowanie statyczne i routing do aplikacji jednostronicowych. Różni je warstwa bazowa: Next.js jest zbudowany na bibliotece React, a Nuxt.js na Vue.js. Wybór zależy więc głównie od tego, w którym ekosystemie pracuje zespół.