Tipos de handlers del App Router y componentes de servidor frente a cliente
Comprenda los valores predeterminados del App Router (componentes de servidor), cuándo optar por componentes de cliente y cómo tipificar los handlers de ruta.
Tipos de handlers del App Router y componentes de servidor frente a cliente es una lección gratuita de TypeScript Academy en CoddyKit. Esta es la lección 1 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de TypeScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de TypeScript Academy incluye 3 lecciones en total.
Introducción
Objetivo: Utilizar App Router con TypeScript con confianza. Verá los componentes de servidor (predeterminados), activará los componentes de cliente cuando sea necesario y tipará los controladores de ruta para los endpoints de API.
- Capacidades del servidor frente a las del cliente
- Pasar props tipadas entre ambos
- NextRequest/NextResponse tipados
Componente de servidor
Los archivos bajo app/ son componentes de servidor de forma predeterminada. Puede ejecutar código exclusivo del servidor y obtener datos antes del renderizado.
// app/page.tsx (server component by default)
export default async function Page() {
// Server code: read env, fetch data, call DB (conceptually)
const data: { message: string } = { message: "Hello from server component" }
return (
<main style={{ display: "grid", gap: 8 }}>
<h1>Home</h1>
<p>{data.message}</p>
</main>
)
}Componente de cliente
Añada la directiva "use client" al principio para habilitar hooks y controladores de eventos. Los componentes de cliente se ejecutan en el navegador.
"use client"
import { useState } from "react"
// app/components/Counter.tsx (client component)
export default function Counter() {
const [n, setN] = useState(0)
return (
<div style={{ display: "flex", gap: 8, alignItems: "center" }}>
<button onClick={() => setN(n - 1)}>-</button>
<span>{n}</span>
<button onClick={() => setN(n + 1)}>+</button>
</div>
)
}Props del servidor al cliente
Calcule los datos en el servidor y páselos como props tipadas a los componentes de cliente. Mantenga la lógica exclusiva del servidor fuera del cliente.
// app/page.tsx (server) + client import
import Counter from "./components/Counter"
export default async function Page() {
const initial = 5 // fetched or computed on the server
return (
<main style={{ display: "grid", gap: 12 }}>
<h2>Dashboard</h2>
<CounterWithStart start={initial} />
</main>
)
}
// app/components/CounterWithStart.tsx
"use client"
import { useState } from "react"
export default function CounterWithStart({ start }: { start: number }) {
const [n, setN] = useState(start)
return (
<div style={{ display: "flex", gap: 8, alignItems: "center" }}>
<button onClick={() => setN(n - 1)}>-</button>
<span>{n}</span>
<button onClick={() => setN(n + 1)}>+</button>
</div>
)
}Controladores de ruta
Utilice NextRequest/NextResponse para controladores tipados en app/api/*/route.ts. Devuelva JSON con códigos de estado.
// app/api/hello/route.ts (App Router API)
import { NextRequest, NextResponse } from "next/server"
export async function GET(req: NextRequest) {
const name = req.nextUrl.searchParams.get("name") ?? "world"
const body: { message: string } = { message: `Hello, ${name}!` }
return NextResponse.json(body, { status: 200 })
}
export async function POST(req: NextRequest) {
const payload = (await req.json()) as { name?: string }
const body = { created: true, name: payload.name ?? "anon" }
return NextResponse.json(body, { status: 201 })
}Consejos
Consejos:
- Utilice componentes de servidor de forma predeterminada; opte por el cliente solo cuando necesite interactividad.
- Mantenga las props pequeñas y serializables entre el servidor y el cliente.
- Utilice de forma coherente estructuras tipadas para
NextResponse.json.
Comprobación del cliente en App Router
Comprobación rápida: ¿Cómo habilita los hooks en un archivo de componente bajo App Router?
Repaso
Repaso: App Router utiliza componentes de servidor de forma predeterminada; añada "use client" para la interactividad, pase props tipadas a través del límite y tipifique los controladores de ruta con NextRequest/NextResponse.
Preguntas frecuentes
¿La lección «Tipos de handlers del App Router y componentes de servidor frente a cliente» es gratis?
Sí — el texto completo de «Tipos de handlers del App Router y componentes de servidor frente a cliente» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de TypeScript Academy, actualiza a CoddyKit PRO. El curso de TypeScript Academy incluye 3 lecciones en total.
¿Qué aprenderé en «Tipos de handlers del App Router y componentes de servidor frente a cliente»?
Comprenda los valores predeterminados del App Router (componentes de servidor), cuándo optar por componentes de cliente y cómo tipificar los handlers de ruta. Practicas TypeScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar TypeScript Academy?
No se requiere experiencia previa. TypeScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 3.
¿Cuánto tiempo toma la lección «Tipos de handlers del App Router y componentes de servidor frente a cliente»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de TypeScript Academy?
Sí. Cada lección de TypeScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Tipos de handlers del App Router y componentes de servidor frente a cliente
- Obtención de datos y tipado de acciones
- Tipado del entorno y configuración