Palvelinkomponentit ja asiakaskomponentit
Ymmärrä React Server Components -komponentit, milloin 'use client' -direktiivi lisätään ja miten palvelimella renderöity HTML yhdistetään interaktiivisiin asiakassaarteihin.
Palvelinkomponentit ja asiakaskomponentit on ilmainen Frontend Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Frontend Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Frontend Academy-kurssilla on yhteensä 4 oppituntia.
Kaksi maailmaa yhdessä sovelluksessa
React Server Components (RSC) mahdollistaa komponenttipuun jakamisen palvelimella renderöitäviin ja asiakkaalla vuorovaikutteisiin osiin. Next.js App Routerissa komponentit ovat oletusarvoisesti Server-komponentteja. Ota Client-komponentit käyttöön komennolla 'use client'.
Mitä Server-komponentit tekevät
Server-komponentit suoritetaan vain palvelimella. Ne voivat hakea tietoja suoraan, käyttää tiedostojärjestelmää, käyttää vain palvelimella olevia salaisuuksia ja renderöidä HTML:ää lähettämättä Reactia asiakkaalle. Ne eivät voi käyttää hookeja, hallita tilaa tai käsitellä tapahtumia.
Mitä Client-komponentit tekevät
Client-komponentit suoritetaan palvelimella SSR:ää (alkuperäistä HTML:ää) varten ja asiakkaalla vuorovaikutteisuutta varten. Ne voivat käyttää useStatea, useEffectiä, tapahtumankäsittelijöitä ja selaimen rajapintoja.
Oletus on Server
Next.js App Routerissa jokainen komponentti on oletusarvoisesti Server-komponentti. Tämä on hyvä asia — suurin osa sovelluksestasi voidaan renderöidä staattisesti.
// app/posts/page.tsx — Server Component by default
export default async function Posts() {
const posts = await fetch('https://api/posts').then(r => r.json());
return (
<ul>
{posts.map(p => <li key={p.id}>{p.title}</li>)}
</ul>
);
}Ota Client käyttöön
Lisää tiedoston alkuun 'use client' merkitäksesi sen komponentit ja niiden importit Client-komponenteiksi.
// app/Counter.tsx
'use client';
import { useState } from 'react';
export default function Counter() {
const [n, setN] = useState(0);
return <button onClick={() => setN(n + 1)}>{n}</button>;
}Server- ja Client-komponenttien yhdistäminen
Server-komponentit voivat renderöidä Client-komponentteja, mutta Client-komponentit eivät voi importata Server-komponentteja. Välitä palvelimella renderöity sisältö Client-kääreille children-propina.
// app/page.tsx — Server
import ClientShell from './ClientShell';
import ServerWidget from './ServerWidget';
export default function Home() {
return (
<ClientShell>
<ServerWidget />
</ClientShell>
);
}Miksi tällä mallilla on merkitystä
Pienemmät JS-paketit — vain Client-komponentit lähetetään selaimeen. Suora tietokanta- ja tiedostokäyttö — vain lukuun tarkoitetuille tiedoille ei tarvita API-kerrosta. Parempi SEO ja nopeampi LCP — HTML saapuu valmiiksi renderöitynä.
Client-rajan säännöt
Kun tiedosto on merkitty komennolla 'use client', kaikista sen sisältämistä komponenteista ja kaikista sen importtaamista lapsikomponenteista tulee Client-komponentteja. 'use client' merkitsee palvelimen ja asiakkaan välistä rajaa.
Server Actions
'use server' -komennolla merkityt funktiot suoritetaan vain palvelimella, mutta niitä voidaan kutsua Client-komponenteista — RPC:n tapaan. Niitä käytetään usein lomakkeiden lähettämiseen ja mutaatioihin.
// app/actions.ts
'use server';
import { revalidatePath } from 'next/cache';
export async function createPost(formData: FormData) {
const title = formData.get('title') as string;
await db.posts.create({ data: { title } });
revalidatePath('/posts');
}
// In a Client form component:
<form action={createPost}>
<input name="title" />
<button>Create</button>
</form>Props-arvojen välittäminen palvelimelta asiakkaalle
Server-komponentilta Client-komponentille välitettävien props-arvojen on oltava JSON-sarjoitettavissa — funktioita, luokkia tai mukautetun muotoisia Date-arvoja ei voi välittää. Muunna arvot ennen välittämistä.
Tyyppien tunnistaminen
Tarkista importit: useState, useEffect ja onClick-käsittelijät edellyttävät, että komponentti on Client-komponentti. Pelkkä tietojen näyttäminen voi tapahtua Server-komponentissa.
Suorituskykyhyödyt
Server-komponentit pienentävät JS-pakettia huomattavasti. Jos sivun sisältö on pääosin staattista ja siinä on muutama vuorovaikutteinen pienoisohjelma, selaimeen lähetetään vain vuorovaikutteisten osien JS — paketti voi olla jopa 90 % pienempi.
Pikatarkistus
Mitä React-hookia EI saa käyttää Next.js Server-komponentissa?
Kertaus: Server vs Client
Server-komponentit: suoritetaan vain palvelimella, async/await toimii, ei hookeja, tilaa tai käsittelijöitä, pienemmät paketit. Client-komponentit: otetaan käyttöön komennolla 'use client', ja ne ovat vuorovaikutteisia useState-, useEffect- ja tapahtumien avulla. Server voi renderöidä Client-komponentin, mutta Client ei voi importata Server-komponenttia (sen voi kuitenkin saada children-propina). Server Actions ('use server') sopii RPC-tyylisiin mutaatioihin.
Opi HTML 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
- 41
- Oppitunnit
- 163
Usein kysytyt kysymykset
Onko oppitunti ”Palvelinkomponentit ja asiakaskomponentit” ilmainen?
Kyllä – oppitunnin ”Palvelinkomponentit ja asiakaskomponentit” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Frontend Academy-kurssin, päivitä CoddyKit PROhon. Frontend Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Palvelinkomponentit ja asiakaskomponentit”?
Ymmärrä React Server Components -komponentit, milloin 'use client' -direktiivi lisätään ja miten palvelimella renderöity HTML yhdistetään interaktiivisiin asiakassaarteihin. Harjoittelet Frontend Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Frontend Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Frontend Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.
Kuinka kauan ”Palvelinkomponentit ja asiakaskomponentit”-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ä Frontend Academy-oppitunnilla?
Kyllä. Jokainen Frontend Academy-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
- Pages Router vai App Router
- Palvelinkomponentit ja asiakaskomponentit
- SSG, SSR ja ISR
- Next.js:n API-reitit ja Middleware