Domyślna wydajność w Next.js

Next.js zajmuje się wieloma optymalizacjami w aplikacji React, więc nie musisz

Dżirdeh Houssein

Next.js to sprawdzona platforma React zawierająca szereg funkcji optymalizacji wydajności. Głównym założeniem tej platformy jest zapewnienie jak największej wydajności aplikacji przez domyślne włączenie tych funkcji.

W tym wprowadzeniu omówimy pokrótce wiele funkcji dostępnych w ramach platformy. W innych przewodnikach w tej kolekcji znajdziesz szczegółowe omówienie funkcji.

Czego się nauczysz?

Next.js udostępnia domyślnie wiele opcji optymalizacji skuteczności, jednak w tych przewodnikach opisano je bardziej szczegółowo i pokażemy, jak ich używać, aby zapewnić szybkie i wydajne działanie.

Istnieje wiele optymalizacji, które można dodać do witryn React, które będą też działać w przypadku aplikacji tworzonych za pomocą Next.js. Nie omówimy ich, ponieważ koncentrujemy się na funkcjach Next.js. Więcej informacji o optymalizacji React znajdziesz w kolekcji React.

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

React to biblioteka, która ułatwia tworzenie interfejsów użytkownika za pomocą metody opartej na komponentach. React jest potężnym narzędziem w postaci biblioteki UI. Wielu programistów korzysta z dodatkowych narzędzi, takich jak pakiet modułów (np. webpack) czy transpilator (np. Babel), które umożliwiają uzyskanie kompletnego łańcucha narzędzi do tworzenia.

W kolekcji React wykorzystaliśmy metodę Create React App (CRA), która pozwala szybko uruchamiać aplikacje React. CRA upraszcza konfigurowanie aplikacji React, udostępniając pełny łańcuch narzędzi do kompilacji za pomocą jednego polecenia.

Mimo że w interfejsie CRA jest dostępnych kilka domyślnych optymalizacji, narzędzie zapewnia łatwą i łatwą konfigurację. Wybór należy do programistów, którzy decydują, czy samodzielnie wyrzucić i zmodyfikować konfiguracje.

Next.js, którego można też używać do tworzenia nowych aplikacji React, działa inaczej. Natychmiast udostępnia kilka typowych optymalizacji, które mogą być przydatne dla wielu deweloperów, ale trudno je skonfigurować, na przykład:

  • Renderowanie po stronie serwera
  • Automatyczne dzielenie kodu
  • Wstępne pobieranie tras
  • Routing systemu plików
  • Style CSS-in-JS (styled-jsx)

Konfiguracja

Aby utworzyć nową aplikację Next.js, uruchom to polecenie:

npx create-next-app new-app

Następnie przejdź do katalogu i uruchom serwer programistyczny:

cd new-app
npm run dev

W tym przykładzie umieszczono strukturę katalogu nowej aplikacji Next.js.

  • Aby umożliwić edytowanie projektu, kliknij Zremiksuj do edycji.
  • Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację, a potem Pełny ekran pełny ekran.

Zwróć uwagę, że katalog pages/ został utworzony z jednego pliku: index.jsx. W Next.js stosowana jest metoda routingu według systemu plików, w ramach której każda strona w tym katalogu jest obsługiwana jako osobna trasa. Utworzenie nowego pliku w tym katalogu, na przykład about.js, spowoduje automatyczne utworzenie nowej trasy (/about).

Komponenty można też tworzyć i używać jak każdą inną aplikację React. Katalog components/ z jednym komponentem nav.js został już utworzony i został już zaimportowany do folderu index.js. Domyślnie każdy import używany w Next.js jest pobierany tylko podczas wczytywania strony, co zapewnia automatyczne podziały kodu.

Co więcej, każde początkowe wczytywanie strony w Next.js jest renderowane po stronie serwera. Jeśli otworzysz panel Network (Sieć) w Narzędziach deweloperskich, zobaczysz, że początkowe żądanie dokumentu zwraca stronę w pełni renderowaną przez serwer.

Karta Podgląd w panelu Network pokazuje, że Next.js zwraca po otrzymaniu żądania strony kompletny kod HTML.
Karta Podgląd w panelu Sieć pokazuje, że Next.js zwraca po otrzymaniu żądania strony kompletny kod HTML.

To tylko kilka z wielu funkcji udostępnianych automatycznie przez Next.js. Wiele z nich można dostosować i dostosować do różnych zastosowań.

Co dalej?

Zamierzony cel 😛

Każdy z pozostałych przewodników w tej kolekcji szczegółowo omawia funkcję Next.js: