Next.js vs React? Este un parteneriat, nu o competiție

Nu lipsesc biblioteci și cadre JavaScript pentru dezvoltatorii web moderni. Una dintre cele mai răspândite biblioteci este React, pe care Facebook (acum Meta) a creat-o pentru a ajuta la construirea de aplicații bogate în funcții. Aplicațiile React rulează în mod tradițional în browserele web, dar cadrul Next.js extinde funcționalitatea React la partea serverului prin mediul de rulare JavaScript Node.js.

În acest articol, ne vom uita la Next.js și React, astfel încât să puteți decide dacă sunt potrivite pentru următorul dvs. proiect.

Next.js și React: JavaScript la următorul nivel

Un sondaj SlashData din 2022 a constatat că există peste 17 milioane de programatori JavaScript în întreaga lume, conducând un pachet care include limbaje populare precum Python și Java. JavaScript poate fi folosit atât pe partea client, cât și pe server, iar această versatilitate înseamnă că dezvoltatorii pot crea aplicații complete folosind un singur limbaj de programare.

Introducerea bibliotecilor JavaScript precum React și a cadrelor precum Next.js a îmbunătățit și mai mult această dezvoltare. Aceste biblioteci și cadre oferă caracteristici care simplifică integrarea frontend și backend. Mai mult, dezvoltatorii pot extinde capabilitățile JavaScript folosind manageri de pachete precum npm (managerul de pachete Node.js) pentru a instala biblioteci și instrumente JavaScript. Aceste resurse oferă caracteristici sofisticate care reduc cantitatea de cod pe care trebuie să-l scrii singur.

Extensibilitatea JavaScript înseamnă că o cunoaștere cuprinzătoare a celor mai comune instrumente ale sale este cheia succesului tău ca dezvoltator web.

Ce este Next.js?

Lansat inițial în 2016 de către Vercel, Next.js este un cadru React open-source care oferă elementele de bază pentru a crea aplicații web de înaltă performanță. De atunci, marile companii l-au adoptat, inclusiv Twitch, TikTok și Uber, pentru a numi câteva.

Next.js oferă una dintre cele mai bune experiențe pentru dezvoltatori pentru a construi aplicații rapide, prietenoase cu SEO. Mai jos sunt câteva caracteristici ale Next.js care îl fac un cadru de producție excepțional:

• Capabilitati de randare hibride
• Divizarea automată a codului
• Optimizarea imaginii
• Suport încorporat pentru preprocesoare CSS și biblioteci CSS-in-JS
• Rutare încorporată

Aceste caracteristici îi ajută pe dezvoltatorii Next.js să economisească timp considerabil la configurare și instrumente. Puteți trece direct la construirea aplicației dvs., care ar putea sprijini proiecte precum următoarele:

• Magazine de comerț electronic
• Bloguri
• Tablouri de bord
• Aplicații cu o singură pagină
• Interacționează cu interfețele utilizator
• Site-uri web statice

Ce este React?

React este o bibliotecă JavaScript folosită pentru a construi interfețe dinamice cu utilizatorul. Pe lângă crearea de interfețe web, puteți crea aplicații mobile folosind React Native.

Unele beneficii ale utilizării React includ:

• Performanță îmbunătățită: în loc să actualizeze fiecare componentă din DOM, React folosește un DOM virtual pentru a actualiza numai componentele modificate.
• În mare parte bazat pe componente: după ce ați creat o componentă, o puteți reutiliza în mod repetat.
• Depanare ușoară: aplicațiile React utilizează un flux de date unidirecțional – numai de la componentele părinte la componentele secundare.

Next.js vs React

Deși dezvoltatorii folosesc adesea Next.js și React în același scop, există unele diferențe fundamentale între cele două.

Ușurință în utilizare

Este ușor să începeți cu Next.js și React. Fiecare necesită rularea unor comenzi individuale în terminalul dvs. folosind npx , care face parte din npm pentru Node.js.

Pentru Next.js, cea mai simplă comandă este:

 npx create-next-app

Fără argumente suplimentare pentru create-next-app , instalarea va continua în modul interactiv. Vi se va cere un nume de proiect (care va fi folosit pentru directorul proiectului) și dacă doriți să includeți suport pentru TypeScript și codul linter ESLint.

Va arata cam asa:

Când inițializați o instanță React, cea mai simplă comandă include un nume pentru directorul proiectului:

 npx create-react-app new-app

Aceasta generează un folder care conține toate configurațiile inițiale și dependențele necesare:

Deși ambele facilitează începerea, rețineți că Next.js este construit pe React. Deci, nu puteți învăța Next.js fără să învățați mai întâi React și să înțelegeți cum funcționează. Din fericire, React se mândrește cu o curbă de învățare blândă și este grozav pentru începători.

De asemenea, este important să rețineți că React este relativ nestructurat. Trebuie să instalați și să configurați un router React și să decideți cum să gestionați preluarea datelor, optimizarea imaginii și împărțirea codului. Această configurare necesită să instalați și să configurați biblioteci și instrumente suplimentare.

Prin contrast, Next.js vine cu aceste instrumente preinstalate și pre-configurate. Cu Next.js, orice fișier adăugat în folderul pages servește automat ca rută. Datorită acestui suport încorporat, Next.js este mai ușor de utilizat zilnic, permițându-vă să începeți imediat codificarea logicii aplicației.

Caracteristicile Next.js și React

Deoarece Next.js se bazează pe React, cei doi au câteva caracteristici. Cu toate acestea, Next.js face un pas mai departe și include funcții suplimentare, cum ar fi rutarea, împărțirea codului, pre-rendarea și suportul API imediat. Acestea sunt caracteristici pe care ar trebui să le configurați singur atunci când utilizați React.

Preluarea datelor

React redă date pe partea clientului. Serverul trimite fișiere statice către browser, iar apoi browserul preia datele de la API-uri pentru a popula aplicația. Acest proces reduce performanța aplicației și oferă o experiență slabă pentru utilizator, deoarece aplicația se încarcă lent. Next.js rezolvă această problemă prin pre-randare.

Cu pre-rendarea, serverul efectuează apelurile API necesare și preia datele înainte de a trimite aplicația către browser. Ca atare, browserul primește pagini web gata de randare.

Pre-randarea se poate referi la generarea de site-uri statice (SSG) sau la randarea pe server (SSR). În SSG, paginile HTML sunt generate în timpul construirii și reutilizate pentru mai multe solicitări. Next.js poate genera pagini HTML cu sau fără date.

Mai jos este un exemplu despre modul în care Next.js generează pagini fără date:

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

Pentru paginile statice care consumă date externe, utilizați funcția getStaticProps() . Odată ce exportați getStaticProps() dintr-o pagină, Next.js va pre-renda pagina folosind elementele de recuzită pe care le returnează. Această funcție rulează întotdeauna pe server, așa că utilizați getStaticProps() când datele pe care le utilizează pagina sunt disponibile în momentul construirii. De exemplu, îl puteți folosi pentru a prelua postări de blog dintr-un 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 }, }; };

În situațiile în care căile paginii depind de date externe, utilizați funcția getStaticPaths() . Deci, pentru a crea o cale bazată pe ID-ul postării, exportați getStaticPaths() din pagină.

De exemplu, puteți exporta getStaticPaths() din pagini/postări/[id].js , așa cum se arată mai jos.

 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() este adesea asociat cu getStaticProps() . În acest exemplu, veți folosi getStaticProps() pentru a prelua detaliile ID-ului din cale.

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

În SSR, datele sunt preluate la ora solicitată și trimise la browser. Pentru a utiliza SSR, exportați funcția de recuzită getServerSide() din pagina pe care doriți să o randați. Serverul apelează această funcție la fiecare solicitare, ceea ce face ca SSR să fie util pentru paginile care consumă date dinamice.

De exemplu, îl puteți folosi pentru a prelua date dintr-un API de știri.

 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 } } }

Datele sunt preluate la fiecare solicitare și transmise componentei Știri prin elemente de recuzită.

Divizarea codului

Divizarea codului este împărțirea codului în bucăți pe care browserul le poate încărca la cerere. Reduce cantitatea de cod trimisă către browser în timpul încărcării inițiale, deoarece serverul trimite doar ceea ce are nevoie utilizatorul. Bundlere precum Webpack, Rollup și Browserify acceptă divizarea codului în React.

Next.js acceptă divizarea codului din cutie.

Cu Next.js, fiecare pagină este împărțită în cod, iar adăugarea de pagini la aplicație nu crește dimensiunea pachetului. Next.js acceptă și importuri dinamice, ceea ce vă permite să importați module JavaScript și să le încărcați dinamic în timpul rulării. Importurile dinamice contribuie la viteze mai mari ale paginilor, deoarece pachetele sunt încărcate leneș.

De exemplu, în componenta Acasă de mai jos, serverul nu va include componenta erou în pachetul inițial.

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

În schimb, elementul de rezervă al suspansului va fi redat înainte ca componenta erou să fie încărcată.

Suport API în Next.js vs React

Caracteristica de rutare API Next.js vă permite să scrieți cod backend și frontend în aceeași bază de cod. Orice pagină salvată în folderul /pages/api/ este mapată la ruta /api/* , iar Next.js o tratează ca pe un punct final API.

De exemplu, puteți crea o rută API pages/api/user.js care returnează numele utilizatorului curent astfel:

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

Dacă vizitați adresa URL https://app-url/api/user , veți vedea obiectul nume de utilizator.

 { username: 'Jane' }

Rutele API sunt utile atunci când doriți să mascați adresa URL a unui serviciu pe care îl accesați sau doriți să păstrați secrete variabilele de mediu fără a codifica o întreagă aplicație backend.

Performanţă

Next.js este, fără îndoială, superior în capacitatea sa de a crea aplicații mai performante cu un proces simplificat. Aplicațiile SSR și SSG Next.js au performanțe mai bune decât aplicațiile React de randare pe partea clientului (CSR). Prin preluarea datelor de pe server și trimiterea tot ceea ce are nevoie browserul pentru a randa, Next.js elimină necesitatea unei cereri de preluare a datelor către API-uri. Aceasta înseamnă timpi de încărcare mai rapidi.

În plus, deoarece Next.js acceptă rutarea pe partea clientului. Browserul nu trebuie să preia date de la server de fiecare dată când un utilizator navighează către o altă rută. În plus, componenta imagine Next.js permite optimizarea automată a imaginii. Imaginile se încarcă numai când intră în fereastra de vizualizare. Acolo unde este posibil, Next.js oferă și imagini în formate moderne precum WebP.

Next.js oferă, de asemenea, optimizări ale fonturilor, preluare inteligentă a rutei și optimizări de grupare. Aceste optimizări nu sunt disponibile automat în React.

A sustine

Deoarece React există de mai mult timp decât Next.js, are o comunitate mai extinsă. Cu toate acestea, mulți dezvoltatori React adoptă Next.js, astfel încât comunitatea este în creștere constantă. Dezvoltatorii găsesc mai ușor soluțiile existente la problemele pe care le întâmpină, decât să fie nevoiți să construiască soluții de la zero.

Next.js oferă, de asemenea, o documentație excelentă, cu exemple cuprinzătoare care sunt ușor de înțeles. În ciuda popularității sale, documentația React nu este la fel de navigabilă.

rezumat

Alegerea Next.js sau React se reduce la cerințele unei aplicații.

Next.js îmbunătățește capacitățile React oferind structură și instrumente care îmbunătățesc performanța. Aceste instrumente, cum ar fi rutarea, împărțirea codului și optimizarea imaginilor, sunt încorporate în Next.js, ceea ce înseamnă că dezvoltatorii nu trebuie să configureze nimic manual. Datorită acestor funcții, Next.js este ușor de utilizat, iar dezvoltatorii pot începe să codifice logica de afaceri imediat.

Datorită diferitelor opțiuni de randare, Next.js este potrivit pentru aplicații randate pe server sau aplicații care combină generarea statică și redarea Node.js pe partea serverului. De asemenea, datorită funcției de optimizare oferită de Next.js, este perfect pentru site-urile care trebuie să fie rapide, cum ar fi magazinele de comerț electronic.

React este o bibliotecă JavaScript care vă poate ajuta să creați și să scalați aplicații front-end robuste. Sintaxa sa este, de asemenea, simplă, în special pentru dezvoltatorii cu un fundal JavaScript. În plus, aveți control asupra instrumentelor pe care le utilizați în aplicația dvs. și asupra modului în care le configurați.

Îți planificați propria aplicație dominantă în lume? Explorați abordarea Kinsta cu privire la găzduirea aplicațiilor Node.js pentru serviciile care acceptă React și Next.js.