Palvelin- ja client-komponentit Next.js:ssä
Päättäkää, milloin 'use client' lisätään ja miten palvelin- ja client-puut yhdistetään.
Palvelin- ja client-komponentit Next.js:ssä on ilmainen React 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 React Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Academy-kurssilla on yhteensä 4 oppituntia.
Oletus: palvelinkomponentit
App Routerissa kaikki komponentit ovat oletusarvoisesti palvelinkomponentteja. Ne renderöidään palvelimella, eivätkä ne sisällä lainkaan asiakaspuolen JavaScriptiä. Ne voivat käyttää suoraan tietokantoja, ympäristömuuttujia ja tiedostojärjestelmää.
Asiakaskomponenttien käyttöönotto
Lisätkää tiedoston alkuun 'use client', jotta siitä tulee asiakaskomponentti. Myös kaikki sen tuonnit muuttuvat asiakaspuolen tuonneiksi — tiedosto luo asiakaspuolen rajan.
'use client';
import { useState } from 'react';
export function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}Mitä palvelinkomponentit voivat tehdä
Palvelinkomponentit voivat odottaa tietojen noutamista suoraan await-lausekkeella, lukea ympäristömuuttujia, käyttää tiedostojärjestelmää ja tuoda suuria vain palvelimella käytettäviä paketteja kasvattamatta asiakaspuolen bundlea.
// app/products/page.tsx — Server Component
export default async function ProductsPage() {
const products = await db.query('SELECT * FROM products');
return (
<ul>
{products.map(p => <li key={p.id}>{p.name}</li>)}
</ul>
);
}Mitä palvelinkomponentit eivät voi tehdä
Palvelinkomponentit eivät voi käyttää hookeja (useState, useEffect), selaimen rajapintoja tai tapahtumankäsittelijöitä. Näihin tarvitaan 'use client'.
Palvelin- ja asiakaskomponenttien yhdistäminen
Välittäkää palvelinkomponentin tuottama sisältö asiakaskomponentille props/children-arvoina. Perusmalli on tämä: pitäkää tietojen noutaminen palvelinkomponenteissa ja vuorovaikutteisuus asiakaskomponenteissa.
// Server Component (no 'use client')
async function ProductPage({ id }) {
const product = await getProduct(id); // direct DB call
return <AddToCartButton product={product} />; // client component
}
// Client Component
'use client';
function AddToCartButton({ product }) {
const [added, setAdded] = useState(false);
return <button onClick={() => { addToCart(product); setAdded(true); }}>{added ? 'Added!' : 'Add to cart'}</button>;
}Lasten välittäminen palvelimelta asiakkaalle
Palvelinkomponentti voi välittää JSX:n children-arvona asiakaskomponentille. Lapset renderöidään edelleen palvelimella, ja asiakaspuolen kääre lisää vuorovaikutteisuuden.
// Client wrapper — Modal with open/close state
'use client';
function Modal({ children }) {
const [open, setOpen] = useState(false);
return (
<>
<button onClick={() => setOpen(true)}>Open</button>
{open && <dialog>{children}</dialog>}
</>
);
}
// Server Component — passes server-fetched content into client modal
async function Page() {
const content = await fetchContent();
return <Modal><ServerRenderedContent data={content} /></Modal>;
}Asiakaspuolen raja
'use client'-määrityksen lisääminen muuttaa tiedoston ja kaikki sen lapsituonnit asiakaspuolen koodiksi. Jos haluatte säilyttää lapsen palvelinkomponenttina, välittäkää se prop-arvona tai slotina sen sijaan, että toisitte sen suoraan.
Tietojen noutamisen mallit
Noutakaa tiedot palvelinkomponenteissa ja välittäkää ne alaspäin. Välttäkää tietojen noutamista asiakaskomponenteissa aina kun mahdollista — se kasvattaa asiakaspuolen bundlea ja monistaa palvelinlogiikkaa.
// Good: fetch in server, pass to client
async function Page() {
const user = await getUser();
return <UserProfile user={user} />; // client component
}
// Avoid: fetch in client
'use client';
function UserProfile() {
const { data } = useSWR('/api/user', fetcher); // network request from browser
}Vain palvelimella käytettävät apufunktiot
server-only-paketti aiheuttaa koontivirheen, jos vain palvelimella käytettävä moduuli tuodaan vahingossa asiakaskomponenttiin.
// lib/db.ts
import 'server-only'; // throws at build time if imported in 'use client' file
export const db = createDbClient(process.env.DB_URL);Tilan jakaminen palvelimen ja asiakkaan välillä
Palvelinkomponentit eivät voi säilyttää tilaa. Jos haluatte jakaa palvelimella noudetut tiedot vuorovaikutteisten asiakaskomponenttien kanssa, välittäkää tiedot props-arvoina ensimmäisen renderöinnin yhteydessä ja hallitkaa päivityksiä sen jälkeen asiakkaalla.
Milloin use client lisätään
Lisätkää 'use client', kun tarvitsette hookeja (useState, useEffect), selaimen tapahtumia (onClick), selaimen rajapintoja (localStorage, window) tai kolmannen osapuolen asiakaspuolen kirjastoja.
Pikatarkistus
Mitä tiedoston alkuun on lisättävä, jotta Next.js App Routerissa voi käyttää useStatea tai onClickiä?
Kertaus
Kaikki App Routerin komponentit ovat oletusarvoisesti palvelinkomponentteja — asiakaspuolen JS-bundlea ei synny, ja tiedot ovat suoraan käytettävissä. Lisätkää 'use client' vain sinne, missä tarvitaan vuorovaikutteisuutta. Yhdistäkää komponentit välittämällä palvelimella noudetut tiedot props-arvoina tai lapsina asiakaspuolen kääreille ja pitämällä asiakaspuolen raja mahdollisimman lähellä lehtitasoa.
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
Usein kysytyt kysymykset
Onko oppitunti ”Palvelin- ja client-komponentit Next.js:ssä” ilmainen?
Kyllä – oppitunnin ”Palvelin- ja client-komponentit Next.js:ssä” 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 ”Palvelin- ja client-komponentit Next.js:ssä”?
Päättäkää, milloin 'use client' lisätään ja miten palvelin- ja client-puut yhdistetään. 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 2/4.
Kuinka kauan ”Palvelin- ja client-komponentit Next.js:ssä”-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
- App Routerin tiedostokäytännöt
- Palvelin- ja client-komponentit Next.js:ssä
- Dynaamiset reitit ja reittiryhmät
- Metadata API ja SEO App Routerissa