Next.js 15 -täyden pinon verkkosovellukset · Oppitunti

Server Components perusteellisesti

Tutustukaa siihen, miten Server Components -komponentit renderöidään palvelimella, mikä parantaa suorituskykyä ja vähentää asiakaspuolen JavaScriptin määrää.

Oppitunti 1/411 vaihetta

Server Components perusteellisesti on ilmainen Next.js 15 -täyden pinon verkkosovellukset-oppitunti CoddyKitissä. Tämä on oppitunti 1/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.

Tervetuloa Server Components -komponenttien pariin

Next.js 15:ssä Server Components -komponentit muuttavat kaiken! Niiden avulla voit hahmontaa React-sovelluksesi osia suoraan palvelimella jo ennen niiden lähettämistä käyttäjän selaimeen.

Tämä lähestymistapa parantaa merkittävästi suorituskykyä, turvallisuutta ja kehittäjäkokemusta erityisesti App Routerin kanssa.

Miten Server Components toimii

Kuvittele rakentavasi verkkosivua. Server Components -komponenteissa palvelin hoitaa suurimman osan työstä. Se hakee tiedot, hahmontaa React-komponentit HTML:ksi ja lähettää valmiin HTML:n (sekä vain vähän JavaScriptiä) selaimeen.

Miksi käyttää Server Components -komponentteja?

Server Components -komponenteilla on useita keskeisiä etuja:

Pienemmät JavaScript-paketit: Kun selaimeen lähetetään vähemmän koodia, lataukset nopeutuvat.
Nopeampi ensimmäinen sivulataus: Sisältö on valmis palvelimella, joten käyttäjät näkevät sen nopeammin.
Parempi SEO: Hakukoneet näkevät täysin hahmonnetun HTML:n heti.
Suora pääsy taustajärjestelmään: Tietokantoja ja ohjelmointirajapintoja voi käyttää turvallisesti paljastamatta arkaluonteisia avaimia asiakkaalle.

Ensimmäinen Server Components -komponenttisi

Oletusarvoisesti kaikki App Routerin sisällä olevat komponentit ovat Server Components -komponentteja! Et tarvitse erityistä direktiiviä, kuten 'use client'.

Tässä on yksinkertainen esimerkki. Tämä komponentti suoritetaan palvelimella ja palauttaa HTML:ää:

/* app/page.jsx */

export default function HomePage() {
  return (
    <div>
      <h1>Hello CoddyKit!</h1>
      <p>This text was rendered on the server.</p>
    </div>
  );
}

Tietojen hakeminen palvelimella

Yksi tehokkaimmista ominaisuuksista on tietojen hakeminen suoraan Server Components -komponenttien sisältä async/await-rakenteen avulla. Perushaussa ei tarvita asiakaspuolen hookeja, kuten useEffect-hookia, tai tiedonhakukirjastoja!

Kokeile suorittaa tämä esimerkki:

/* app/profile/page.jsx */

async function getUserData() {
  // In a real app, this might fetch from a database or internal API
  const res = await fetch('https://jsonplaceholder.typicode.com/users/1');
  if (!res.ok) {
    throw new Error('Failed to fetch user data');
  }
  return res.json();
}

export default async function ProfilePage() {
  const user = await getUserData();

  return (
    <div>
      <h1>User Profile</h1>
      <p><b>Name:</b> {user.name}</p>
      <p><b>Email:</b> {user.email}</p>
    </div>
  );
}

Server Components parantaa turvallisuutta

Koska tietojen haku ja hahmontaminen tapahtuvat palvelimella, arkaluonteiset tiedot, kuten API-avaimet, tietokantatunnukset ja salaiset ympäristömuuttujat, pysyvät palvelimella.

Tämä parantaa sovelluksesi turvallisuutta merkittävästi, koska nämä salaisuudet eivät koskaan paljastu asiakkaan selaimelle.

Mihin Server Components ei pysty

Vaikka Server Components -komponentit ovat tehokkaita, niillä on rajoituksia. Ne eivät voi:

Käyttää React-hookeja, kuten useState, useEffect tai useRef.
Käsitellä käyttäjän vuorovaikutusta suoraan (esimerkiksi painikkeen napsautuksia, jotka päivittävät tilaa).
Käyttää selainkohtaisia ohjelmointirajapintoja (esimerkiksi window ja localStorage).

Client Components -komponentit huolehtivat näistä vuorovaikutteisista ominaisuuksista. Tutustumme niihin seuraavaksi!

Milloin Server Components -komponentteja kannattaa käyttää

Server Components -komponentit sopivat erinomaisesti seuraaviin käyttötarkoituksiin:

Staattisen tai pääosin staattisen sisällön näyttäminen.
Taustajärjestelmän tietojen hakeminen ja hahmontaminen.
Sivut, joiden on oltava hakukoneystävällisiä.
Komponentit, jotka eivät tarvitse asiakaspuolen vuorovaikutteisuutta tai tilaa.

Ajattele niitä Next.js-sovelluksesi ”tieto- ja näyttötyöntekijöinä”.

Server Components ja Client Components

Keskeinen ero tiivistettynä:

Server Components: Hahmonnetaan palvelimella, hakevat tiedot, eivät oletusarvoisesti lähetä JavaScriptiä asiakkaalle ja sopivat erinomaisesti suorituskyvyn ja hakukoneoptimoinnin kannalta.
Client Components: Hahmonnetaan selaimessa, käsittelevät vuorovaikutusta, käyttävät React-hookeja ja edellyttävät 'use client'-direktiiviä.

Yhdessä ne mahdollistavat full-stack-sovellusten rakentamisen!

Pikatarkistus

Testaa, miten hyvin ymmärrät Next.jsin Server Components -komponentteja.

Vastaa interaktiivisessa oppitunnissa

Kertaus: Server Components

Olet oppinut, että Next.jsin Server Components -komponentit hahmonnetaan palvelimella ja asiakkaalle lähetetään tehokasta HTML:ää. Tämä nopeuttaa latausta, parantaa hakukoneoptimointia ja lisää turvallisuutta pitämällä taustajärjestelmän logiikan palvelimella.

Vaikka ne eivät tue asiakaspuolen vuorovaikutteisuutta, ne ovat erittäin suorituskykyisten Next.js-sovellusten rakentamisen perusta.

Seuraavaksi tutustumme Client Components -komponentteihin ja siihen, miten ne tuovat sovellukseesi vuorovaikutteisuutta!

Aloita maksutta

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

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Server Components perusteellisesti” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Next.js 15 -täyden pinon verkkosovellukset-oppimispolun 3 oppituntia, myös oppitunnin “Server Components perusteellisesti”. 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 ”Server Components perusteellisesti”?

Tutustukaa siihen, miten Server Components -komponentit renderöidään palvelimella, mikä parantaa suorituskykyä ja vähentää asiakaspuolen JavaScriptin määrää. 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 1/4.

Kuinka kauan ”Server Components perusteellisesti”-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

← Takaisin: Next.js 15 -täyden pinon verkkosovellukset