CZYM JEST NUXT.JS?

Nuxt.js to framework zbudowany na Vue.js. Powszechnie znany jest z możliwości budowania aplikacji SSR (Server-Side Rendering) od ręki, ale jego wykorzystanie niesie ze sobą również wiele innych korzyści, niekoniecznie związanych z SSR.

Dlaczego więc warto korzystać z Nuxt.js?

SERVER-SIDE RENDERING

Na początek musimy omówić wspomniane już SSR. Co to oznacza?

Większość nowoczesnych frameworków JavaScript – łącznie z Vue, Angular i React – zostało stworzonych w celu budowy SPA (Single Page Applications). SPA, jak nazwa może podpowiadać, pobierana jest tylko przy pierwszym ładowaniu strony, przez co poruszanie się pomiędzy jej podstronami jest o wiele szybsze od tradycyjnej strony internetowej. Niestety oznacza to również, że cała strona generowana jest z kodu JS po załadowaniu strony, co dodatkowo opóźnia wyświetlenie zawartości – normalny użytkownik prawdopodobnie nawet nie zauważy różnicy, ale problem tkwi w tym, że początkowo strona jest pusta, przez co wyszukiwarki internetowe mogą mieć problem pod kątem SEO (Search Engine Optimization).

Aplikacje SSR nie mają tego problemu – polegają one na posiadaniu SPA, ale zamiast pustego index.html zwracają wyrenderowany po stronie serwera html jako odpowiedź na otwarcie danej podstrony. Pozwala to na przyśpieszenie ładowania poszczególnych podstron oraz polepsza SEO.

Vue również wspiera aplikacje SSR, ale odpowiednie skonfigurowanie w nim takiej aplikacji potrafi być bardzo problematyczne. Nuxt.js jest domyślnie skonfigurowany pod SSR i jednocześnie udostępnia dla niego wiele udogodnień programistycznych, jak chociażby specjalne komponenty czy metoda asyncData.

More information on this is available here. Więcej informacji na ten temat dostępnych jest tutaj.

ROUTING

Jedną z bardziej odczuwalnych zmian po przejściu z Vue do Nuxt może być routing stron.

Vue stosuje standardowy router – oznacza to, że każda nowa strona lub zmiana lokalizacji jej pliku musi zostać odzwierciedlona w pliku router.js.

const routes: Array<RouteConfig> = [
  {
    path: "/",
    name: "Home",
    component: Home
  },
  {
    path: "/about",
    name: "About",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue")
  }
]

Nuxt buduje obiekt router wewnętrznie, opierając się na strukturze folderów i plików w folderze /pages. Dzięki temu dodawanie nowych stron oraz zmiany nazw i ścieżek stron są ograniczone do zmian struktury.

LAYOUT

Kolejną odczuwalną zmianą mogą być layouty – w Nuxt każda strona aplikacji korzysta z jednego ze stworzonych layoutów. Pozwala to na oddzielenie pliku z elementami aplikacji, które rzadko ulegają zmianie podczas nawigacji pomiędzy podstronami oraz wykorzystanie faktu, że komponent layoutu nie przeładuje się dopóki nie zmieni się na inny.

Każda strona domyślnie korzysta z layouts/default.vue. Oczywiście istnieje możliwość stworzenia wielu layoutów – w przypadku, gdy chcemy wykorzystać inny niż domyślny, wystarczy podanie odpowiedniej nazwy w pliku strony w opcji layout, np. mając myLayout.vue:

export default {
  layout: 'myLayout',
  ...
}

MODUŁY

Istnieje wiele, bardzo łatwych do dołączenia, modułów Nuxt, które dodają funkcjonalność lub zapewniają integrację z wybranymi bibliotekami / serwisami. Dodanie ich wymaga jedynie zainstalowania poprzez npm lub yarn i zdefiniowanie w config.

Zbiór tych modułów można znaleźć tutaj.

Dodatkowo Nuxt po samym stworzeniu projektu daje możliwość korzystania z popularnego dla aplikacji Vue rozwiązania Vuex.

WEBPACK

Nuxt od razu konfiguruje Webpack w taki sposób, aby serwer developerski kompilował zmiany na bieżąco. Oznacza to, że aby zobaczyć zmiany wystarczy zapisać edytowany plik. Nie trzeba natomiast kompilować aplikacji od nowa za każdym razem, tak jak w “czystym” Vue.

Oczywiście skonfigurowanie Webpack w taki sposób dla Vue również jest możliwe, ale nie jest gotowe od razu po stworzeniu projektu i może nie być zbyt oczywiste.

GENERACJA STRON STATYCZNYCH

Jedną z bardziej chwalonych cech Nuxt jest możliwość wygenerowania statycznej wersji aplikacji za pomocą komendy nuxt generate.

Niesie to ze sobą między innymi polepszenie SEO i przyśpieszenie ładowania (podobnie do SSR), ale przede wszystkim oznacza, że do hostowania strony nie jest wymagany serwer, dzięki czemu możliwe jest wykorzystanie istniejących serwisów jak na przykład GitHub Pages.

PODSUMOWANIE

Nuxt oferuje bardzo wydajne aplikacje SSR, ale również zapewnia przyjemniejsze programowanie nawet jeśli chcemy budować aplikacje statyczne lub SPA.

Warto z niego korzystać gdy istotna dla nas jest SEO / funkcjonalność SSR lub chociażby gdy chcemy od naszego frameworku więcej niż jest oferowane przez „czysty” Vue.

Tym samym żaden framework nie jest doskonały i Nuxt nie jest wyjątkiem. Moduły stanowią bardzo dobre dodatki, ale ponieważ są one oddzielone od głównego frameworku, może zdarzyć się sytuacja, że dany moduł nie jest zaktualizowany lub nieoczekiwanie zmienia zachowanie z wersji na wersję. W szczególności mam na myśli jeden z modułów, mianowicie Nuxt Auth.

Autoryzacja jest bardzo ważnym aspektem wielu, o ile nie prawie wszystkich, aplikacji, a moduł Nuxt Auth, który powinien ułatwić jej implementację, tak na prawdę czasem ją utrudnia – potrafi prowadzić do nieoczekiwanych sytuacji i doprowadzenie go do działającego stanu przez jednoczesne dostrajanie i unikanie bug-ów może być bardzo frustrujące (choć nie jest niemożliwe). W momencie pisania tego artykułu od wielu miesięcy trwają prace nad kolejną wersją modułu.

Jednak pomimo swoich problemów, Nuxt.js wciąż jest bardzo dobrym frameworkiem i oferuje bardzo wiele.