Next.js & React Server Components: En praktisk guide

React Server Components (RSC) representerer det største skiftet i Reacts arkitektur siden hooks. Men de fleste utviklere er fortsatt forvirret om når de skal bruke dem, hvordan de faktisk fungerer, og hvilke problemer de løser.

Denne guiden skjærer gjennom abstraksjonen for å gi deg praktisk, handlingsbar forståelse av Server Components i Next.js 14+.

Den mentale modellen: Hvor kode kjører

Før RSC kjørte all React-koden din i nettleseren. Komponenter ble sendt som JavaScript, lastet ned av brukere, parset og utført for å rendre UI.

Med Server Components kan React nå kjøre komponenter på serveren. Outputen—ikke koden—sendes til nettleseren. Dette er et fundamentalt skifte.

Server Components:

• Kjører på serveren ved forespørselstid (eller byggetid for statisk innhold)
• Har direkte tilgang til serverressurser (databaser, filsystem, miljøvariabler)
• Sender aldri koden sin til nettleseren
• Kan ikke bruke nettleser-APIer eller React-state

• Kjører i nettleseren (med server-side rendering for initial HTML)
• Sendes som JavaScript til nettleseren
• Kan bruke alle nettleser-APIer og React interaktivitetsfunksjoner
• Er det du har skrevet hele tiden

I Next.js 13+ er alle komponenter Server Components som standard. For å få en komponent til å kjøre på klienten, legger du til "use client" øverst.

Hvorfor dette betyr noe: Ytelseshistorien

Den gamle måten: Client Component

'use client';
import { marked } from 'marked';  // 65KB bibliotek
import { format } from 'date-fns'; // 75KB bibliotek

export function BlogPost({ slug }: { slug: string }) {
  const [post, setPost] = useState(null);

  useEffect(() => {
    fetch(/api/posts/${slug})
      .then(res => res.json())
      .then(setPost);
  }, [slug]);

  if (!post) return ;

  return (
    

      
{post.title}
      {format(post.date, 'MMMM d, yyyy')}
      

    
  );
}

Hva som sendes til nettleseren:

• Komponentkoden
• marked-biblioteket (65KB)
• date-fns-biblioteket (75KB)
• Lastetilstander og spinnere

Den nye måten: Server Component

import { marked } from 'marked';
import { format } from 'date-fns';
import { db } from '@/lib/db';

export async function BlogPost({ slug }: { slug: string }) {
  const post = await db.posts.findUnique({ where: { slug } });

  return (
    

      
{post.title}
      {format(post.date, 'MMMM d, yyyy')}
      

    
  );
}

Hva som sendes til nettleseren:

• Forhåndsrendret HTML
• Null JavaScript for denne komponenten

Når bruke Server Components

1. Datahenting

Server Components kan hente data direkte uten API-ruter eller useEffect.

2. Bruke tunge avhengigheter

Biblioteker som bare trengs for rendering kan forbli på serveren.

3. Tilgang til sensitive ressurser

Server Components kan få tilgang til ting som aldri bør eksponeres for nettlesere.

4. Statisk innhold

Innhold som ikke endres basert på brukerinteraksjon.

Når bruke Client Components

Legg til "use client" når du trenger:

1. Interaktivitet

Alt som reagerer på brukerinput (onClick, onChange, osv.).

2. Nettleser-APIer

Tilgang til nettleserspesifikke funksjoner (geolocation, localStorage, osv.).

3. React State og Effects

Komponenter som bruker useState, useEffect, useReducer.

4. Event Handlers

Komponenter med onClick, onChange, onSubmit, osv.

Komposisjonsmønsteret: Blande Server og Client

Den virkelige kraften kommer fra å komponere Server og Client Components sammen.

Nøkkelregel: Server Components kan importere og rendre Client Components, men Client Components kan ikke importere Server Components.

Mønster: Server Parent, Client Children

// Server Component
export default async function PostPage({ params }) {
  const post = await db.posts.findUnique({ where: { slug: params.slug } });

  return (
    

      
{post.title}
       {/ Client Component /}
       {/ Client Component /}
    
  );
}

Vanlige feil og hvordan unngå dem

Feil 1: Gjøre alt til Client Components

Hold komponenter som Server Components med mindre de trenger interaktivitet.

Feil 2: Unødvendige Client Component-grenser

Skyv klientgrensen ned til bare der du trenger interaktivitet.

Beslutningsrammeverk

Når du oppretter en ny komponent, spør:

1. Trenger den interaktivitet? → Client Component
2. Bruker den nettleser-APIer? → Client Component
3. Trenger den React-state? → Client Component
4. Ellers → Behold den som Server Component (standard)

Bunnlinjen

React Server Components er ikke bare en ytelsesoptimalisering—de er en ny måte å tenke på hvor kode kjører i applikasjonen din.

Det mentale skiftet: Start med Server Components, legg til "use client" bare der du trenger interaktivitet.

Mestre dette, og du vil bygge raskere applikasjoner med mindre kompleksitet.