Hienoa työtä! Olemme hakeneet tietoja ja onnistuneesti näyttäneet ne käyttäjälle. Olemme kuitenkin kohdanneet ongelman. Ongelma johtuu staattisesta hallintapaneelistamme, mikä tarkoittaa, että tiedon päivitykset eivät näy sovelluksessa.

Tutustutaanpa staattisen ja dynaamisen renderöinnin käsitteisiin.

Staattinen renderöinti

Staattinen renderöinti tarkoittaa sisällön valmistelua ja näyttämistä ennen kuin käyttäjä edes pyytää sitä. Se on kuin tekisit kasan voileipiä valmiiksi ennen kuin vieraat saapuvat juhliin.

Esimerkki

Kuvittele järjestäväsi piknikin. Sen sijaan, että tekisit voileipiä vieraiden saapuessa, valmistelet ne etukäteen ja asetat pöydälle. Kun ihmiset tulevat, he ottavat valmiin voileivän. Tämä tekee kaikesta nopeampaa ja helpompaa.

Hyödyt

• Nopeammat verkkosivut: Kuten valmiit voileivät, etukäteen valmisteltu sisältö voidaan tarjota käyttäjille nopeasti ja helposti;
• Vähemmän kuormitusta palvelimelle: Koska kaikki on valmisteltu etukäteen, palvelimen ei tarvitse tehdä voileipiä (luoda sisältöä) jokaiselle käyttäjälle erikseen;
• Parempi hakukonenäkyvyys: Hakukoneiden on helpompi ymmärtää ja sijoittaa valmiiksi tehtyä sisältöä, aivan kuten hyvin järjestettyä piknikpöytää.

Käyttötapaukset

Staattinen renderöinti sopii hyvin esimerkiksi staattisiin blogikirjoituksiin tai tuotesivuihin, joissa sisältö pysyy pääosin samana ja on sama kaikille.

Dynaaminen renderöinti

Dynaaminen renderöinti tarkoittaa sisällön luomista reaaliajassa käyttäjän pyynnöstä. Se on kuin kokki, joka valmistaa yksilöllisiä annoksia jokaiselle asiakkaalle ravintolassa.

Esimerkki

Ajattele ravintolaa, jossa kokki valmistaa ateriat asiakkaiden tilausten mukaan. Kokki saa tilauksen, valmistaa aterian ja tarjoilee sen tuoreena. Tämä vastaa dynaamista renderöintiä, jossa sisältö luodaan jokaiselle sivulla kävijälle erikseen.

Hyödyt

• Reaaliaikaiset päivitykset: Kuten kokki voi käyttää tuoreita raaka-aineita, dynaaminen renderöinti mahdollistaa reaaliaikaisen tai usein päivittyvän datan näyttämisen;
• Personoitu sisältö: Kuten kokki valmistaa annoksia asiakkaan toiveiden mukaan, dynaaminen renderöinti sopii erinomaisesti personoidun sisällön, kuten koontinäyttöjen tai käyttäjäprofiilien, esittämiseen;
• Pääsy käyttäjäkohtaiseen tietoon: Se on kuin kokki kysyisi asiakkaan mieltymyksiä ennen ruoan valmistamista – dynaaminen renderöinti mahdollistaa käyttäjäkohtaisen tiedon, kuten evästeiden tai URL-hakuehtojen, hyödyntämisen.

Käyttötapaukset

Dynaaminen renderöinti sopii sovelluksiin, joissa data muuttuu usein tai personoitu sisältö on tärkeää, kuten sosiaalisen median syötteet tai reaaliaikaiset koontinäytöt.

Takaisin projektiin

Sovelluksessamme haluamme aina näyttää ajantasaisimman tiedon.

Kun käytetään @vercel/postgres-kirjastoa, välimuistin säännöt eivät ole ennalta määriteltyjä, mikä antaa meille joustavuutta päättää, miten data käsitellään – staattisesti tai dynaamisesti.

Jotta koontinäytöstä saadaan dynaaminen, voimme käyttää Next.js:n ominaisuutta nimeltä unstable_noStore. Sen avulla voidaan ohittaa staattinen renderöinti. Näin se tehdään:

Lisää data.ts-tiedoston alkuun rivi import unstable_noStore from next/cache. Käytä sitä sitten datan hakufunktioissa määrittääksesi, miten data käsitellään.

Käytännössä