Site-urile statice sunt la fel de vechi ca și web-ul în sine. Dar creșterea JavaScript a deschis ușa pentru a face acele site-uri statice mai dinamice.

Deși acest lucru poate include crearea manuală a unui fișier HTML, cum putem folosi generarea statică pentru a crea aplicații cu instrumente moderne?

  • Ce este generația statică?
  • Ce se întâmplă în timpul generației statice?
  • Cum folosește Next.js Static Generation?
  • Generarea statică a unei aplicații cu Next.js

Ce este generația statică?

Generarea statică descrie procesul de compilare și redare a unui site web sau a unei aplicații la momentul construirii. Rezultatul este o grămadă de fișiere statice, inclusiv fișierul HTML în sine și materiale precum JavaScript și CSS.

Dacă nu ați auzit de Static Generation, dar acest concept sună familiar, s-ar putea să fi auzit de el prin numele său mai lung Static Site Generation sau de acronimul său SSG.

Ce se întâmplă în timpul generației statice?

Aplicațiile web bazate pe JavaScript, așa cum le știm în mod tradițional, funcționează rulând biblioteci precum React sau scripturi în timpul rulării în browser.

Când browserul primește pagina, este de obicei HTML simplu, fără mult conținut. Apoi, acesta încarcă scripturile pentru a trage conținutul în pagină, un proces cunoscut și sub numele de hidratare.

Cu Static Generation, instrumente precum Next.js încearcă să redea acea pagină în principal așa cum s-ar întâmpla în browser, dar la momentul compilării. Acest lucru ne oferă posibilitatea de a servi întregul conținut la prima încărcare. Scripturile încă hidratează pagina în timpul acestui proces, dar în mod ideal cu mai puține modificări sau deloc modificări.

Cum folosește Next.js Static Generation?

În afara casetei, Next.js va încerca să genereze în mod static orice pagină poate. Face acest lucru prin detectarea modului în care o aplicație preia datele sale.

Next.js oferă un câteva API-uri diferite pentru a prelua date inclusiv getStaticProps și getServerSideProps, care, în funcție de modul în care sunt utilizate, determină modul în care Next.js îți va crea aplicația.

Dacă folosiți numai getStaticProps pentru a prelua date, Next.js va prelua aceste date la momentul construirii, lăsându-vă o pagină complet statică.

Dacă folosești getServerSideProps, Next.js va ști că aplicația necesită un server pentru a reda acele pagini.

Alături de o soluție de implementare precum Vercel se va ocupa automat de configurarea unui server, Next.js va încărca oricare dintre date atunci când cineva solicită pagina de la server.

Deși nu o face în mod implicit, Next.js oferă, de asemenea, posibilitatea de a exporta aplicația în fișiere statice într-un director separat după ce aplicația a fost construită.

În primul rând, ați rula next build comanda pentru a construi aplicația, atunci ați rula next export care, în mod implicit, face aplicația disponibilă ca fișiere statice în out director.

Cum se generează static o aplicație cu Next.js

Pentru a ne face o idee despre cum funcționează acest lucru, putem crea rapid o nouă aplicație Next.js.

Singurele cerințe pentru aceasta este că aveți Nodul instalat cu npm și posibilitatea de a utiliza un terminal pentru a rula comenzi.

Cum se creează o aplicație Next.js

Noțiuni de bază este la fel de simplu ca rularea unei singure linii în terminal.

Deschideți directorul în care doriți să creați proiectul și rulați:

npx create-next-app my-static-nextjs-app

După finalizarea instalării, puteți naviga la noul dvs. director de proiect:

cd my-static-nextjs-app

Odată ajuns acolo, porniți serverul de dezvoltare:

npm run dev

Și odată ce serverul este gata, vă puteți deschide http: // localhost: 3000 în browserul dvs., unde puteți vedea acum noua aplicație Next.js!

Ce este Static Site Generation Cum foloseste Nextjs SSG pentru
Noua aplicație Next.js

Cum să creați o aplicație Next.js

Acum că avem aplicația noastră disponibilă, să încercăm să o construim.

În același director, rulați comanda:

npm run build

Dacă ne uităm la ieșirea din interiorul terminalului, vedem că se întâmplă câteva lucruri importante.

În primul rând, Next.js ne anunță că rulează prin procesul său de compilare, inclusiv optimizarea aplicației pentru performanță, compilarea aplicației și colectarea datelor.

1610987226 804 Ce este Static Site Generation Cum foloseste Nextjs SSG pentru
Construirea cu Next.js

În continuare, vedem că Next.js ne arată o defalcare a modului în care este construită fiecare pagină.

Șablonul de pornire Next.js implicit include câteva pagini statice și un exemplu de rută API.

Folosind legenda din partea de jos, putem vedea că toate paginile și activele au fost generate în mod static, cu o rută etichetată ca necesitând un server, care ar fi ruta noastră API.

1610987227 804 Ce este Static Site Generation Cum foloseste Nextjs SSG pentru
Next.js generează pagini

Notă: În sensul acestei prezentări detaliate, putem ignora ruta API, dar Next.js împreună cu Vercel oferă posibilitatea de a construi funcții lambda ca parte a API-ului Next.js.

Cum să construiți o aplicație statică Next.js

Cu ieșirea noastră de construcție Next.js, știm că tocmai am creat câteva pagini statice, dar s-ar putea să avem probleme cu găsirea lor. Dacă ne uităm la folderele și fișierele din proiectul nostru, nu este clar imediat unde sunt acele fișiere.

Când Next.js construiește o aplicație, în mod implicit, aceasta afișează numai acea aplicație în interiorul .next director. Aceasta include fișiere de configurare pe care instrumente precum Vercel le pot folosi și înțelege pentru a implementa aplicația.

Din punct de vedere tehnic, acel director include întreaga noastră aplicație, dar acest lucru nu este ceva ce putem implementa cu ușurință în găzduirea statică.

Next.js oferă, de asemenea, posibilitatea de a exporta o aplicație. Aceasta va lua aplicația pe care am construit-o și vom produce un set de fișiere statice pe care le putem folosi apoi pentru a implementa aplicația noastră.

În interiorul package.json fișier, actualizați fișierul build scriptul de inclus next export:

"build": "next build && next export",

După actualizare, rulați din nou comanda build în directorul proiectului:

npm run build

Și acum putem vedea că nu numai că am construit aplicația așa cum am făcut în ultimul nostru pas, Next.js ne anunță că exportăm și aplicația pe care am construit-o în fișiere statice.

1610987228 660 Ce este Static Site Generation Cum foloseste Nextjs SSG pentru
Exportarea aplicației statice Next.js

Dacă ne uităm în folderul nostru de proiect, ar trebui să vedem acum un nou director numit out.

Dacă ne uităm în interiorul acelui folder, acum putem vedea întreaga noastră aplicație compilată static, inclusiv index.html fișier, precum și toate CSS și JS necesare pentru a utiliza aplicația!

1610987228 815 Ce este Static Site Generation Cum foloseste Nextjs SSG pentru

Unde putem merge de aici?

Am aflat că putem folosi Next.js și conceptul de generație statică pentru a compila static o aplicație.

Instrumente precum Next.js pot face acest lucru prin compilarea codului nostru, similar cu ceea ce am putea vedea într-un browser, astfel încât, până când aplicația noastră să acceseze browserul, totul este gata să funcționeze.

Cu o comandă simplă, putem crea și compila aplicația noastră, precum și exporta-o în fișiere statice. Putem implementa acele fișiere statice în orice serviciu de stocare statică, cum ar fi Vercel sau AWS S3. Acest lucru ne oferă o modalitate ușoară de a crea aplicații web dinamice, rapide și ieftine.

Aflați mai multe despre modul în care Next.js valorifică diferitele API-uri pentru a oferi atât experiențe statice, cât și dinamice vizitând documentele Next.js.