Edistyneet tiedonhankinnan mallit
Toteuttakaa tehokas tiedonhankinta käyttämällä `async/await`-rakennetta suoraan Server Components -komponenteissa ja tutustukaa uudelleenvalidoinnin strategioihin.
Edistyneet tiedonhankinnan mallit on ilmainen Next.js 15 -täyden pinon verkkosovellukset-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Next.js 15 -täyden pinon verkkosovellukset-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Next.js 15 -täyden pinon verkkosovellukset-kurssilla on yhteensä 4 oppituntia.
Tehokas tietojen hakeminen
Next.js-sovelluksissa tietojen tehokas hakeminen on nopeiden ja responsiivisten sovellusten perusta. Olemme tutustuneet tietojen hakemisen perusteisiin, mutta mitä edistyneitä strategioita siihen on?
Tässä oppitunnissa opit hienosäätämään tietojen hakemista Server Components -komponenteissa välimuistin hallitsemiseksi ja tietojen ajantasaisuuden varmistamiseksi. Näin sovelluksen suorituskyky ja käyttökokemus paranevat.
Tietojen hakeminen suoraan palvelimelta
Next.js 15:n App Routerissa voit käyttää async/await-syntaksia suoraan Server Components -komponenteissa. Voit siis hakea tiedot siinä kohdassa, jossa käyttöliittymä renderöidään, ilman asiakaspuolen Hookeja tai API-reittejä.
Tässä on yksinkertainen esimerkki tehtävän hakemisesta:
// app/page.tsx
export default async function HomePage() {
const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
const todo = await response.json();
return (
<div>
<h1>Todo Item:</h1>
<p><b>Title:</b> {todo.title}</p>
<p><b>Completed:</b> {todo.completed ? 'Yes' : 'No'}</p>
</div>
);
}Automaattinen välimuistitus
Oletusarvoisesti Next.js tallentaa Server Components -komponenteissa tehdyt fetch-pyynnöt automaattisesti välimuistiin. Tämä on tehokas optimointi!
- Oletustoiminta vastaa toiminnon
{ cache: 'force-cache' }käyttöä. - Se sopii erinomaisesti tiedoille, jotka eivät muutu usein, kuten blogikirjoituksille tai tuotetiedoille.
- Kun tiedot on haettu kerran, samaan URL-osoitteeseen tehdyt pyynnöt käyttävät tietyn ajan kuluessa välimuistissa olevia tietoja, mikä nopeuttaa sivujen latautumista.
Aina ajantasaiset tiedot
Joskus tarvitset jokaisella pyynnöllä uusimmat mahdolliset tiedot ja haluat ohittaa välimuistin. Tällöin cache: 'no-store' on hyödyllinen.
Käytä sitä erittäin dynaamiseen sisältöön, käyttäjäkohtaisiin tietoihin tai reaaliaikaisiin syötteisiin, joissa edes muutaman sekunnin vanhentuneet tiedot eivät ole hyväksyttäviä.
// app/live-data/page.tsx
export default async function LiveDataPage() {
// Fetch data that should never be cached
const response = await fetch(
'https://api.example.com/live-feed',
{ cache: 'no-store' } // Always fetch fresh data
);
const data = await response.json();
return (
<div>
<h1>Live Feed:</h1>
<p>{data.latestUpdate}</p>
<p>Fetched: {new Date().toLocaleTimeString()}</p>
</div>
);
}Ajastetut tietojen päivitykset
Entä jos tarvitset ajantasaiset tiedot, mutta et jokaisella pyynnöllä? Voit määrittää Next.js:n validoimaan tiedot uudelleen (hakemaan ne uudestaan) tietyn ajan kuluttua käyttämällä next: { revalidate: seconds }-asetusta.
Tämä sopii erinomaisesti säännöllisesti päivittyvälle sisällölle, kuten uutisartikkeleille tai osakekursseille, sillä se tasapainottaa ajantasaisuuden ja suorituskyvyn.
// app/news/page.tsx
export default async function NewsPage() {
const response = await fetch(
'https://api.example.com/latest-news',
{ next: { revalidate: 60 } } // Revalidate every 60 seconds
);
const news = await response.json();
return (
<div>
<h1>Latest News:</h1>
<ul>
{news.articles.slice(0, 3).map(article => (
<li key={article.id}>{article.title}</li>
))}
</ul>
</div>
);
}Uudelleenvalidointi polun perusteella
Aikaperusteisen uudelleenvalidoinnin lisäksi Next.js tarjoaa myös tarvittaessa tehtävän uudelleenvalidoinnin. Voit siis ohjelmallisesti pyytää Next.js:ää hakemaan tiedot uudelleen tietyltä sivulta tai tietystä polusta.
revalidatePath('/your-path')-funktiota kutsutaan yleensä Server Actionista tai API-reitiltä. Tietojen muutoksen jälkeen, esimerkiksi kun käyttäjä päivittää profiilinsa, voit mitätöidä kyseisen käyttäjän profiilisivun välimuistin, jotta hän näkee uusimmat tiedot heti.
Uudelleenvalidointi tunnisteen perusteella
Joustavampi tapa suorittaa uudelleenvalidointi tarvittaessa on käyttää tunnisteita. Voit liittää fetch-pyyntöön yhden tai useita tunnisteita käyttämällä asetusta next: { tags: ['tag1', 'tag2'] }.
Myöhemmin voit kutsua funktiota revalidateTag('tag1'), joka mitätöi kaikki tunnisteeseen 'tag1' liittyvät välimuistissa olevat tiedot polusta riippumatta. Tämä on hyödyllistä tiedoille, jotka näkyvät monilla sivuilla, kuten tuotteille tai kategorioille.
// app/products/page.tsx
export default async function ProductsPage() {
const response = await fetch(
'https://api.example.com/products',
{ next: { tags: ['products-list'] } } // Tag this fetch
);
const products = await response.json();
return (
<div>
<h1>Our Products:</h1>
<ul>
{products.slice(0, 3).map(product => (
<li key={product.id}>{product.name}</li>
))}
</ul>
</div>
);
}Vikasietoinen tietojen hakeminen
Tietoja haettaessa voi ilmetä virheitä, kuten verkkoyhteysongelmia, API-palvelun käyttökatkoja tai virheellisiä vastauksia. Virheet on tärkeää käsitellä hallitusti, jotta sovellus ei kaadu.
Sijoita fetch-kutsut aina try...catch-lohkon sisään ja tarkista response.ok-ominaisuus varmistaaksesi, että pyyntö onnistui.
// app/error-example/page.tsx
export default async function ErrorExamplePage() {
let data = null;
let errorMessage = null;
try {
const response = await fetch('https://api.nonexistent.com/data');
if (!response.ok) {
throw new Error(`Failed to fetch: ${response.statusText}`);
}
data = await response.json();
} catch (error) {
errorMessage = error.message;
}
return (
<div>
<h1>Data Fetching with Error Handling:</h1>
{errorMessage && <p style={{ color: 'red' }}>Error: {errorMessage}</p>}
{data && <p>Data: {data.message}</p>}
</div>
);
}Milloin mitäkin kannattaa käyttää
Oikean tietojen hakemisen strategian valinta riippuu tietojesi ominaisuuksista:
- Oletusarvoinen välimuistitus (
force-cache): staattiselle sisällölle tai harvoin päivittyville tiedoille. Paras suorituskyky. cache: 'no-store': erittäin dynaamisille, reaaliaikaisille tai käyttäjäkohtaisille tiedoille, joiden on oltava aina ajantasaisia.next: { revalidate: seconds }: säännöllisesti päivittyville tiedoille, kun haluat tasapainottaa ajantasaisuuden ja suorituskyvyn.- Tarvittaessa tehtävä uudelleenvalidointi (
revalidatePath/revalidateTag): päivitysten käynnistämiseen tiettyjen tapahtumien, kuten käyttäjän toimien tai taustajärjestelmässä tapahtuneiden tietomuutosten, jälkeen.
Tietojen hakemista koskevat valinnat
Mitä fetch-asetuksia käyttäisit yleensä seuraavissa tilanteissa Next.js:n Server Component -komponentissa?
Edistyneen tietojen haun yhteenveto
Olet nyt tutustunut edistyneisiin tietojen hakemisen tapoihin Next.js:n Server Components -komponenteissa!
- Voit käyttää
async/await-syntaksia suoraan Server Components -komponenteissa tietojen hakemiseen. - Next.js tallentaa
fetch-pyynnöt oletusarvoisesti välimuistiin (force-cache). - Voit ohittaa välimuistin käyttämällä asetusta
cache: 'no-store', kun tarvitset reaaliaikaisia tietoja. - Toteuta aikaperusteinen uudelleenvalidointi käyttämällä asetusta
next: { revalidate: seconds }. - Ymmärrä tarvittaessa tehtävän uudelleenvalidoinnin käsitteet sekä funktioiden
revalidatePathjarevalidateTagkäyttö. - Lisää aina virheenkäsittely, jotta sovelluksesta tulee vikasietoinen.
Näiden strategioiden hallinta auttaa rakentamaan suorituskykyisiä ja dynaamisia Next.js-sovelluksia!
Opi TypeScript tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 12
- Oppitunnit
- 48
Usein kysytyt kysymykset
Onko oppitunti ”Edistyneet tiedonhankinnan mallit” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Next.js 15 -täyden pinon verkkosovellukset-oppimispolun 3 oppituntia, myös oppitunnin “Edistyneet tiedonhankinnan mallit”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Next.js 15 -täyden pinon verkkosovellukset-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Edistyneet tiedonhankinnan mallit”?
Toteuttakaa tehokas tiedonhankinta käyttämällä `async/await`-rakennetta suoraan Server Components -komponenteissa ja tutustukaa uudelleenvalidoinnin strategioihin. Harjoittelet Next.js 15 -täyden pinon verkkosovellukset-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Next.js 15 -täyden pinon verkkosovellukset-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Next.js 15 -täyden pinon verkkosovellukset-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.
Kuinka kauan ”Edistyneet tiedonhankinnan mallit”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Next.js 15 -täyden pinon verkkosovellukset-oppitunnilla?
Kyllä. Jokainen Next.js 15 -täyden pinon verkkosovellukset-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Server Components perusteellisesti
- Client Components ja vuorovaikutteisuus
- Edistyneet tiedonhankinnan mallit
- Välimuisti, uudelleentarkistus ja suoratoisto