Egy olyan webhely, amelynek betöltése időbe telik, kiábrándító lehet a látogatók és a Google számára. A betöltési sebesség segít meghatározni a rangot a keresési eredmények között, ami viszont befolyásolja, hogy hány látogatót kap webhelye. Minél kevesebb látogatója van, annál alacsonyabb a bevétele.
A JavaScript-keretrendszer, például a Next.js, segíthet a webhelyek sebességének növelésében, és a legjobb felhasználói élményt nyújthatja. A Next.js rengeteg funkcióval rendelkezik, hogy a legjobb megoldás legyen a gyors webhelyek létrehozásához.
Mi az a Next.js?
Next.js egy Node.js-re épülő nyílt forráskódú keretrendszer, amely lehetővé teszi a kiszolgálón megjeleníthető React alkalmazások létrehozását. A gyors, SEO-barát React-alkalmazások elkészítéséhez azonnali szerszámokat és konfigurációt biztosít.
Akár statikus oldalakat, e-kereskedelmi alkalmazásokat szeretne létrehozni, akár adatokat szeretne lekérni API-kból, a Next.js segíthet. Lehetővé teszi, hogy egyetlen kódsorról egy teljes körű alkalmazásra váltson kis konfigurációval.
Ez a Next.js fő előnye. A telepítés után megkezdheti a gyors, gyártásra kész alkalmazások létrehozását.
A Next.js használatának előnyei
Az alábbiakban bemutatjuk a Next.js használatának néhány előnyét:
sekély tanulási görbe
A Next.js egy React burkoló, ami azt jelenti, hogy kiterjeszti a React kód szintaxisát. A React fejlesztői ezért könnyen felvehetik. És a Reacthoz hasonlóan a Next.js is rendelkezik a create-next-app paranccsal, amelynek végrehajtásával gyorsan létrehozhat egy új Next alkalmazást.
Futtassa a következő parancsot a terminálban, és a Next.js telepíti a szükséges csomagokat, és létrehozza a fájlokat a kezdéshez.
npx teremt-következő-alkalmazd a te-következő-app-név
Előzetes megjelenítés
JavaScript-keretrendszerek, mint a React, Angular és Vue népszerűsítette az ügyféloldali megjelenítést. Ez egy olyan megjelenítési módszer, ahol a szerver elküldi a HTML-héjat és egy JavaScript-köteget. Ez a kód ezután lefut a böngészőben, frissítve a dokumentumot a hidratálásnak nevezett folyamatban.
Mivel a renderelés a felhasználó eszközén történik, a CSR-alkalmazások lassúak lehetnek. A Next.js megoldást kínál az előzetes megjelenítésen keresztül. Ahelyett, hogy az ügyféloldalon építené fel a felhasználói felületet, a Next.js előre elkészíti azt a szerveren.
Kétféle előmegjelenítés létezik:
- Szerveroldali renderelés (SSR)
- Statikus webhelygenerálás (SSG)
Az SSR-ben a szerver összeállítja a HTML-t, lekéri az összes dinamikus tartalmat, majd elküldi a böngészőnek. A szerver ezt minden bejövő kérésnél megteszi. Az SSR ezért a legjobban használható folyamatosan változó adatokhoz.
Az SSR-oldalak lassúak lehetnek az alkalmazásnak a kiszolgálóról letöltendő adatmennyiségétől és a szerver teljesítményszintjétől függően. A GetServerSideProps() segítségével a Next.js-ben az SSR csak olyan oldalakhoz használható, amelyeknek szüksége van rá.
Az SSG használatával az alkalmazás előre letölti az összes adatot az összeállítás során. Ezután HTML oldalakat generál, és több kérésre kiszolgálja őket. Nagyon gyors, mert ha a szerver létrehozta az összes oldalt, a CDN képes gyorsítótárba helyezni és kiszolgálni azokat.
Emiatt az SSG tökéletes statikus oldalakhoz, például céloldalakhoz. Statikus oldalakhoz, hogy API-kból származó adatokat fogyasztanak, A Next.js lehetővé teszi az adatok lekérését az összeállítás során a getStaticProps() segítségével.
Mindkét renderelési módszernek megvannak az előnyei. A felhasználási esettől függően a Next.js lehetővé teszi, hogy oldalról oldalra keverje és párosítsa őket.
Beépített útválasztás
A Next.js fájl alapú útválasztási rendszert használ. A szerver automatikusan útvonalakká konvertálja az Oldalak mappába mentett összes fájlt. Ez eltér a telepítést igénylő React-alkalmazásoktól React router és konfigurálja azt.
Ezenkívül a React támogatja az ügyféloldali útválasztást a összetevő. Előzetesen letölti azokat az oldalakat is, amelyek hivatkozásai a nézetablakban vannak. Ez csak az SSG-t használó oldalakra vonatkozik, de ez a funkció még akkor is nagyon gyorsnak tűnik az egyik oldalról a másikra való navigálásra.
Automatikus kódfelosztás
A kódfelosztás a kötegfájlok darabokra osztását jelenti, amelyeket igény szerint lustán betölthet. A Next.js automatikusan kezeli a kódfelosztást. A Next.js automatikusan felosztja a Pages mappában lévő minden fájlt a saját kötegére. Ezenkívül az oldalak között megosztott kódok egybe vannak kötve, hogy megakadályozzák ugyanazon kód letöltését.
A kódfelosztás csökkenti a kezdeti betöltési időt, mivel a böngészőnek csak kis mennyiségű adatot kell letöltenie.
Beépített képoptimalizálás
A nehéz képek lelassíthatják webhelyét, és ronthatják a Google rangsorolását. A Next.js segítségével a képkomponens segítségével automatikusan optimalizálhatja a képeket.
import Kép tól től 'következő/kép'
Ez a komponens megfelelő méretű képeket szolgál ki és modern formátumok, mint a webp ha a böngésző támogatja. A képek is csak akkor töltődnek be, ha a felhasználó a nézetbe görgeti őket. Ez optimalizálja az oldal sebességét, és helyet takarít meg a felhasználó eszközén.
Beépített CSS támogatás
A Next.js támogatja CSS modulok és Sass a dobozból. Nem kell extra időt töltenie a konfigurálásával, és azonnal mehet a CSS-stílusok írásába. A Next.js rendelkezik a styled-jsx-szel is, amely lehetővé teszi a CSS írását közvetlenül az összetevőbe.
Növekvő közösség
Mivel a Next.js a Reactre épül, meglehetősen gyorsan népszerűvé válik. Ezért egyre nagyobb a fejlesztők közössége, akik hajlandóak segíteni, ha elakad. Ez a kiváló dokumentációval kombinálva biztosítja, hogy még a kezdők is könnyedén hozzáférhessenek a Next.js-hez.
Mikor érdemes a Next.js-t használni?
A Next.js egyik legjobb tulajdonsága a megjelenítési lehetőségei. Ön nincs kötve a CSR-hez, az SSR-hez vagy az SSG-hez, és kiválaszthatja, hogy mely oldalakat kívánja megjeleníteni a szerver oldalon, a kliens oldalon, vagy melyiket szeretné teljesen statikusan megjeleníteni.
Emiatt testreszabhatja, hogy az alkalmazás egyes oldalai hogyan jelenjenek meg az igényeik alapján. Például az SSR segítségével olyan oldalakat jeleníthet meg, amelyek folyamatosan változó adatokra támaszkodnak, az SSG használatával pedig statikus oldalt, például a bejelentkezési oldalt.
A Next.js számos beépített funkcióval és olyan extra konfigurációval rendelkezik, amely lehetővé teszi a szolgáltatások azonnali hozzáadását. Nem kell aggódnia az alkalmazás útvonalainak konfigurálása, a képek optimalizálása vagy a kötegfájlok felosztása miatt. Mindez megtörtént helyetted.
Ha olyan React alkalmazásokat szeretne létrehozni, amelyek dinamikus tartalmat fogyasztanak, és nem akarnak időt tölteni a dolgok beállítása, csomagok telepítése vagy az alkalmazás gyorsra állítása, a Next.js a legjobb megoldás. Ha azonban statikus egyoldalas alkalmazást hoz létre, a sima React továbbra is jó választás.
Alkalmazások készítése a React segítségével
A Next.js beépített optimalizálási funkciókkal és eszközökkel rendelkezik, amelyek nagyszerű keretté teszik a nagy teljesítményű React-alkalmazások készítéséhez.
Ha szeretné látni ezeket a funkciókat működés közben, és nem tudja, hol kezdje, kezdje azzal, hogy megtanulja, hogyan kell React alkalmazásokat készíteni. Mivel a kód szintaxisa közel azonos, a Next.js tanulása jobb élményben lesz része.
