Cu toții putem fi de acord cu un singur lucru: React este una dintre cele mai populare soluții disponibile pentru construirea de aplicații web interactive, atât mici, cât și mari.

Și este folosit de atât de multe start-up-uri și companii încât este o abilitate foarte valoroasă să o ai în aceste zile.

Am descoperit Next.js cu câțiva ani în urmă și am fost intrigat de ceea ce încerca să realizeze.

În această postare, voi descrie călătoria mea personală cu Next.js. Voi discuta, de asemenea, de ce cred că este momentul potrivit pentru a-l adăuga în stiva React.

Primul web

La mijlocul anilor 2000, când web-ul era tânăr și în creștere, dezvoltatorii au trecut de la pagini HTML numai statice la soluții mai robuste și dinamice.

Acest lucru ne-a dat posibilitatea de a crea pagini cu conținut dinamic folosind tehnologie precum PHP (atenție, JavaScript era foarte tânăr și neeficient în acest moment).

Ai putea avea unul singur profil.php pagină și ar avea grijă de Alice, Bob, John, Mehul și toate cele 15.000 de persoane înregistrate pe site-ul dvs. – foarte convenabil.

Apoi a venit epoca JavaScript. Oamenii au început să-și dea seama că există acest limbaj acceptat pentru web, care ar putea fi folosit atât de mult.

Puteți configura trimiterea de formulare dinamice, solicitări HTTP de fundal, efecte de derulare frumoase și chiar creați pagini web din mers.

Creșterea JavaScript-ului și a bibliotecilor precum jQuery a permis dezvoltatorilor web să creeze interfețe frumoase complet personalizabile cu JavaScript.

În curând, fiecare dezvoltator web a început să împingă din ce în ce mai mult JavaScript în rețea către client. Sigur, tehnologia a evoluat, telefoanele mobile și computerele au devenit mai bune cu mai multă memorie RAM și nuclee, dar JavaScript a început să evolueze mai repede.

Mai multe funcționalități, mai multe funcții și mai multe cadre au însemnat o experiență mai bună a utilizatorului și capacitatea de a crea o senzație de aplicație pe web.

Dar aceasta a însemnat, de asemenea, împingerea din ce în ce mai mult a JavaScript în rețea pe dispozitive care nu puteau ține pasul cu limitele JavaScript în evoluție.

Web-ul a fost creat pentru HTML

De ce ar trebui sa aflati Nextjs ca dezvoltator React

Dispozitivele mobile vechi și lente au început să renunțe – timpii de încărcare au devenit mari, au existat mai multe întârzieri, motoarele JS erau mai puțin puternice și era atât de mult JavaScript de analizat!

Cu cadre precum React și Angular, în esență împingeți pachete JavaScript uriașe către clienții care trebuie mai întâi să descarce micile pagini HTML.

Dezvoltatorii web care s-au mutat de la epoca PHP (HTML redat de server) la era JavaScript (HTML redat de client) au început în curând să-și dea seama că au înșelat.

React a fost excelent pentru interactivitate și componente performante, dar faptul că oamenii încep să folosească aceste instrumente pentru a construi Tot a început să creeze probleme pentru clienți.

O simpla Despre noi pagina, care ar putea fi o pagină HTML / CSS statică foarte simplă, era acum o pagină cu un pachet enorm de JS. Browserul a trebuit mai întâi să descarce, apoi să analizeze, apoi să execute și apoi să schimbe DOM-ul pentru a afișa conținutul.

Acest lucru a fost rău pentru toată lumea. Clienții au avut timpi de încărcare mai mari. Browserele au trebuit să lucreze din greu pentru a rula JS (browserele analizează și rulează HTML / CSS foarte eficient). Și motoarelor de căutare precum Google și Bing le-a fost greu să înțeleagă despre ce a fost pagina dvs., deoarece codul dvs. sursă nu conținea niciodată conținutul real. A fost întotdeauna încorporat undeva în pachetul dvs. JS.

Oamenii iubeau React și instrumentele similare. Dar au înțeles și implicațiile de a rula prea mult client JS.

Pe de altă parte, le-a plăcut cum funcționează PHP, dar nu le-a plăcut arhitectura acestuia. Deci, care a fost soluția?

Redare pe partea serverului (SSR) – cel mai bun din ambele lumi

Când dezvoltatorii au realizat că împingerea prea mult cod React asupra clientului era o problemă, s-au gândit: Hei, este posibil să codați în React, dar să expediați documente HTML către clienți?

La urma urmei, când se execută codul React, tot ce aveți cu adevărat este oricum un document HTML.

Așa că au făcut-o. S-a născut randarea server-side (SSR) pentru React.

Acum, cu SSR, puteți scrie cod React, cumva îl puteți rula pe server (care era mai puternic decât dispozitivul dvs. tipic client – cum ar fi un telefon mobil) și apoi puteți trimite documentul HTML clientului.

Câștig-câștig pentru toată lumea. Tu, ca dezvoltator, ajungi să codezi în React – tehnologia pe care o iubești. Și vizitatorul de pe site-ul dvs. primește un document HTML simplu (cu conținut vizibil și un JS puțin rehidratat), care obține o creștere masivă a performanței. În plus, Google te iubește acum.

Cine nu și-ar dori asta?

Dar a fost prea dificil

Renderizarea de pe server părea cu siguranță soluția la această problemă. Dar problema? A fost prea dificil să se configureze corect.

Caching și eliminare cache adecvate? Ați putea crea fișiere HTML statice pentru pagini care nu s-au modificat? Cum ar trebui să construiți o experiență de navigare fără probleme pe site-ul dvs. web, chiar dacă aveți HTML redat pe partea de server? Cum ar trebui să ușurați încărcarea pe serverele dvs. sau să generați conținut la cerere?

Și, pe lângă toate acestea, cum configurați întreaga arhitectură? Sigur, React și web oferă toate API-urile pentru acestea, dar sunt destul de detaliate și, de obicei, sunt configurate o singură dată.

Dacă sunteți cineva care de fapt construiește ceva valoros, după ceva timp ați dori ca majoritatea timpului dvs. să fie petrecut pe logica de afaceri a aplicației dvs. și nu pe logica de bază.

Vă prezentăm Next.js

Next.js este un cadru născut în ceruri. Se livrează cu:

  1. Cele mai bune practici SEO
  2. Caching și optimizare statică automată încorporate
  3. Pagini complet redate de server
  4. Suport 100% React
  5. Suport pentru funcția Lambda (rute API)
  6. Modificați bine configurația webpack / babel, dacă este necesar
  7. Și mult mai mult!

Abstrage toate acele configurări de performanță și dezvoltare de care aveți nevoie cu o aplicație tipică React și vă permite să vă concentrați doar pe ceea ce contează – codul logicii dvs. de afaceri.

Am avut prima mea experiență cu Next.js acum 2 ani, când era foarte tânăr.

Dar Next.js 9.5 a fost lansat anul acesta cu atât de multe funcții. Și cred că este sigur să spunem că este unul dintre cele mai puternice instrumente disponibile în ecosistemul de dezvoltare web, mai ales dacă sunteți dezvoltator React.

Execut eu codedamn (o platformă pentru ca dezvoltatorii să învețe să codeze) eu însumi pe Next.js. Site-ul are o creștere masivă a performanței în comparație cu aplicația obișnuită React.

Dacă sunteți dezvoltator React în 2020, una dintre cele mai bune abilități pe care le puteți învăța este Next.js. Iată câteva avantaje pe care vi le oferă ca dezvoltator:

  1. Cu siguranță o tehnologie emergentă – mai multe oportunități și posibilități de muncă
  2. Paginile redate de server înseamnă performanțe mai bune – mai mulți clienți pentru dvs.
  3. SEO pentru site-urile dvs. web – motoarele de căutare vă iubesc
  4. Toate avantajele de a avea un server pe loc – rute API, preluare dinamică a conținutului și caracteristică învechită în timp ce revalidează (oh, îmi place asta)
  5. O mare abilitate tehnică pe CV

Unele caracteristici Next.js care mă încântă

Next.js evoluează foarte repede. Acestea depășesc funcționalitățile vechi și introduc lucruri noi strălucitoare tot timpul.

Începând de astăzi, sunt foarte interesat de cadrul în ansamblu, dar iată câteva dintre alegerile mele de top:

# 1 Regenerare statică incrementală stabilă

Pur și simplu vorbind, această caracteristică vă permite să generați conținut static dinamic. Stai ce? Să vedem un exemplu rapid:

Spuneți că aveți un site de blog (ca acesta) cu o mulțime de articole. Când cineva vizitează /news/https://www.freecodecamp.org/news/why-you-should-learn-next-js-as-a-react-developer/
(Unde https://www.freecodecamp.org/news/why-you-should-learn-next-js-as-a-react-developer/
este orice), doriți să le serviți pagina statică cât de repede puteți.

Dar este posibil să nu doriți să creați toate pagini statice la timp de construcție, deoarece ți-ar lua mult timp. În câteva cazuri, acest lucru nu este deloc posibil la momentul construirii.

De asemenea, uneori conținutul dvs. ar putea schimbare, ca o modificare rapidă a blogului – deci nici nu doriți cu adevărat o pagină complet statică pentru totdeauna. Deci, care este soluția?

Folosind Next.js 9.5+, acum puteți genera pagini statice dinamic în calea dinamică și le puteți reîmprospăta.

Aceasta înseamnă că, odată ce Next va prelua acea adresă URL, aceasta o va salva ca pagină statică și o va difuza static ori de câte ori cineva vizitează calea. În același timp, va fi deschis să accepte noi căi dinamic.

Nu numai că puteți face acest lucru, cu un parametru de revalidare, puteți specifica, de asemenea, că Next.js ar trebui să vă actualizeze paginile statice o dată la X secunde în fundal, dacă există vreo modificare!

# 2 Suport Webpack 5

Next.js se îndreaptă și către suportul Webpack 5. Acest lucru este interesant, deoarece Webpack 5 aduce unele performanțe dulci și optimizări de pachete și elimină suportul pentru lucrurile depreciate din webpack 4, devenind nucleul mai usoara.

Asta înseamnă că aplicațiile dvs. Next.js vor fi mai rapide ca niciodată și mai robuste.

# 3 Eliminarea getInitialProps

Personal, nu mi-a plăcut conceptul de a executa o singură funcție în ambele medii – getInitialProps.

Din fericire, Next.js și-a dat seama că există o soluție mult mai bună disponibilă și au adus getServerSideProps și getStaticProps ca două metode excelente cu nume bune.

getServerSideProps, după cum sugerează și numele, vă permite să injectați recuzită în pagina Next.js de pe serverul însuși. Și getStaticProps permite Next.js să creeze în continuare ieșiri statice la momentul construirii.

getStaticProps combinată cu regenerarea statică incrementală este o caracteristică ucigașă în opinia mea. Obțineți numeroasele avantaje ale unui backend dinamic fără a avea un backend dinamic.

# 4 cache permanent pentru pachete de pagini

Next.js acceptă acum și cache-urile persistente pentru paginile care nu sunt modificate. Înainte, când expediați o nouă aplicație Next.js, Next.js arunca întreaga aplicație și utilizatorul trebuia să descarce din nou toate CSS / JS, chiar dacă acele pachete erau neschimbate.

În cea mai recentă versiune a Next.js lansată săptămâna trecută, prietenii noștri de la Vercel au introdus cache-ul persistent, care este din nou un lucru absolut minunat pentru a avea performanță.

# 5 Suport disponibil pentru module Sass și TypeScript

Dacă îmi place mai mult decât JavaScript, este TypeScript. Și Sass este și el dulce. Majoritatea oamenilor pe care îi cunosc folosesc Sass pentru a-și alimenta CSS-ul și oferă o experiență excelentă pentru dezvoltatori.

Next.js oferă de mult timp un suport excelent pentru TypeScript. Dar recent au adăugat suport bazat pe module și pentru Sass.

Acest lucru înseamnă că stilurile dvs. pot fi scrise acum în Sass, local pentru modulele dvs., cu cache și revalidare – totul gestionat de Next.js intern.

Se pare că vor cu adevărat să dezvoltați cele mai bune produse, concentrându-vă doar pe logica afacerii.

Learning Next.js [a Course]

Creez un curs video exclusiv pe Next.js cu cele mai bune practici, cele mai recente actualizări ale cadrului și lucruri super interesante pe care le puteți face cu el. Includ o grămadă de proiecte complete cu cadrul, astfel încât să obțineți o înțelegere profundă a modului de lucru cu acest instrument.

Dacă sunteți interesat, înscrieți-vă pentru acces anticipat folosind acest lucru Link formular Google și mă voi asigura că mă voi contacta când va ieși.

Concluzie

Mă duc în continuare la Next.js. Viteza cu care iterează și dezvoltă conceptul SSR și îl pune la dispoziția multora este doar uimitor.

Dacă v-ați înscris utilizând formularul de mai sus, așteptați să auziți de mine în curând cu un conținut minunat pentru dvs.

Simțiți-vă liber să mă loviți pe rețelele sociale pentru a împărtăși ceea ce credeți: Stare de nervozitate și Instagram.