Next.js kontra React? To partnerstwo, a nie rywalizacja

Opublikowany: 2023-02-07

Nie brakuje bibliotek i frameworków JavaScript dla nowoczesnych twórców stron internetowych. Jedną z najbardziej wszechobecnych bibliotek jest React, którą Facebook (obecnie Meta) stworzył, aby pomóc w tworzeniu bogatych w funkcje aplikacji. Aplikacje React tradycyjnie działają w przeglądarkach internetowych, ale framework Next.js rozszerza funkcjonalność React po stronie serwera poprzez środowisko uruchomieniowe JavaScript Node.js.

W tym artykule przyjrzymy się Next.js i React, abyś mógł zdecydować, czy są one odpowiednie dla Twojego następnego projektu.

Next.js i React: JavaScript na wyższym poziomie

Ankieta SlashData z 2022 roku wykazała, że ​​na całym świecie jest ponad 17 milionów programistów JavaScript, kierujących pakietem obejmującym popularne języki, takie jak Python i Java. JavaScript może być używany zarówno po stronie klienta, jak i serwera, a ta wszechstronność oznacza, że ​​programiści mogą tworzyć kompletne aplikacje przy użyciu jednego języka programowania.

Wykres pokazujący liczbę programistów używających różnych języków sugeruje, że wielu zastanawia się nad Next.js vs React.
Badanie Slash/Data dotyczące języków używanych przez programistów w 2022 r. (Źródło: Statista)

Wprowadzenie bibliotek JavaScript, takich jak React, oraz frameworków, takich jak Next.js, jeszcze bardziej usprawniło ten rozwój. Te biblioteki i frameworki zapewniają funkcje, które upraszczają integrację frontendu i backendu. Ponadto programiści mogą rozszerzyć możliwości języka JavaScript za pomocą menedżerów pakietów, takich jak npm (menedżer pakietów Node.js), aby zainstalować biblioteki i narzędzia JavaScript. Zasoby te zapewniają zaawansowane funkcje, które zmniejszają ilość kodu, który musisz napisać samodzielnie.

Rozszerzalność języka JavaScript oznacza, że ​​wszechstronna znajomość jego najpopularniejszych narzędzi jest kluczem do sukcesu jako programisty WWW.

Co to jest Next.js?

Pierwotnie wydany w 2016 roku przez Vercel, Next.js to framework React o otwartym kodzie źródłowym, który zapewnia elementy składowe do tworzenia wysokowydajnych aplikacji internetowych. Od tego czasu przyjęły go duże firmy, w tym Twitch, TikTok i Uber, by wymienić tylko kilka.

Next.js oferuje jedno z najlepszych środowisk programistycznych do tworzenia szybkich aplikacji przyjaznych dla SEO. Poniżej znajduje się kilka cech Next.js, które czynią go wyjątkowym frameworkiem produkcyjnym:

  • Możliwości renderowania hybrydowego
  • Automatyczne dzielenie kodu
  • Optymalizacja obrazu
  • Wbudowana obsługa preprocesorów CSS i bibliotek CSS-in-JS
  • Wbudowany routing

Te funkcje pomagają programistom Next.js zaoszczędzić sporo czasu na konfiguracji i narzędziach. Możesz przejść od razu do tworzenia aplikacji, która może obsługiwać takie projekty jak:

  • sklepy internetowe
  • Blogi
  • Pulpity nawigacyjne
  • Aplikacje jednostronicowe
  • Interakcja z interfejsami użytkownika
  • Strony statyczne

Co to jest reakcja?

React to biblioteka JavaScript służąca do budowania dynamicznych interfejsów użytkownika. Oprócz tworzenia interfejsów webowych możesz budować aplikacje mobilne przy użyciu React Native.

Niektóre korzyści płynące z używania React obejmują:

  • Poprawiona wydajność: Zamiast aktualizować każdy komponent w DOM, React używa wirtualnego DOM do aktualizacji tylko zmienionych komponentów.
  • W dużym stopniu oparty na składnikach: po utworzeniu składnika można go wielokrotnie używać.
  • Łatwe debugowanie: aplikacje React wykorzystują jednokierunkowy przepływ danych – tylko od komponentów nadrzędnych do podrzędnych.

Next.js kontra React

Chociaż programiści często używają Next.js i React w tym samym celu, istnieją między nimi pewne fundamentalne różnice.

Łatwość użycia

Łatwo jest zacząć od Next.js i React. Każdy wymaga uruchomienia pojedynczych poleceń w twoim terminalu za pomocą npx , który jest częścią npm dla Node.js.

Najprostszym poleceniem dla Next.js jest:

 npx create-next-app

Bez dodatkowych argumentów dla create-next-app , instalacja będzie przebiegać w trybie interaktywnym. Zostaniesz zapytany o nazwę projektu (która będzie używana w katalogu projektu) oraz o to, czy chcesz dołączyć obsługę TypeScript i lintera kodu ESLint.

Będzie wyglądać mniej więcej tak:

Zrzut ekranu aplikacji Next.js tworzonej za pomocą npx.
Tworzenie aplikacji Next.js w trybie interaktywnym.

Podczas inicjowania instancji React najprostsze polecenie zawiera nazwę katalogu projektu:

 npx create-react-app new-app

Spowoduje to wygenerowanie folderu zawierającego wszystkie niezbędne początkowe konfiguracje i zależności:

Zrzut ekranu przedstawiający projekt React tworzony za pomocą npx.
Tworzenie projektu React w wierszu poleceń terminala.

Chociaż oba ułatwiają rozpoczęcie pracy, pamiętaj, że Next.js jest zbudowany na React. Tak więc nie możesz nauczyć się Next.js bez uprzedniego nauczenia się React i zrozumienia, jak to działa. Na szczęście React ma łagodną krzywą uczenia się i jest świetny dla początkujących.

Należy również zauważyć, że React jest stosunkowo nieustrukturyzowany. Musisz zainstalować i skonfigurować router React oraz zdecydować, jak obsługiwać pobieranie danych, optymalizację obrazu i dzielenie kodu. Ta konfiguracja wymaga zainstalowania i skonfigurowania dodatkowych bibliotek i narzędzi.

Z kolei Next.js jest dostarczany z tymi narzędziami wstępnie zainstalowanymi i skonfigurowanymi. W przypadku Next.js każdy plik dodany do folderu pages automatycznie służy jako trasa. Dzięki tej wbudowanej obsłudze, Next.js jest łatwiejszy w codziennej pracy, umożliwiając natychmiastowe rozpoczęcie kodowania logiki aplikacji.

Planujesz własną, dominującą na świecie aplikację? Ten przewodnik pomoże Ci wybrać odpowiednią opcję dla Twojego projektu ️ Kliknij, aby tweetować

Funkcje Next.js i React

Ponieważ Next.js jest oparty na React, oba mają wspólne cechy. Jednak Next.js idzie o krok dalej i zawiera dodatkowe funkcje, takie jak routing, dzielenie kodu, wstępne renderowanie i obsługę API od razu po wyjęciu z pudełka. Są to funkcje, które musisz skonfigurować samodzielnie podczas korzystania z React.

Pobieranie danych

React renderuje dane po stronie klienta. Serwer wysyła pliki statyczne do przeglądarki, a następnie przeglądarka pobiera dane z interfejsów API w celu wypełnienia aplikacji. Ten proces zmniejsza wydajność aplikacji i niekorzystnie wpływa na wrażenia użytkownika, ponieważ aplikacja ładuje się wolno. Next.js rozwiązuje ten problem poprzez wstępne renderowanie.

W przypadku wstępnego renderowania serwer wykonuje niezbędne wywołania API i pobiera dane przed wysłaniem aplikacji do przeglądarki. W ten sposób przeglądarka otrzymuje gotowe do renderowania strony internetowe.

Wstępne renderowanie może odnosić się do statycznego generowania witryn (SSG) lub renderowania po stronie serwera (SSR). W SSG strony HTML są generowane w czasie kompilacji i ponownie wykorzystywane do wielu żądań. Next.js może generować strony HTML z danymi lub bez.

Poniżej znajduje się przykład, w jaki sposób Next.js generuje strony bez danych:

 function App() { return <div>Welcome</div> } export default App

W przypadku stron statycznych korzystających z danych zewnętrznych należy użyć funkcji getStaticProps() . Po wyeksportowaniu getStaticProps() ze strony, Next.js wstępnie wyrenderuje stronę przy użyciu zwróconych rekwizytów. Ta funkcja zawsze działa na serwerze, więc użyj getStaticProps() , gdy dane używane przez stronę są dostępne w czasie kompilacji. Na przykład możesz go użyć do pobierania postów na blogu z CMS.

 const Posts= ({ posts }) => { return ( <div className={styles.container}> {posts.map((post, index) => ( // render each post ))} </div> ); }; export const getStaticProps = async () => { const posts = getAllPosts(); return { props: { posts }, }; };

W sytuacjach, gdy ścieżki do stron zależą od danych zewnętrznych, użyj funkcji getStaticPaths() . Aby więc utworzyć ścieżkę na podstawie identyfikatora posta, wyeksportuj funkcję getStaticPaths() ze strony.

Na przykład możesz wyeksportować getStaticPaths() z pages/posts/[id].js , jak pokazano poniżej.

 export getStaticPaths = async() => { // Get all the posts const posts = await getAllPosts() // Get the paths you want to pre-render based on posts const paths = posts.map((post) => ({ params: { id: post.id }, })) return { paths, fallback: false } }

getStaticPaths() jest często łączony z getStaticProps() . W tym przykładzie getStaticProps() do pobrania szczegółów identyfikatora w ścieżce.

 export const getStaticProps = async ({ params }) => { const post = await getSinglePost(params.id); return { props: { post } }; };

W SSR dane są pobierane w żądanym czasie i wysyłane do przeglądarki. Aby użyć SSR, wyeksportuj funkcję getServerSide() ze strony, którą chcesz renderować. Serwer wywołuje tę funkcję przy każdym żądaniu, co sprawia, że ​​SSR jest przydatny w przypadku stron zużywających dane dynamiczne.

Na przykład możesz go użyć do pobrania danych z interfejsu API wiadomości.

 const News = ({ data }) => { return ( // render data ); }; export async function getServerSideProps() { const res = await fetch(`https://app-url/data`) const data = await res.json() return { props: { data } } }

Dane są pobierane przy każdym żądaniu i przekazywane do komponentu News za pośrednictwem rekwizytów.

Dzielenie kodu

Dzielenie kodu to dzielenie kodu na fragmenty, które przeglądarka może załadować na żądanie. Zmniejsza ilość kodu wysyłanego do przeglądarki podczas początkowego ładowania, ponieważ serwer wysyła tylko to, czego potrzebuje użytkownik. Bundlery, takie jak Webpack, Rollup i Browserify, obsługują dzielenie kodu w React.

Next.js obsługuje dzielenie kodu po wyjęciu z pudełka.

W przypadku Next.js każda strona jest dzielona na kod, a dodawanie stron do aplikacji nie zwiększa rozmiaru pakietu. Next.js obsługuje również import dynamiczny, co pozwala importować moduły JavaScript i ładować je dynamicznie w czasie wykonywania. Importy dynamiczne przyczyniają się do szybszego ładowania stron, ponieważ pakiety ładują się z opóźnieniem.

Na przykład w poniższym komponencie Home serwer nie będzie zawierał komponentu hero w pakiecie początkowym.

 const DynamicHero = dynamic(() => import('../components/Hero'), { suspense: true, }) export default function Home() { return ( <Suspense fallback={`Loading...`}> <DynamicHero /> </Suspense> ) }

Zamiast tego element zastępczy suspensu zostanie wyrenderowany przed załadowaniem komponentu bohatera.

Wsparcie API w Next.js vs React

Funkcja routingu interfejsu API Next.js umożliwia pisanie kodu zaplecza i frontonu w tej samej bazie kodu. Każda strona zapisana w folderze /pages/api/ jest mapowana na trasę /api/* , a Next.js traktuje ją jak punkt końcowy API.

Możesz na przykład utworzyć trasę interfejsu API pages/api/user.js , która zwraca nazwę bieżącego użytkownika w następujący sposób:

 export default function user(req, res) { res.status(200).json({ username: 'Jane' }); }

Jeśli odwiedzisz adres URL https://app-url/api/user , zobaczysz obiekt nazwy użytkownika.

 { username: 'Jane' }

Trasy API są przydatne, gdy chcesz zamaskować adres URL usługi, do której uzyskujesz dostęp, lub chcesz zachować zmienne środowiskowe w tajemnicy bez kodowania całej aplikacji zaplecza.

Wydajność

Next.js jest niewątpliwie lepszy pod względem możliwości tworzenia wydajniejszych aplikacji przy uproszczonym procesie. Aplikacje SSR i SSG Next.js działają lepiej niż aplikacje React renderujące po stronie klienta (CSR). Pobierając dane na serwerze i wysyłając wszystko, co przeglądarka musi renderować, Next.js eliminuje potrzebę żądania pobrania danych do interfejsów API. Oznacza to szybsze ładowanie.

Ponadto, ponieważ Next.js obsługuje routing po stronie klienta. Przeglądarka nie musi pobierać danych z serwera za każdym razem, gdy użytkownik przechodzi na inną trasę. Dodatkowo komponent obrazu Next.js umożliwia automatyczną optymalizację obrazu. Obrazy ładują się tylko wtedy, gdy wchodzą do widocznego obszaru. Tam, gdzie to możliwe, Next.js obsługuje również obrazy w nowoczesnych formatach, takich jak WebP.

Next.js zapewnia również optymalizacje czcionek, inteligentne wstępne pobieranie tras i optymalizacje pakietów. Te optymalizacje nie są automatycznie dostępne w React.

Wsparcie

Ponieważ React istnieje dłużej niż Next.js, ma bardziej rozbudowaną społeczność. Jednak wielu programistów React przyjmuje Next.js, więc społeczność ta stale rośnie. Deweloperzy łatwiej znajdują istniejące rozwiązania napotykanych problemów, zamiast tworzyć rozwiązania od zera.

Next.js zawiera również doskonałą dokumentację z obszernymi przykładami, które są łatwe do zrozumienia. Pomimo swojej popularności, dokumentacja Reacta nie jest łatwa w nawigacji.

Jesteś Team Next.js czy Team React? Zapoznaj się z obiema popularnymi opcjami w tym poście Kliknij, aby tweetować

Streszczenie

Wybór Next.js lub React sprowadza się do wymagań aplikacji.

Next.js zwiększa możliwości Reacta, dostarczając strukturę i narzędzia poprawiające wydajność. Te narzędzia, takie jak routing, dzielenie kodu i optymalizacja obrazu, są wbudowane w Next.js, co oznacza, że ​​programiści nie muszą niczego konfigurować ręcznie. Dzięki tym cechom Next.js jest łatwy w użyciu, a programiści mogą od razu przystąpić do kodowania logiki biznesowej.

Ze względu na różne opcje renderowania Next.js jest odpowiedni dla aplikacji renderowanych po stronie serwera lub aplikacji, które łączą generowanie statyczne i renderowanie po stronie serwera Node.js. Ponadto, dzięki funkcji optymalizacji zapewnianej przez Next.js, jest idealny dla witryn, które muszą być szybkie, takich jak sklepy e-commerce.

React to biblioteka JavaScript, która może pomóc w tworzeniu i skalowaniu solidnych aplikacji typu front-end. Jego składnia jest również prosta, szczególnie dla programistów ze znajomością JavaScript. Ponadto masz kontrolę nad narzędziami, których używasz w swojej aplikacji i jak je konfigurujesz.

Planujesz własną, dominującą na świecie aplikację? Zapoznaj się z podejściem Kinsta do hostingu aplikacji Node.js dla usług obsługujących React i Next.js.