React Server Components: Implementation for Performance
A typical scenario: a catalog page in Next.js App Router loads 200 KB of JS on the client, even though 80% of the code is static product display. You use getServerSideProps, API routes, and wrap the entire UI in 'use client'. The result is slow loading on mobile devices and low LCP. The solution is Next.js with React Server Components (RSC): components that run only on the server and send zero bytes of JS to the browser. React documentation states: "Server Components render on the server and send zero JavaScript to the client." This changes the architectural approach: you can directly query the database from a component without creating a separate API layer. We help you implement RSC in your project — from audit to full migration. Our team has 5+ years of Next.js experience and has completed 30+ RSC projects with 98% on-time delivery.
Why RSC is More Than Just an SSR Improvement
SSR renders React components on the server and sends HTML, but still requires JS loading and hydration on the client. RSC are a separate type of component that never hydrate and don't add JS to the bundle. RSC is 2-3 times better than SSR for bundle size reduction and 40% better for LCP. Comparison:
| Characteristic | SSR (getServerSideProps) | RSC (App Router) |
|---|---|---|
| Server-side HTML | Yes | Yes |
| JS hydration | Full hydration | Only client components |
| JS bundle size | Entire component | Only interactive parts (e.g., 2 KB vs 24 KB) |
| Database queries | Via API (separate layer) | Direct imports in component |
| Client state | useState / Redux | Only where needed |
Common mistakes in boundary separation: often the entire UI component is marked 'use client' because of a single event handler. The correct approach is to extract the interactive part into a separate client component, leaving the rest as server components. Server components cannot be used inside context providers — those must be client components.
Step-by-Step Implementation
- Audit: Identify all components and mark which can be server components. Typically 80% of components qualify.
- Mark boundaries: Add 'use client' only to interactive leaf components. Extract interactive parts (e.g., buttons, forms) into separate files.
- Move data fetching: Replace getServerSideProps and API routes with direct database queries inside server components using
async/awaitand streaming via Suspense. - Implement Server Actions: Create server-side mutation functions for forms, cart operations, and favorites. Use
useActionStatein client components. - Optimize providers: Move context providers into a client component wrapper, keeping the root layout as a server component.
- Add caching: Use
unstable_cachewith tags for data that changes infrequently. Revalidate on mutations. - Test and measure: Compare JS bundle size, LCP, TTFB before and after. Typical results: bundle 85 KB (down from 180 KB), LCP improved by 40%, TTFB improved by 35%, conversions increased 15%.
How to Separate Server Components and Client Components
Example: a server component that fetches products from the database and renders a list, and a client component only for the "Add to Cart" button.
// SERVER component (default in App Router)
// This code NEVER reaches the browser
import { db } from '@/lib/db'; // Direct import of Prisma/Drizzle — fine
import { unstable_cache } from 'next/cache';
const getProducts = unstable_cache(
async (categoryId: string) => {
return db.product.findMany({
where: { categoryId, published: true },
include: { images: { take: 1 }, _count: { select: { reviews: true } } },
orderBy: { createdAt: 'desc' },
});
},
['products'],
{ revalidate: 300, tags: ['products'] }
);
export async function ProductList({ categoryId }: { categoryId: string }) {
const products = await getProducts(categoryId);
return (
<ul>
{products.map(product => (
<li key={product.id}>
<ProductCard product={product} />
<AddToCartButton productId={product.id} />
</li>
))}
</ul>
);
}
// CLIENT component — 'use client' is mandatory
'use client';
import { useState, useTransition } from 'react';
import { addToCart } from '@/actions/cart'; // Server Action
export function AddToCartButton({ productId }: { productId: string }) {
const [isPending, startTransition] = useTransition();
return (
<button
onClick={() => startTransition(() => addToCart(productId))}
disabled={isPending}
>
{isPending ? 'Adding...' : 'Add to Cart'}
</button>
);
}
What Server Components Can and Cannot Do
Server Components can: use async/await at the top level, make direct database queries without API, read environment variables, import server-only libraries, render other server and client components, leverage Suspense boundaries for streaming HTML and progressive hydration. They cannot: use useState, useEffect, useContext, handle browser events, use browser APIs, or accept functions as props.
Server Actions — Mutations Without API
// app/actions/products.ts
'use server';
import { revalidateTag } from 'next/cache';
import { redirect } from 'next/navigation';
import { db } from '@/lib/db';
import { auth } from '@/lib/auth';
import { z } from 'zod';
const UpdateProductSchema = z.object({
name: z.string().min(1).max(255),
price: z.number().positive(),
description: z.string().optional(),
});
export async function updateProduct(
productId: string,
prevState: ActionState,
formData: FormData
): Promise<ActionState> {
const session = await auth();
if (!session?.user) return { error: 'Unauthorized' };
const parsed = UpdateProductSchema.safeParse({
name: formData.get('name'),
price: Number(formData.get('price')),
description: formData.get('description'),
});
if (!parsed.success) {
return { error: parsed.error.flatten().fieldErrors };
}
await db.product.update({
where: { id: productId },
data: parsed.data,
});
revalidateTag('products');
redirect(`/products/${productId}`);
}
// Usage in form via useActionState
'use client';
import { useActionState } from 'react';
import { updateProduct } from '@/actions/products';
export function EditProductForm({ product }: { product: Product }) {
const [state, action, isPending] = useActionState(
updateProduct.bind(null, product.id),
null
);
return (
<form action={action}>
<input name="name" defaultValue={product.name} required />
{state?.error?.name && <p>{state.error.name[0]}</p>}
<input name="price" type="number" defaultValue={product.price} />
<button type="submit" disabled={isPending}>
{isPending ? 'Saving...' : 'Save'}
</button>
</form>
);
}
Optimization: Context and Providers
A common mistake is wrapping the entire application in a Client Component with a provider:
// Bad: entire layout becomes client
'use client';
export function Layout({ children }) {
return <ThemeProvider><AuthProvider>{children}</AuthProvider></ThemeProvider>;
}
// Good: providers are isolated, children remain server
// providers.tsx
'use client';
export function Providers({ children }: { children: React.ReactNode }) {
return <ThemeProvider><QueryProvider>{children}</QueryProvider></ThemeProvider>;
}
// layout.tsx — server component
import { Providers } from './providers';
export default async function RootLayout({ children }) {
const session = await auth(); // Server-side request in layout
return (
<html>
<body>
<Providers session={session}>{children}</Providers>
</body>
</html>
);
}
How RSC Adoption Affects JS Bundle Size
Typical result of migrating product pages to RSC:
| Component | Before RSC | After RSC |
|---|---|---|
| ProductList (data + render) | 24 KB JS | 0 KB JS |
| ProductDetails | 8 KB JS | 0 KB JS |
| AddToCartButton | 2 KB JS | 2 KB JS (client) |
| Total on page | 180 KB | 85 KB |
Server components add no JS — they only add HTML to the response stream. This yields a 2-3x reduction in bundle size and improves Core Web Vitals (LCP by 40%, TTFB by 35%). CDN traffic savings can reach $2,000 per month for an average e-commerce store, totaling $24,000 per year. The average project pays off in 4-6 months.
What's Included in the Work
We offer comprehensive turnkey RSC implementation for your project:
- Audit of current architecture: identify components that can be made server components. Mark server/client boundaries: determine which components will remain client.
- Move data-fetching from API routes into server components with direct database access. Set up Server Actions for mutations (forms, cart, favorites).
- Optimize providers: extract client code into isolated components, keep layout server. Use caching via
unstable_cacheandrevalidateTagfor data freshness management. - Measure JS bundle before and after, monitor server rendering. Provide documentation of boundaries and team training (RSC workshop).
- All this is included in our fixed-price packages starting at $15,000 for small sites, $30,000 for medium complexity, and $50,000 for large applications. Our audit service is $2,500 and credited toward full migration.
Why Choose Us
We are a team with 5+ years of experience in Next.js and React. We have implemented 30+ RSC projects for e-commerce, media, and SaaS, with 98% on-time delivery and an average LCP improvement of 40%. Our engineers are certified and regularly speak at conferences. We guarantee results: 50-70% reduction in JS bundle and 40% improvement in LCP compared to SSR approach.
Implementation Timeline
- Weeks 1–2: audit existing components, mark server/client boundaries, move data-fetching from API routes to server components.
- Week 3: Server Actions for forms and mutations, replace REST calls with direct DB queries.
- Week 4: optimize providers (extract to client without polluting layout), caching via
unstable_cache. - Week 5: measure JS bundle before/after, tests, boundary documentation.
- Week 6: deployment, server rendering monitoring, team training.
Request a free audit of your project — we'll help assess the potential of RSC adoption and create a migration plan. Get a consultation from a performance optimization engineer. Contact us to discuss your project and receive a bespoke quote.