React Server Components förklarade
Förstå vad RSC:er är, hur de skiljer sig från klientkomponenter och när de bör användas.
React Server Components förklarade är en gratis lektion i React Academy på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för React Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Academy innehåller totalt 4 lektioner.
Välkommen
De två komponentvärldarna
Server Components som standard
// 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
'use client';
import { useState } from 'react';
export function Counter() {
const [n, setN] = useState(0);
return <button onClick={() => setN(n+1)}>{n}</button>;
}Server Components funktioner
// 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 begränsningar
Kombinera Server och Client Components
// 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)} />;
}Regeln för klientgränsen
Noll JavaScript för Server Components
Server Components kontra SSR
Snabb kontroll
Sammanfattning
Nästa steg
Lär dig React med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 88
- Lektioner
- 324
Vanliga frågor
Är lektionen ”React Server Components förklarade” gratis?
Ja – hela texten till ”React Server Components förklarade” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i React Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i React Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”React Server Components förklarade”?
Förstå vad RSC:er är, hur de skiljer sig från klientkomponenter och när de bör användas. Ni övar på React Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig React Academy?
Du behöver inga förkunskaper. Utbildningen i React Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.
Hur lång tid tar lektionen ”React Server Components förklarade”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här React Academy-lektionen?
Ja. Varje React Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- React Server Components förklarade
- use()-hooken för asynkrona resurser
- React Actions och useActionState
- useOptimistic för omedelbar återkoppling