What are React Server Components
React Server Components (RSC) — components that render exclusively on the server with zero JS bundle on the client. Direct DB, filesystem, secrets access in the component (no API layer). Next.js App Router (2023+) is the flagship implementation. Async by default: you can await fetch(...) right in the component. Client components are marked with a "use client" directive.
Below: details, example, related terms, FAQ.
Details
- Server Component (default): async, direct DB access, zero client JS
- Client Component: "use client" directive, hydration required
- Streaming: HTML chunks stream as they are ready → faster TTFB
- Server Actions: form handlers on the server without an API route
- Data cache: fetch() automatically deduplicated + cached
Example
async function UserCard({ id }) {
const user = await db.users.findById(id);
return <div>{user.name}</div>;
}Related Terms
Why teams trust us
How it works
Enter page URL
Lighthouse analyzes
Get CWV scores & tips
Why Does Site Speed Matter?
Page load speed directly impacts conversion, SEO rankings, and user satisfaction. Google uses Core Web Vitals as a ranking factor. Every extra second of load time cancost up to 7% in conversions.
Lighthouse Analysis
Google Lighthouse-based analysis: Performance, Accessibility, Best Practices, SEO.
Core Web Vitals
LCP (rendering), FID (interactivity), CLS (visual stability) — key Google metrics.
Resource Analysis
Breakdown by type: HTML, CSS, JavaScript, images, fonts. Size, request count, blocking resources.
Actionable Advice
Specific recommendations with savings estimates: image compression, caching, minification, etc.
Mobile vs Desktop
- Tested on Moto G Power emulation (slow CPU)
- Network: 4G (1.6 Mbps, 150ms RTT)
- Stricter speed scoring
- Google indexes mobile-first
- Priority for SEO optimization
- High CPU performance
- Fast connection without throttling
- Scores typically 20-40 points higher
- Important for B2B and corporate sites
- Use for baseline comparisons
Who uses this
SEO
Core Web Vitals for rankings
Developers
performance optimization
Marketers
speed = conversions
DevOps
performance regression
Common Mistakes
async/defer block rendering. Move to end or add attribute.Cache-Control, the browser reloads CSS/JS on every visit.Best Practices
loading="lazy" for images below the fold.brotli on;Cache-Control: max-age=31536000, immutable. HTML: max-age=0, s-maxage=60.<link rel="preload"> for fonts and CSS. Reduces LCP by 200-500ms.Get more with a free account
Speed check history, competitor comparison and PageSpeed monitoring.
Sign up freeLearn more
Frequently Asked Questions
RSC vs SSR?
SSR — HTML rendered on server, then full JS bundle hydrates. RSC — component code stays on server; client gets only a payload without JS.
Do all React frameworks support it?
Next.js (App Router) — first. Remix, TanStack Start follow. Vanilla React does not support it without a framework.
Can I use hooks?
In Server Components — no (no state). In Client Components — yes (useState, useEffect, etc.).