Tokie skaitytojai kaip jūs padeda palaikyti MUO. Kai perkate naudodami nuorodas mūsų svetainėje, galime uždirbti filialų komisinius.
Atvaizdavimas yra „React“ kodo konvertavimo į HTML procesas. Pasirinktas atvaizdavimo metodas priklauso nuo duomenų, su kuriais dirbate, ir nuo to, kiek jums rūpi našumas.
„Next.js“ atvaizdavimas yra labai universalus. Galite pateikti puslapius kliento arba serverio pusėje, statiškai arba laipsniškai.
Pažiūrėkite, kaip šie metodai veikia ir kaip kiekvienas veikia.
Serverio atvaizdavimas
Naudojant serverio pusės atvaizdavimą (SSR), kai vartotojas apsilanko tinklalapyje, naršyklė serveriui siunčia užklausą dėl to puslapio. Jei reikia, serveris paima reikiamus duomenis iš duomenų bazės ir kartu su puslapio turiniu siunčia juos į naršyklę. Tada naršyklė jį parodo vartotojui.
Naršyklė pateikia šią užklausą kiekvienai nuorodai, kurią vartotojas spusteli, o tai reiškia, kad serveris kiekvieną kartą apdoroja užklausą.
Tai gali sumažinti svetainės našumą. Tačiau serverio pusės atvaizdavimas puikiai tinka puslapiams, kuriuose naudojami dinaminiai duomenys.
Naudokite getServerSideProps, kad atkurtumėte puslapį kiekvieną kartą, kai vartotojas to paprašo.
eksportuotinumatytasfunkcijaNamai({ duomenys }) {
grąžinti (
<pagrindinis>
// Naudokiteduomenis
</main>
);
}eksportuotiasyncfunkcijagetServerSideProps() {
// Gauti duomenis iš išorinės API
konst res = laukti fetch('https://.../data')
konst duomenys = laukti res.json()
// Bus perduotas puslapio komponentui kaip rekvizitas
grąžinti { rekvizitai: { duomenys } }
}
getServerSideProps veikia tik serveryje ir veikia taip:
- Kai vartotojas pasiekia puslapį tiesiogiai, jis paleidžiamas pagal užklausą ir puslapis iš anksto pateikiamas kartu su jo grąžinamomis rekvizitais.
- Kai vartotojas pasiekia puslapį per nuorodą Kitas, naršyklė siunčia užklausą jį paleidžiančiam serveriui.
Naujoje versijoje galite pasirinkti serverio atvaizdavimą naudodami dinaminius duomenų gavimus puslapyje arba makete.
Dinaminiai duomenų gavimas yra užklausos „fetch()“, kurios konkrečiai atsisako talpyklos, nustatydami talpyklos parinktį į „be parduotuvės“.
atnešti ('https://...', { talpykla: 'neparduotuvė' });
Arba nustatykite pakartotinį patvirtinimą į 0:
atnešti ('https://...', { kitas: { pakartotinai patvirtinti: 0 } });
Ši funkcija šiuo metu yra beta versijos, todėl atminkite tai. Daugiau apie dinaminius duomenų gavimus galite perskaityti Next.js 13 beta dokumentai.
Kliento pusės atvaizdavimas
Turėtumėte naudoti kliento pusės pateikimą (CSR), kai reikia dažnai atnaujinti duomenis arba kai nenorite iš anksto pateikti puslapio. CSR galite įdiegti puslapio arba komponento lygiu. Puslapio lygiu „Next.js“ nuskaito duomenis vykdymo metu, o kai tai atliekama komponento lygiu – duomenis, kai jis yra prijungtas. Dėl šios priežasties ĮSA gali prisidėti prie lėto veikimo.
Naudoti useEffect() kabliukas Norėdami pateikti kliento puslapius taip:
importuoti { useState, useEffect } iš 'reaguoti'
funkcijaNamai() {
konst [duomenys, setData] = useState(nulinis)
konst [isLoading, setLoading] = useState(klaidinga)useEffect(() => {
setLoading(tiesa)atnešti ('/api/get-data')
.then((res) => res.json())
.ten((duomenys) => {
setData (duomenys)
setLoading(klaidinga)
})
}, [])jei (isLoading) grąžinti <p>Įkeliama...</p>
jei (!duomenys) grąžinti <p>Nėra duomenų</p>
grąžinti (
<div>
// Naudokiteduomenis
</div>
)
}
Taip pat galite naudoti SWR kabliuką. Jis saugo duomenis talpykloje ir iš naujo patvirtina, jei jie pasentų.
importuoti naudoti SWR iš 'swr'
const fetcher = (...args) => atnešti(...args).then((res) => res.json())
funkcijaNamai() {
konst { duomenys, klaida } = useSWR('/api/duomenys', parsinešėjas)
jei (klaida) grąžinti <div>Nepavyko užkrauti</div>
jei (!duomenys) grąžinti <div>Įkeliama...</div>
grąžinti (
<div>
// Naudokiteduomenis
</div>
)
}
„Next.js 13“ turite naudoti kliento komponentą, failo viršuje pridėdami direktyvą „use client“.
"naudotiklientas";
eksportuotinumatytas () => {
grąžinti (
<div>
// Kliento komponentas
</div>
);
};
Skirtumas tarp SSR ir CSR yra tas, kad duomenys gaunami kiekvienoje serverio puslapio užklausoje SSR, o duomenys gaunami kliento pusėje naudojant CSR.
Statinės svetainės generavimas
Su statinės svetainės generavimu (SSG), puslapis paima duomenis vieną kartą kūrimo metu. Statiniai puslapiai yra labai greiti ir gerai veikia, nes visi puslapiai yra sukurti iš anksto. Todėl SSG puikiai tinka puslapiams, kuriuose naudojamas statinis turinys, pavyzdžiui, pardavimo puslapiams ar tinklaraščiams.
Programoje Next.js turite eksportuoti funkciją getStaticProps į puslapį, kurį norite pateikti statiškai.
eksportuotinumatytasfunkcijaNamai({ duomenys }) {
grąžinti (
<pagrindinis>
// Naudokiteduomenis
</main>
);
}eksportuotiasyncfunkcijagetStaticProps() {
// Gauti duomenis iš išorinės API kūrimo metu
konst res = laukti fetch('https://.../data')
konst duomenys = laukti res.json()
// Bus perduotas puslapio komponentui kaip rekvizitas
grąžinti { rekvizitai: { duomenys } }
}
Taip pat galite pateikti užklausą „getStaticProps“ duomenų bazėje.
eksportuotiasyncfunkcijagetStaticProps() {
// Skambintifunkcijaįatneštiduomenisišduomenų bazėje
konst duomenys = laukti gautiDataFromDB()
grąžinti { rekvizitai: { duomenys } }
}
13 versijoje Next.js statinis atvaizdavimas yra numatytasis, o turinys paimamas ir saugomas talpykloje, nebent išjungėte talpyklos parinktį.
asyncfunkcijagetData() {
konst res = laukti fetch('https://.../data');
grąžinti res.json();
}
eksportuotinumatytasasyncfunkcijaNamai() {
konst duomenys = laukti getData ();
grąžinti (
<pagrindinis>
// Naudokiteduomenis
</main>
);
}
Išmokti daugiau apie statinis atvaizdavimas Next.js 13 iš dokumentų.
Prieauginis statinis generavimas
Kartais norite naudoti SSG, bet taip pat norite reguliariai atnaujinti turinį. Čia padeda laipsniškas statinis generavimas (ISG).
ISG leidžia kurti arba atnaujinti statinius puslapius juos sukūrus po nurodyto laiko intervalo. Tokiu būdu jums nereikia iš naujo kurti visos svetainės tik tų puslapių, kuriems to reikia.
ISG išlaiko SSG privalumus ir papildomą naudą – naudotojams teikia naujausią turinį. ISG puikiai tinka tiems jūsų svetainės puslapiams, kuriuose naudojami besikeičiantys duomenys. Pavyzdžiui, galite naudoti ISR tinklaraščio įrašams pateikti kad tinklaraštis būtų atnaujintas, kai redaguojate įrašus arba pridedate naujų.
Norėdami naudoti ISR, pridėkite revalidate prop prie puslapio funkcijos getStaticProps.
eksportuotiasyncfunkcijagetStaticProps() {
konst res = laukti fetch('https://.../data')
konst duomenys = laukti res.json()
grąžinti {
rekvizitas: {
duomenys,
},
pratęsti: 60
}
}
Čia Next.js bandys atkurti puslapį, kai po 60 sekundžių gausite užklausą. Į kitą užklausą bus atsakyta su atnaujintu puslapiu.
„Next.js“ 13 versijoje naudokite pakartotinį patvirtinimą taip:
atnešti ('https://.../data', { kitas: { pakartotinai patvirtinti: 60 } });
Galite nustatyti laiko intervalą, kuris geriausiai tinka jūsų duomenims.
Kaip pasirinkti atvaizdavimo metodą
Iki šiol sužinojote apie keturis Next.js atvaizdavimo metodus – CSR, SSR, SSG ir ISG. Kiekvienas iš šių metodų tinka skirtingoms situacijoms. CSR naudinga puslapiams, kuriems reikalingi nauji duomenys, kur stiprus SEO nekelia susirūpinimo. SSR taip pat puikiai tinka puslapiams, kuriuose naudojami dinaminiai duomenys, tačiau jis labiau tinka SEO.
SSG tinka puslapiams, kurių duomenys dažniausiai yra statiniai, o ISG geriausiai tinka puslapiams, kuriuose yra duomenų, kuriuos norite atnaujinti periodiškai. SSG ir ISG yra puikūs našumo ir SEO požiūriu, nes duomenys iš anksto gaunami ir galite juos išsaugoti talpykloje.
