Dzisiejszym wpisem zakończymy serię o Server Side Rendering w React. W zasadzie to po poprzednich 4 wpisach wiesz już wszystko by stworzyć swoją pierwszą aplikację izomorficzną React. Postanowiłem jednak, że pokażę Ci jeszcze pewną alternatywę do tego, co zostało dotychczas pokazane. Istnieje bowiem coś takiego, jak Next.js, czyli specjalny framework pozwalający w łatwy sposób stworzyć aplikację React, która “z pudełka” posiada obsługę renderowania po stronie serwera!

Wprowadzenie do Next.js

Czym jest Next.js wyjaśniłem już w sumie w jednym zdaniu we wstępie do tego wpisu… Ogólnie więc jest to minimalistyczny framework wykorzystujący takie biblioteki jak React, webpack oraz Babel i udostępniający, m.in.:

  • domyślne renderowanie po stronie klienta jak i serwera (SSR)
  • automatyczne dzielenie kodu na paczki (“code splitting” - pod spodem i tak jest webpack)
  • prosty system routingu
  • środowisko deweloperskie oparte o webpackowy “Hot Module Replacement” (HMR)

Jak dla mnie wygląda to na całkiem fajny zestaw opcji pozwalający na stworzenie swojej pierwszej aplikacji izomorficznej!

Instalacja

Aby rozpocząć pracę z frameworkiem wystarczy zainstalować Next.js oraz React - ja to robie przy pomocy Yarn:

yarn add next react react-dom

Równie dobrze możesz jednak użyć npm:

npm install --save next react react-dom

Podstawowa konfiguracja

Mając już zainstalowane niezbędne pakiety, warto jeszcze zdefiniować sobie trzy przydatne skrypty npm. Aby to zrobić, dodajmy do pliku package.json sekcję “scripts”:

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}

Skrypt dev odpala po prostu polecenie next, które uruchomi naszą aplikację w trybie deweloperskim. W trybie tym mamy oczywiście skonfigurowany HMR, nie trzeba więc będzie odświeżać strony po każdej zmianie w kodzie.

Skrypt “build” służy do zbudowania produkcyjnej wersji aplikacji (domyślnie do katalogu .next ale można też skonfigurować inny katalog dla “buildów”). Skrypt “start” odpala natomiast serwer Next.js (lub inny, na przykład ExpressJS - istnieje taka możliwość ale objaśnienie jak to zrobić wykracza poza ramy tego wpisu).

Pierwszy komponent React

OK. Mamy już wszystko zainstalowane i skonfigurowane. Czas wreszcie przejść do utworzenia pierwszego prostego komponentu i uruchomienia aplikacji. Aby to zrobić, w głównym katalogu projektu utwórzmy katalog pages (dlaczego taki, a nie inny wyjaśnię za chwilę). Następnie w katalogu tym umieśćmy plik index.js zawierający taki oto komponent React:

const Index = () => {
  return (
    <div>
      <hr />
      <div>Hello world!</div>
    </div>
  );
}

export default Index;

Na potrzeby wpisu wystarczy nam bardzo prosty bezstanowy komponent funkcyjny (ang. “stateless functional component”). Zwróć uwagę, że plik ten nie zawiera importu z pakietu react, jak to zwykle robimy w komponentach, w których używamy składni JSX. W Next.js nie ma potrzeby go importować, bo framework robi to za nas.

No dobra, to już wszystko! Możemy odpalić aplikację - skorzystajmy z utworzonego wcześniej skryptu npm:

yarn dev

Powyższe polecenie uruchomi serwer Next.js, standardowo na porcie 3000 (czyli lokalnie aplikacja będzie dostępna pod adresem http://localhost:3000. Oczywiście utworzony przez nas komponent zostanie wyrenderowany po stronie serwera, ponieważ w Next.js SSR działa domyślnie.

Routing

Tak jak wspomniałem, Next.js dostarcza też prosty routing. Jak to działa? Już wyjaśniam - powyżej, tworząc nasz pierwszy komponent, umieściłem go w katalogu pages. Ma to bezpośredni związek z routingiem aplikacji! Otóż każdy, znajdujący się tam komponent odpowiada za jedną ścieżkę, której nazwę definiuje nazwa pliku z komponentem… Czyli: nasz plik pages/index.js to strona domowa /; jeśli dodamy plik pages/test.js to znajdujący się w nim komponent będzie dostępny pod adresem /test itd.

Przetestujmy to więc. Do katalogu pages dodajmy plik about.js:

import Link from 'next/link';

export default () => (
  <div>
    <div>
      <Link href="/"><a>Home</a></Link>
    </div>
    <hr />
    <div>About the page here!</div>
  </div>
);

Powyższy komponent również jest całkiem prosty. Zwróć jednak uwagę na import komponentu Link - jest to specjalny komponent dostarczany przez Next.js i służy do tworzenia linków przekierowujących pomiędzy poszczególnymi ścieżkami aplikacji.

Aby łatwiej poruszać się po naszej aplikacji, zmieńmy również nieco implementację komponentu Index. Tutaj również wykorzystamy komponent Link:

import Link from 'next/link';

const Index = () => {
  return (
    <div>
      <div>
        <Link href="/about"><a>About</a></Link>
      </div>
      <hr />
      <div>Hello world!</div>
    </div>
  );
}

export default Index;

Jeśli teraz uruchomimy aplikację zauważysz, że pod adresem /about renderowany jest utworzony przed chwilą komponent wyświetlający informacje o stronie. Dodane przez nas linki umożliwiają natomiast nawigację pomiędzy stroną domową a “about” bez przeładowania strony.

Podsumowanie

Next.js ma znacznie więcej możliwości niż przedstawiłem w dzisiejszym wpisie. Nie chodziło mi jednak o pokazanie jego wszystkich zalet, a jedynie o “zajawienie”, że istnieje tego rodzaju alternatywa.

Jeśli temat Cię zainteresował to zachęcam do jego zgłębienia - dużo informacji znajdziesz w pliku README.ms w repozytorium projektu. Istnieje też specjalna strona, stworzona przez autorów tego projektu, pozwalająca poznać wszystkie niuanse tego frameworka.

Jako ciekawostkę dodam, że w oparciu o pomysł na framework Next.js powstał też framework Nuxt.js - z grubsza pozwalający na to samo tylko w aplikacjach pisanych z użyciem Vue.js!

P.S.1 Jestem ciekaw jak szeroko stosuje się to rozwiązanie w projektach komercyjnych - jeśli u Ciebie w projekcie korzystacie z Next.js, napisz proszę w komentarzach o swoich wrażeniach!

P.S.2 Kod, który dziś pokazałem jak zwykle znajdziesz na GitHubie do samodzielnego “pobawienia się”. Repozytorium to znajduje się pod tym linkiem.

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