React Academy · Oppitunti

React Server Components selitettynä

Ymmärtäkää, mitä RSC:t ovat, miten ne eroavat client-komponenteista ja milloin kumpiakin kannattaa käyttää.

Oppitunti 1/413 vaihetta

React Server Components selitettynä on ilmainen React Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/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 React Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Academy-kurssilla on yhteensä 4 oppituntia.

Tervetuloa

Tällä oppitunnilla opitte, mitä React Server Components (RSC:t) ovat, miten ne eroavat Client Components -komponenteista ja milloin kumpaakin tyyppiä kannattaa käyttää.

Kaksi komponenttimaailmaa

React 19 ja Next.js App Router jakavat komponentit kahteen maailmaan: **Server Components** -komponentit renderöidään palvelimella, eikä niissä ole interaktiivisuutta, kun taas **Client Components** -komponentit renderöidään sekä palvelimella että asiakkaalla ja niissä voi olla tila sekä tapahtumankäsittelijöitä.

Server Components oletuksena

Next.js App Routerissa jokainen komponentti on oletusarvoisesti Server Component. Voitte ottaa Client Component -tilan käyttöön lisäämällä tiedoston alkuun 'use client'.

// Server Component (default, no directive needed)
export default async function Page() {
  const data = await fetch('/api/posts').then(r => r.json());
  return <ul>{data.map(p => <li key={p.id}>{p.title}</li>)}</ul>;
}

Client Components

Lisätkää tiedoston alkuun 'use client', jotta siitä tulee Client Component. Client Components voivat käyttää useStatea, useEffectiä, tapahtumankäsittelijöitä ja selaimen API-rajapintoja.

'use client';
import { useState } from 'react';

export function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n+1)}>{n}</button>;
}

Server Components -komponenttien ominaisuudet

Server Components voivat odottaa tietokantakyselyitä, lukea tiedostojärjestelmää, käyttää ympäristön salaisuuksia, tuoda suuria palvelimelle tarkoitettuja paketteja ja renderöityä ilman, että asiakkaalle lähetetään JavaScriptiä.

// Fetch from DB directly in the component!
import { db } from '@/lib/db';

export default async function UserList() {
  const users = await db.select().from(usersTable);
  return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}

Server Components -komponenttien rajoitukset

Server Components EIVÄT VOI käyttää useStatea, useEffectiä, tapahtumankäsittelijöitä (onClick jne.), selaimen API-rajapintoja (window, localStorage) tai Contextia. Näitä varten tarvitaan 'use client'.

Server- ja Client Components -komponenttien yhdistäminen

Yleinen toimintamalli on seuraava: Server Component hakee tiedot ja välittää ne Client Componentille propseina. Palvelin käsittelee tiedot ja asiakas interaktion.

// Server Component
export default async function Page() {
  const user = await getUser();
  return <ProfileEditor user={user} />; // client component
}

// Client Component (separate file)
'use client';
export function ProfileEditor({ user }) {
  const [name, setName] = useState(user.name);
  return <input value={name} onChange={e => setName(e.target.value)} />;
}

Client boundary -sääntö

Kun merkitsette tiedoston 'use client' -määrityksellä, kaikkia sen tuomia komponentteja käsitellään myös Client Components -komponentteina. Palvelimen ja asiakkaan välinen raja kulkee tiedostotasolla.

Server Components ilman JavaScriptiä

Server Components renderöidään palvelimella HTML:ksi. Niiden komponenttikoodia EI KOSKAAN lähetetä selaimeen. Tämä pienentää JavaScript-bundlen kokoa merkittävästi.

Server Components ja SSR

Perinteinen SSR renderöi koko sivun HTML:ksi, mutta lähettää kaiken komponenttikoodin asiakkaalle hydrataatiota varten. Server Components eivät lähetä koodiaan asiakkaalle lainkaan — ainoastaan renderöidyn tuloksen.

Pikatarkistus

Minkä direktiivin lisäätte tiedostoon, jotta siitä tulee React Client Component Next.js App Routerissa?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Server Components suoritetaan palvelimella, ne voivat käyttää tietokantoja ja salaisuuksia, eikä asiakkaalle lähetetä JavaScriptiä. Client Components käyttävät 'use client' -määritystä ja tukevat tilaa, efektejä sekä tapahtumankäsittelijöitä. Yhdistäkää ne niin, että palvelin hakee tiedot ja asiakas käsittelee interaktion.

Seuraavaksi

Seuraava oppitunti: **use()-hook asynkronisille resursseille** — luette promiset ja kontekstin renderöinnin aikana React 19:n use()-hookilla.

Aloita maksutta

Opi React 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: 88
Oppitunnit: 324

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”React Server Components selitettynä” ilmainen?

Kyllä – oppitunnin ”React Server Components selitettynä” 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 React Academy-kurssin, päivitä CoddyKit PROhon. React Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”React Server Components selitettynä”?

Ymmärtäkää, mitä RSC:t ovat, miten ne eroavat client-komponenteista ja milloin kumpiakin kannattaa käyttää. Harjoittelet React Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni React Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin React Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”React Server Components selitettynä”-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ä React Academy-oppitunnilla?

Kyllä. Jokainen React 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

← Takaisin: React Academy