Kaltaisesi lukijat auttavat tukemaan MUO: ta. Kun teet ostoksen käyttämällä sivustollamme olevia linkkejä, voimme ansaita kumppanipalkkion.

Renderöinti on prosessi, jossa React-koodi muunnetaan HTML: ksi. Valitsemasi renderöintimenetelmä riippuu käsittelemistäsi tiedoista ja siitä, kuinka paljon välität suorituskyvystä.

Next.js: ssä renderöinti on erittäin monipuolista. Voit renderöidä sivut asiakas- tai palvelinpuolella, staattisesti tai asteittain.

Katso, miten nämä menetelmät toimivat ja miten kukin toimii.

Palvelinpuolen renderöinti

Palvelinpuolen renderöinnissä (SSR), kun käyttäjä vierailee verkkosivulla, selain lähettää palvelimelle kyseistä sivua koskevan pyynnön. Palvelin hakee tarvittaessa tietokannasta tarvittavat tiedot ja lähettää ne yhdessä sivun sisällön kanssa selaimeen. Selain näyttää sen sitten käyttäjälle.

Selain tekee tämän pyynnön jokaisesta linkistä, jota käyttäjä napsauttaa, mikä tarkoittaa, että palvelin käsittelee pyynnön joka kerta.

Tämä voi heikentää verkkosivuston suorituskykyä. Palvelinpuolen renderöinti on kuitenkin täydellinen sivuille, jotka kuluttavat dynaamista dataa.

instagram viewer

Käytä getServerSidePropsia sivun rakentamiseen uudelleen aina, kun käyttäjä pyytää sitä.

viedäoletuksenatoimintoKoti({ data }) {
palata (
<pää>
 // Käyttäätiedot
</main>
 );
}
viedäasynktoimintogetServerSideProps() {
// Hae tiedot ulkoisesta sovellusliittymästä
konst res = odottaa fetch('https://.../data')
konst data = odottaa res.json()
// Välitetään sivukomponenttiin rekvisiittana
palata { rekvisiitta: { data } }
}

getServerSideProps toimii vain palvelimella, ja se toimii seuraavasti:

  • Kun käyttäjä siirtyy sivulle suoraan, se toimii pyynnöstä ja sivu esihahmonnetaan sen palauttamien rekvisiittausten kanssa.
  • Kun käyttäjä siirtyy sivulle Seuraava-linkin kautta, selain lähettää pyynnön sitä suorittavalle palvelimelle.

Uudessa versiossa voit ottaa käyttöön palvelinpuolen renderöinnin käyttämällä sivulla tai asettelussa olevia dynaamisia tiedonhakuja.

Dynaamiset tiedonhaut ovat fetch()-pyyntöjä, jotka erityisesti kieltäytyvät välimuistista asettamalla välimuistiasetukseksi "no-store".

hae('https://...', { kätkö: 'ei-myymälää' });

Vaihtoehtoisesti voit asettaa vahvistuksen uudelleen arvoksi 0:

hae('https://...', { seuraava: { vahvista uudelleen: 0 } });

Tämä ominaisuus on tällä hetkellä betavaiheessa, joten pidä se mielessä. Voit lukea lisää dynaamisista tiedonhauista Next.js 13 beta-dokumentit.

Asiakaspuolen renderöinti

Sinun tulee käyttää asiakaspuolen renderöintiä (CSR), kun sinun on päivitettävä tietoja usein tai kun et halua esihahmontaa sivuasi. Voit ottaa CSR: n käyttöön sivu- tai komponenttitasolla. Sivutasolla Next.js hakee tiedot ajon aikana, ja kun se on tehty komponenttitasolla, se hakee tiedot liitettäessä. Tämän vuoksi CSR voi osaltaan hidastaa suorituskykyä.

Käytä useEffect()-koukku renderöidä sivut asiakkaassa näin:

tuonti { useState, useEffect } alkaen 'reagoi'
toimintoKoti() {
konst [data, setData] = useState(tyhjä)
konst [isLoading, setLoading] = useState(väärä)
useEffect(() => {
 setLoading(totta)


hae('/api/get-data')
 .then((res) => res.json())
 .hen((data) => {
 setData (data)
 setLoading(väärä)
 })
 }, [])


jos (isLoading) palauttaa <s>Ladataan...</s>
 jos (!data) palautuu <s>Ei dataa</s>
palata (
<div>
 // Käyttäätiedot
</div>
 )
}

Voit myös käyttää SWR-koukkua. Se tallentaa tiedot välimuistiin ja vahvistaa ne uudelleen, jos ne vanhentuvat.

tuonti käytä SWR: ää alkaen 'swr'
const fetcher = (...args) => hae(...args).then((res) => res.json())
toimintoKoti() {
konst { data, error } = useSWR('/api/data', hakija)
 jos (virhe) palaa <div>Lataus epäonnistui</div>
 jos (!data) palautuu <div>Ladataan...</div>
palata (
<div>
 // Käyttäätiedot
</div>
 )
}

Next.js 13:ssa sinun on käytettävä asiakaskomponenttia lisäämällä "use client" -käsky tiedoston yläosaan.

"käyttääasiakas";
viedäoletuksena () => {
palata (
<div>
// Asiakaskomponentti
</div>
 );
};

Ero SSR: n ja CSR: n välillä on se, että tiedot haetaan jokaisella sivupyynnöllä palvelimella SSR: ssä, kun taas tiedot haetaan asiakaspuolelta CSR: ssä.

Staattisen sivuston luominen

Static-site Generation (SSG), sivu hakee tiedot kerran rakennusaikana. Staattisesti luodut sivut ovat erittäin nopeita ja toimivat hyvin, koska kaikki sivut on rakennettu etukäteen. SSG on siksi täydellinen sivuille, jotka käyttävät staattista sisältöä, kuten myyntisivut tai blogit.

Next.js: ssä sinun on vietävä getStaticProps-funktio sivulle, jonka haluat hahmontaa staattisesti.

viedäoletuksenatoimintoKoti({ data }) {
palata (
<pää>
 // Käyttäätiedot
</main>
 );
}
viedäasynktoimintogetStaticProps() {
// Hae tiedot ulkoisesta API: sta rakennusvaiheessa
konst res = odottaa fetch('https://.../data') 
konst data = odottaa res.json()
// Välitetään sivukomponenttiin rekvisiittana
palata { rekvisiitta: { data } }
}

Voit myös kysyä tietokannasta getStaticPropsissa.

viedäasynktoimintogetStaticProps() {
 // Puhelutoimintotohakeatiedotalkaentietokanta
konst data = odottaa getDataFromDB()
palata { rekvisiitta: { data } }
}

Next.js 13:ssa staattinen renderöinti on oletusarvo, ja sisältö noudetaan ja tallennetaan välimuistiin, ellet ota välimuistiasetusta pois päältä.

asynktoimintogetData() {
konst res = odottaa fetch('https://.../data');
palata res.json();
}
viedäoletuksenaasynktoimintoKoti() {
konst data = odottaa getData();
palata (
<pää>
 // Käyttäätiedot
</main>
 );
}

Lisätietoja: staattinen renderöinti Next.js 13:ssa asiakirjoista.

Inkrementaalinen-staattinen sukupolvi

Joskus haluat käyttää SSG: tä, mutta haluat myös päivittää sisältöä säännöllisesti. Tässä auttaa inkrementaalinen staattinen generointi (ISG).

ISG: n avulla voit luoda tai päivittää staattisia sivuja, kun olet luonut ne määrittämäsi ajanjakson jälkeen. Tällä tavalla sinun ei tarvitse rakentaa koko sivustoa uudelleen vain niitä sivuja, jotka sitä tarvitsevat.

ISG säilyttää SSG: n edut ja lisäetuna ajantasaisen sisällön tarjoamisen käyttäjille. ISG on täydellinen niille sivustosi sivuille, jotka kuluttavat muuttuvaa dataa. Voit esimerkiksi käytä ISR: ää blogitekstien hahmontamiseen niin, että blogi pysyy ajan tasalla, kun muokkaat viestejä tai lisäät uusia.

Jos haluat käyttää ISR: ää, lisää revalidate prop sivun getStaticProps-funktioon.

viedäasynktoimintogetStaticProps() {
konst res = odottaa fetch('https://.../data')
konst data = odottaa res.json()
palata {
 rekvisiitta: {
 tiedot,
 },
 vahvistaa uudelleen: 60
 }
}

Täällä Next.js yrittää rakentaa sivun uudelleen, kun pyyntö tulee 60 sekunnin kuluttua. Seuraava pyyntö johtaa vastaukseen päivitetyllä sivulla.

Käytä Next.js 13:ssa haussa revalidatea seuraavasti:

hae('https://.../data', { seuraava: { vahvista uudelleen: 60 } });

Voit määrittää aikaväliksi sen, mikä parhaiten toimii tietojesi kanssa.

Renderöintimenetelmän valitseminen

Tähän mennessä olet oppinut Next.js: n neljästä renderöintimenetelmästä – CSR, SSR, SSG ja ISG. Jokainen näistä menetelmistä sopii eri tilanteisiin. CSR on hyödyllinen sivuilla, jotka tarvitsevat tuoretta dataa, joilla vahva SEO ei ole huolenaihe. SSR sopii erinomaisesti myös sivuille, jotka kuluttavat dynaamista dataa, mutta se on SEO-ystävällisempi.

SSG sopii sivuille, joiden tiedot ovat enimmäkseen staattisia, kun taas ISG sopii parhaiten sivuille, jotka sisältävät tietoja, joita haluat päivittää aikavälein. SSG ja ISG ovat erinomaisia ​​suorituskyvyn ja hakukoneoptimoinnin kannalta, koska tiedot haetaan valmiiksi ja voit tallentaa sen välimuistiin.