Sait, mille laadimine võtab aega, võib olla nii külastajate kui ka Google'i jaoks ebameeldiv. Laadimiskiirused aitavad määrata teie asetust otsingutulemustes, mis omakorda mõjutab teie saidi külastajate arvu. Mida vähem külastajaid saate, seda väiksem on teie tulu.
JavaScripti raamistik, nagu Next.js, võib aidata teil veebisaidi kiirust suurendada ja pakkuda kasutajatele parimat kasutuskogemust. Next.js-il on palju funktsioone, et muuta see parimaks võimaluseks kiirete veebisaitide loomiseks.
Mis on Next.js?
Next.js on Node.js-ile ehitatud avatud lähtekoodiga raamistik, mis võimaldab teil luua Reacti rakendusi, mida saate serveris renderdada. See pakub valmistööriistu ja konfiguratsiooni, mida vajate kiirete SEO-sõbralike Reacti rakenduste loomiseks.
Ükskõik, kas soovite luua staatilisi lehti, e-kaubanduse rakendusi või hankida andmeid API-dest, võib Next.js aidata. See võimaldab teil minna ühelt koodirealt väikese konfiguratsiooniga täisrakendusele.
See on Next.js'i peamine eelis. Kui olete selle installinud, saate hakata looma kiireid tootmisvalmis rakendusi.
Next.js kasutamise eelised
Allpool on mõned Next.js kasutamise eelised.
Madal õppimiskõver
Next.js on Reacti ümbris, mis tähendab, et see laiendab Reacti koodi süntaksit. Seetõttu saavad Reacti arendajad selle üsna hõlpsalt kätte. Ja nagu Reactil, on ka Next.js-il käsk create-next-app, mille saate käivitada, et kiiresti luua uus rakendus Next.
Käivitage terminalis järgmine käsk ja Next.js installib vajalikud paketid ja loob alustamiseks failid.
npx luua-järgmiseks- rakenda oma-järgmiseks-rakendus-nimi
Eelrenderdamine
JavaScripti raamistikud nagu React, Angular ja Vue populariseeritud kliendipoolne renderdus. See on renderdusmeetod, mille puhul server saadab HTML-kesta ja JavaScripti kimbu. Seejärel käivitatakse see kood brauseris, värskendades dokumenti protsessis, mida nimetatakse hüdratsiooniks.
Kuna renderdamine toimub kasutaja seadmes, võivad CSR-rakendused olla aeglased. Next.js pakub lahendust eelrenderdamise kaudu. Selle asemel, et luua kasutajaliides kliendi poolel, ehitab Next.js selle eelnevalt serverisse.
Eelrenderdamist on kahte tüüpi.
- Serveripoolne renderdus (SSR)
- Staatilise saidi loomine (SSG)
SSR-is koostab server HTML-i, tõmbab kogu dünaamilise sisu ja saadab selle seejärel brauserisse. Server teeb seda iga sissetuleva päringu puhul. Seetõttu on SSR-i kõige parem kasutada pidevalt muutuvate andmete jaoks.
SSR-lehed võivad olla aeglased, olenevalt andmemahust, mida rakendus peab serverist tooma, ja serveri jõudluse tasemest. Programmi Next.js kaudu getServerSideProps() saate SSR-i kasutada ainult seda vajavate lehtede jaoks.
SSG-ga laadib rakendus ehituse ajal kõik andmed. Seejärel genereerib see HTML-lehti ja teenindab neid mitme päringu jaoks. See on väga kiire, sest kui server on kõik lehed loonud, saab CDN neid vahemällu salvestada ja neid teenindada.
Seetõttu sobib SSG suurepäraselt staatiliste lehtede, näiteks sihtlehtede jaoks. Staatiliste lehtede puhul, mis tarbivad andmeid API-dest, Next.js võimaldab teil hankida andmeid ehitamise ajal, kasutades getStaticProps().
Mõlemal renderdusmeetodil on eelised. Olenevalt kasutusjuhtumist võimaldab Next.js neid lehekülgede kaupa segada ja sobitada.
Sisseehitatud marsruutimine
Next.js kasutab failipõhist marsruutimissüsteemi. Server teisendab automaatselt kõik kausta Pages salvestatud failid marsruutideks. See on erinevalt Reacti rakendustest, mis nõuavad installimist Reageeri ruuter ja selle konfigureerimine.
Lisaks toetab React kliendipoolset marsruutimist selle kaudu komponent. Samuti laadib see eellaadimise ette need lehed, mille lingid on vaateaknas. See kehtib ainult SSG-d kasutavate lehtede jaoks, kuid isegi siis muudab see funktsioon ühelt lehelt teisele navigeerimise väga kiireks.
Automaatne koodi jagamine
Koodi jagamine viitab komplektifailide jagamisele tükkideks, mida saate nõudmisel laisk laadida. Next.js tegeleb automaatselt koodi tükeldamisega. Next.js jagab iga faili kaustas Pages automaatselt omaette kimpudeks. Lisaks koondatakse kõik lehtede vahel jagatud koodid üheks, et vältida sama koodi allalaadimist.
Koodi jagamine vähendab esialgset laadimisaega, kuna brauser peab alla laadima vaid väikese hulga andmeid.
Sisseehitatud pildi optimeerimine
Rasked pildid võivad teie saiti aeglustada ja selle edetabelit Google'is alandada. Rakenduse Next.js abil saate piltide automaatseks optimeerimiseks kasutada pildikomponenti.
importida Pilt alates 'järgmine/pilt'
See komponent teenindab õige suurusega pilte ja kaasaegsed vormingud nagu webp kui brauser seda toetab. Pildid laaditakse ka ainult siis, kui kasutaja neid kuvatakse. See optimeerib lehe kiirust ja säästab ruumi kasutaja seadmes.
Sisseehitatud CSS-i tugi
Next.js toetab CSS moodulid ja Sass karbist välja. Te ei pea selle konfigureerimisele lisaaega kulutama ja võite minna otse CSS-stiilide kirjutamise juurde. Next.js-iga on kaasas ka styled-jsx, mis võimaldab teil kirjutada CSS-i otse komponendi sisse.
Kasvav kogukond
Kuna Next.js on üles ehitatud Reactile, kogub see üsna kiiresti populaarsust. Seetõttu kasvab arendajate kogukond, kes on valmis aitama, kui jääte ummikusse. See koos suurepärase dokumentatsiooniga tagab, et isegi algajad saavad Next.js-iga hõlpsasti alustada.
Millal peaksite Next.js'i kasutama?
Next.js-i üks parimaid asju on selle renderdusvalikud. Te ei ole seotud CSR-i, SSR-i ega SSG-ga ning saate valida, milliseid lehti soovite renderdada serveri-, kliendipoolsel või täiesti staatiliseks.
Seetõttu saate kohandada seda, kuidas rakenduse iga leht esitatakse vastavalt oma vajadustele. Näiteks saate SSR-i abil renderdada lehti, mis tuginevad pidevalt muutuvatele andmetele, ja staatilise lehe, nagu sisselogimisleht, SSG abil.
Next.js sisaldab palju sisseehitatud funktsioone ja lisakonfiguratsiooni, mis võimaldab teil kohe funktsioone lisada. Te ei pea muretsema rakenduse marsruutide konfigureerimise, piltide optimeerimise ega pakettfailide jagamise pärast. See kõik on teie heaks tehtud.
Kui soovite luua Reacti rakendusi, mis tarbivad dünaamilist sisu ja ei soovi aega kulutada asjade seadistamine, pakettide installimine või rakenduse kiireks seadistamine, Next.js on parim lahendus. Kui aga loote staatilise ühelehelise rakenduse, on tavaline React endiselt hea valik.
Rakenduste loomine Reactiga
Next.js-il on sisseehitatud optimeerimisfunktsioonid ja tööriistad, mis muudavad selle suurepäraseks raamistikuks suure jõudlusega Reacti rakenduste loomiseks.
Kui soovite hakata neid funktsioone nägema ja ei tea, kust alustada, alustage Reacti rakenduste loomise õppimisest. Kuna koodi süntaks on peaaegu sama, on teil Next.js-i õppimise kogemus parem.
