Routing po stronie klienta z React Router

Jeśli używasz Reacta lub chcesz go wykorzystać, istnieje duże prawdopodobieństwo, że ktoś kiedyś wspomniał o React Router jako narzędziu do obsługi routingu po stronie klienta.  

Ten artykuł ma na celu omówienie tematu routingu po stronie klienta i serwera oraz jak React Router może Ci pomóc w pracy. 

Routingu po stronie serwera vs. routing po stronie klienta

Routing po stronie serwera

Routing po stronie serwera jest bardziej powszechną metodą obsługi routingu. Nie jest to jednak część React Routera. 

Z routingiem po stronie serwera, użytkownik klika link, przez który prosi o nową stronę i dane od serwera. Następnie, nowe dane lub dokument są dostarczane użytkownikowi. 

Przyjrzyjmy się temu dokładniej:

Kiedy użytkownik klika link na stronie internetowej, na ekranie pojawia się zupełnie inna strona. Ścieżka URL jest aktualizowana, żeby pasowała do stanu strony internetowej, na której aktualnie znajduje się użytkownik. 

Ta „zupełnie inna strona” jest ładowana i renderowana przez serwer. Routing po stronie serwera powoduje, że strona się odświeża, ponieważ wysuwamy kolejne żądanie do serwera, a on daje nam kompletnie nowy content do wyświetlenia.

Tak to wygląda po kolei:

1. Użytkownik klika link na stronie internetowej.
2. Przeglądarka wysyła żądanie do serwera pod adres z linku.
3. Serwer odpowiada nowym contentem. 
4. Przesłany content odświeża informacje na ekranie użytkownika. 
5. URL jest aktualizowany, aby odzwierciedlić miejsce pobytu użytkownika na stronie internetowej. 

To serwer dostarcza content i pliki przeglądarce, które ta wyświetla użytkownikowi. 

Główną wadą używania routingu po stronie serwera jest nierówny czas wyświetlania contentu na stronie. Jeśli nowa strona nadal będzie miała informacje z nagłówka i stopki umieszczone na ekranie, to dlaczego mielibyśmy ponownie je ładować?

Jednak serwer tego nie wie, dlatego ponownie je załaduje, mimo że nie musi. Wyśle on plik, który trzeba pokazać i będzie chciał wywołać pełne odświeżenie, aby go wyświetlić.   

Przy pełnym odświeżeniu prędkość internetu jest kluczowa. Prędkość przyczynia się do czasu, w jaki coś może zostać wyświetlone na stronie.

Jak jednak możemy zapobiec całkowitemu odświeżeniu i zwolnieniu renderowania?

Routing po stronie klienta

Routing po stronie klienta polega na wewnętrznej obsłudze przekazów przez JS, który jest renderowany na stronie front endu (czyli po stronie klienta).

Powód, dla którego routing po stronie klienta stał się czymś, co większość programistów rozważa podczas tworzenia swoich apek, wynika z popularności single-page applications (SPA).

Z takim rodzajem aplikacji, kiedy użytkownik klika wewnętrzny link, który znajduje się w aplikacji, dobrze by było zobaczyć zmianę w URL, aby odzwierciedlić dziejącą się zmianę bez potrzeby odświeżania strony. 

Ze SPAs nie musimy ładować wielu stron. Ładujemy za to początkowe żądanie z naszymi początkowymi plikami HTML, CSS i JS z serwera. Przez to używamy routingu po stronie klienta, aby stworzyć wrażenie SPA, kiedy ujednolicamy i organizujemy routing dla naszych użytkowników. 

Czemu nas to w ogóle obchodzi?

Routing po stronie klienta nas obchodzi, ponieważ:

1. Daje użytkownikowi URL, który pozwala na intuicyjne odnalezienie się w aplikacji.
2. Chcemy dać użytkownikom możliwość używania przycisków „back” i „forward” dzięki history API.
3. Daje to użytkownikowi możliwość wpisania konkretnego URL i załadowania konkretnego widoku aplikacji. 
4. Aplikacja będzie miała mniejszy lag przy przejściu między stronami, ponieważ informacje, które są wymagane do renderowania następnego widoku strony, zostały już załadowane na początku.

React Router, a routing po stronie klienta 

“React Router jest kolekcją komponentów nawigacyjnych, które komponują się w sposób deklaratywny z twoją aplikacją” -- React Training

React Router opiera się na dynamicznym podejściu do routingu po stronie klienta, zamiast na statycznym. Jaka jest jednak między nimi różnica?

Routing statyczny

W skrócie, przy podejściu statycznym tworzymy ścieżki, które chcemy stworzyć na początku i dopiero wtedy wywołujemy je według potrzeb. Może to zostać zaimplementowane dzięki oddzielnemu plikowi JavaScript, który możemy nazwać routes.js, który będzie zawierał wszystkie możliwe ścieżki, których Twoja aplikacja będzie potrzebować. 

Teraz, za każdym razem, kiedy użytkownik kliknie link, wywoła to routes.js, który stworzyłeś i wyszuka ten z punktów końcowych, który pasuje do linku, w który się kliknęło. 

Tworzy to dodatkowy etap po kliknięciu w link, ponieważ teraz serwer jest wywoływany do odpowiedzenia na dane żądanie. Problem polega na tym, że rozwiązanie takich żądań zajmuje trochę czasu. Czas żądania może zależeć od jakości połączenia z serwerem. 

Jeśli jednak używaliście wcześniej Reacta, szybko się zorientujecie, że to trochę nie po „reactowemu”. Jeśli jeszcze nie wierzycie, to w starszych aplikacjach z Reactem trzeba czasem było stworzyć swoje własne API z takimi samymi funkcjami jak wasze metody komponentów cyklu życia.

Routing dynamiczny

Przy routingu dynamicznym, ścieżki są aktualizowane podczas renderowania aplikacji. Innymi słowy, ścieżka, którą widać w pasku URL aktualizuje się na oczach klienta, ale żeby to się stało, nie trzeba komunikacji z serwerem. 

React Router jest komponentem. Oznacza to tyle, że dodawanie funkcji routingu do Twojej aplikacji dzieje się w ten sam sposób, co dodanie jakiejkolwiek innej funkcji.

Przyjrzyjmy się poniższemu przykładowi:

import React from "react";
import ReactDOM from 'react-dom';
// import your BrowserRouter here just like importing any other functionality
import { BrowserRouter as Router, Route } from 'react-router-dom';
const HomePage = () => {
  return (
    <div>
      <h1>Welcome to the Home Page!</h1>
    </div>
  );
};
// now <Route> is being wrapped around <Router> to have the router coordinate displayed instead
ReactDOM.render((
  <Router>
    <Route path='/' render={HomePage} />
  </Router>),
  document.getElementById('root')
);

W powyższym przykładzie importujemy BrowserRouter do naszej aplikacji i używamy <Router> by dopasować ścieżkę. 

Jednak prawdziwą zaletą routingu dynamicznego z React Router jest:

import React from "react";
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom';
const HomePage = () => {
  return (
    <div>
      <h1>Welcome to the Home Page!</h1>
    </div>
  );
};
// Using match to dynamically generate which user is being passed
const User = ({ match }) => {
  return (
    <div>
      <h3>{match.params.userId}</h3>
    </div>
  );
};
ReactDOM.render((
  <Router>
    <Route path='/' render={HomePage} />
// the new path will be the user's id passed into the User component
    <Route path='/:userId' component={User} />
  </Router>),
  document.getElementById('root')
);

Co się tu zatem zadziało?

Kiedy dopasujemy URL dzięki Userld, ścieżka, która wyświetli się użytkownikowi, będzie renderowana przy pomocy właściwości match. Ma to na celu dopasowanie konkretnego URL do ID, które jest przekazywane match.params.userId i dalej do <Route>. 

React Router pozwala nam na uzyskanie jednolitych linków i dynamicznego renderowania oraz routingu w React, ale jak ze wszystkim, istnieją też wady takiej metody. 

Kluczową wadą jest to, że początkowe żądanie do strony głównej może zająć więcej czasu. Ponieważ cała strona musi się załadować na początku, może to spowodować, że początkowe żądanie zajmie więcej czasu, niż gdy cały content apki nie musiałby być od razu ładowany.  

Podsumowując, myślę, że najlepiej jest poznać zarówno routing po stronie serwera, jak i klienta i potem zdecydować, którego użyć w aplikacji. Routing po stronie serwera jest nadal standardem, ale ten drugi zaczyna bardziej dawać o sobie znać. 

Oryginał tekstu w języku angielskim przeczytasz tutaj.