Kas yra Next.js? Paprastas vadovas, kaip šiuolaikinės svetainės išlieka greitos

Jei girdėjote kūrėją minint „Next.js" ir linktelėjote nesuprasdami, ką tai iš tikrųjų reiškia, jūs ne vieni. Next.js yra karkasas, sukurtas ant React pagrindo, vieno iš plačiausiai naudojamų įrankių interaktyvioms svetainėms kurti, ir visas jo tikslas yra padaryti su React sukurtas svetaines greitesnes ir labiau paieškos sistemoms draugiškas, nei jos būtų kitaip.

Problema, kurią jis sprendžia

Paprastos React programos tradiciškai atlieka daug savo darbo lankytojo pačios naršyklės viduje: naršyklė atsisiunčia beveik tuščią puslapį, tada paleidžia JavaScript, kad sukurtų tikrąjį turinį, kurį mato lankytojas. Toks metodas veikia, tačiau tai gali reikšti lėtesnį pirmąjį įspūdį, ir istoriškai apsunkino paieškos sistemoms tinkamai perskaityti puslapio turinį. Next.js buvo sukurtas būtent tam išspręsti, perkeliant daugiau to darbo nuo lankytojo įrenginio į serverį, iš anksto.

Statinis svetainės generavimas

Viena iš pagrindinių Next.js technikų yra statinis svetainės generavimas, arba SSG. Puslapiai, kuriems nereikia keistis kiekvieno apsilankymo metu, įmonės puslapis „Apie mus", tinklaraščio įrašas, paslaugų puslapis, gali būti pilnai sukurti vieną kartą, iš anksto, kaip paprasti HTML failai. Kai lankytojas prašo to puslapio, serveris tiesiog pateikia jau paruoštą failą, o ne kuria jį nuo nulio, o tai yra maždaug taip greitai, kaip įmanoma pateikti tinklalapį.

Serverio pusės atvaizdavimas

Puslapiams, kuriems reikia naujausio, individualizuoto ar dažnai besikeičiančio turinio, prisijungusio vartotojo skydelis, gyvos kainos, paieškos rezultatai, Next.js siūlo serverio pusės atvaizdavimą, arba SSR. Vietoj puslapio kūrimo gerokai iš anksto, serveris sukuria jį šviežią tuo momentu, kai lankytojas jo paprašo, tada nusiunčia atgal pilnai suformuotą puslapį, o ne tuščią karkasą, kurį turėtų užpildyti naršyklė. Lankytojas vis tiek gauna greitą, paruoštą skaityti puslapį; jis tiesiog sukurtas tiksliai laiku, o ne iš anksto.

Kodėl tai iš tikrųjų svarbu

Šių technikų derinimo galutinis rezultatas yra tas, kad Next.js svetainė gali pateikti beveik kiekvieną puslapį kaip beveik baigtą, skaitomą dokumentą jau nuo pirmojo atsakymo, o ne priversti lankytojo naršyklę atlikti sunkų darbą. Tai tiesiogiai išverčiama į greitesnį įkėlimo laiką, geresnius našumo balus pagal metrikas, kurias „Google" naudoja svetainėms vertinti, dažnai vadinamas Core Web Vitals, ir svetainę, kuri jaučiasi akimirksninė, o ne lėta, ypač lėtesniuose mobiliuosiuose ryšiuose.

Next.js taip pat palaiko vidurio kelią tarp šių dviejų technikų, leidžiantį puslapius sukurti iš anksto, o tada automatiškai atnaujinti fone po nustatyto laikotarpio, kūrėjui nereikalaujant rankiniu būdu perstatyti visos svetainės kiekvieną kartą, kai keičiasi turinys. Tas lankstumas leidžia vienai svetainei derinti statinius, serverio atvaizduojamus ir periodiškai atnaujinamus puslapius greta vienas kito, renkantis kiekvienam konkrečiam puslapiui geriausiai tinkantį metodą.

Niekas iš to nereikalauja, kad lankytojas ar klientas suprastų kokį nors iš pagrindinių mechanizmų. Praktinis rezultatas yra tiesiog svetainė, kuri kraunasi greitai ir patikimai. Tačiau supratimas, kodėl maždaug ji yra greita, kad karkasas sąmoningai atlieka daugiau darbo iš anksto, kad jūsų lankytojams nereikėtų jo laukti, žymiai palengvina supratimą, kodėl konkretūs techniniai sprendimai už svetainės iš tikrųjų yra svarbūs verslui, kuris ją naudoja.