Next.js Server Components — The Default Rendering Model
Server Component, browser కి పంపే ముందే, Next.js server meedha render అయ్యే component. దీని output plain HTML — దానికి సంబంధించిన JavaScript code browser కి పంపబడదు. Idi bundle size ni chala తగ్గిస్తుంది, page load speed pెంచుతుంది.
App Router లో ప్రత్యేకంగా ఏమీ చేయనవసరం లేదు — ఏ component అయినా, top లో "use client" లేకపోతే, adi automatic ga Server Component.
Server Components ki oka pెద్ద advantage — async/await direct ga component లోపలే వాడొచ్చు, separate useEffect avasaram ledు:
async function getCourses() {
const res = await fetch("https://api.example.com/courses");
return res.json();
}
export default async function CoursesPage() {
const courses = await getCourses();
return (
<ul>
{courses.map((c: { id: number; name: string }) => (
<li key={c.id}>{c.name}</li>
))}
</ul>
);
}Component itself async function — direct ga await getCourses() చేసి, fetch ayina data ni render చేస్తుంది. Loading spinner, error state manage చేయాల్సిన client-side complexity ఇక్కడ అవసరం లేదు.
Server Components లో secret API keys, database credentials safe గా వాడొచ్చు — ఎందుకంటే ఈ code browser కి ఎప్పుడూ పంపబడదు:
export default async function Dashboard() {
const apiKey = process.env.SECRET_API_KEY; // Safe — never sent to browser
const data = await fetch("https://api.example.com/stats", {
headers: { Authorization: `Bearer ${apiKey}` },
}).then((r) => r.json());
return <p>Total Users: {data.userCount}</p>;
}| ✅ Advantages | ❌ Limitations |
|---|---|
| Zero extra JavaScript sent to browser | No useState, useEffect, or hooks |
| Direct database/API access, secrets stay safe | No onClick, onChange event handlers |
| Faster initial page load & better SEO | No browser APIs (localStorage, window) |
| Smaller client bundle size | Cannot use Context providers directly (needs boundary) |
Server Component లో useState లేదా onClick వాడితే, 'You're importing a component that needs useState...' error వస్తుంది. Interactivity కావాలంటే, ఆ specific piece ni వేరే file లో 'use client' component గా extract చేయాలి — తర్వాతి chapter లో చూద్దాం.
Write a Server Component that fetches a list of products from an API and renders their names in an unordered list.
async function getProducts() {
const res = await fetch("https://api.example.com/products");
return res.json();
}
export default async function ProductsPage() {
const products = await getProducts();
return (
<ul>
{products.map((p: { id: number; name: string }) => (
<li key={p.id}>{p.name}</li>
))}
</ul>
);
}Q Server Component లో useEffect వాడొచ్చా?
Ledు. useEffect browser-only hook — Server Component లో పనిచేయదు. Data fetching కోసం direct ga async/await వాడాలి, useEffect అవసరమే లేదు.
Q Server Component నుండి Client Component కి props pass చేయవచ్చా?
Avunu, kani props JSON-serializable గా ఉండాలి — functions, class instances pass చేయలేరు (children prop మాత్రం exception).
Q Anni components Server Components గా ఉంచవచ్చా?
Interactivity (buttons, forms, state) అవసరం లేని components కి avunu, ఇదే best practice. Interactivity కావాల్సిన places మాత్రమే Client Components గా చేయాలి — Chapter 12 లో ఈ decision ఎలా తీసుకోవాలో చూద్దాం.