This page demonstrates the difference between React Server Components (RSC) automatic code-splitting and client-side dynamic imports. Both reduce bundle size, but serve different purposes.
These components run on the server and are automatically code-split by Next.js. Heavy libraries like Lodash and date-fns are never sent to the client.
// ✅ Server Component (no 'use client')
import _ from 'lodash';
import { format } from 'date-fns';
export default function ServerComponent() {
// Heavy processing on server
const data = _.range(100).map(i => ({
id: i,
date: format(new Date(), 'yyyy-MM-dd')
}));
return <div>{/* Rendered HTML */}</div>;
}Total Revenue
$650,397.63
Total Users
13,841
Avg Conversion
4.89%
| Week | Revenue | Users | Conversion | Category |
|---|---|---|---|---|
| Jan 01, 2024 | $6,111.24 | 969 | 7.2% | SMB |
| Jan 08, 2024 | $10,425.24 | 646 | 4.19% | Enterprise |
| Jan 15, 2024 | $18,538.96 | 992 | 4.93% | Startup |
| Jan 22, 2024 | $18,614.36 | 349 | 5.23% | SMB |
| Jan 29, 2024 | $42,446.09 | 557 | 4.71% | SMB |
| Feb 05, 2024 | $20,903.38 | 567 | 6.1% | SMB |
| Feb 12, 2024 | $8,259.15 | 504 | 6.44% | Startup |
| Feb 19, 2024 | $37,139.8 | 549 | 2.44% | Startup |
| Feb 26, 2024 | $29,857.36 | 530 | 4.67% | Startup |
| Mar 04, 2024 | $43,216.6 | 587 | 5.2% | Enterprise |
| Mar 11, 2024 | $41,690.03 | 123 | 2.21% | SMB |
| Mar 18, 2024 | $9,203.95 | 556 | 6.27% | Enterprise |
| Mar 25, 2024 | $48,521.59 | 184 | 4.93% | Startup |
| Apr 01, 2024 | $10,379.18 | 168 | 2.12% | Startup |
| Apr 08, 2024 | $30,400.22 | 603 | 4.51% | SMB |
| Apr 15, 2024 | $5,423.67 | 880 | 7.73% | Startup |
| Apr 22, 2024 | $41,367.57 | 868 | 5.52% | Startup |
| Apr 29, 2024 | $47,366.48 | 278 | 3.35% | Enterprise |
| May 06, 2024 | $9,915.15 | 533 | 4.96% | Enterprise |
| May 13, 2024 | $34,116.31 | 320 | 3.69% | Startup |
| May 20, 2024 | $42,325.69 | 729 | 4.18% | SMB |
| May 27, 2024 | $11,885.13 | 426 | 6.52% | Enterprise |
| Jun 03, 2024 | $25,677.61 | 220 | 2.25% | Enterprise |
| Jun 10, 2024 | $25,002.44 | 995 | 5.42% | Startup |
| Jun 17, 2024 | $31,610.43 | 708 | 7.36% | Enterprise |
Total Revenue
$124,766
Avg Growth
17.8%
Best Month
Jun
Revenue: $16,355
Customers: 1,775
Enterprise: $9,813
SMB: $4,907
Revenue: $22,032
Customers: 1,825
Enterprise: $13,219
SMB: $6,610
Revenue: $11,135
Customers: 1,173
Enterprise: $6,681
SMB: $3,341
Revenue: $19,984
Customers: 1,190
Enterprise: $11,990
SMB: $5,995
Revenue: $14,621
Customers: 1,756
Enterprise: $8,773
SMB: $4,386
Revenue: $40,639
Customers: 1,814
Enterprise: $24,383
SMB: $12,192
Server Components can evaluate conditionals at render time on the server. This means different code paths and heavy computations only run when the condition is met.
// ✅ Conditional Server Component
export default function ConditionalRSC({ userRole }) {
if (userRole === 'admin') {
// Heavy computation only runs for admins
const adminData = performHeavyProcessing();
return <AdminDashboard data={adminData} />;
}
return <UserDashboard />;
}Role: admin | Data points: 100 | Total value: $579,350
Average Value: $5793.5
Max Value: $9999
Min Value: $1036
Data Types: admin_data
• System configuration access
• User management tools
• Advanced analytics and reporting
• Server performance metrics
Server computed: Complex aggregation completed on server
| ID | Type | Value | Permissions |
|---|---|---|---|
| 0 | admin_data | $1546 | read, write, delete |
| 1 | admin_data | $3850 | read, write, delete |
| 2 | admin_data | $5094 | read, write, delete |
| 3 | admin_data | $7504 | read, write, delete |
| 4 | admin_data | $9479 | read, write, delete |
Showing 5 of 100 items
These client components are loaded on-demand using next/dynamic. Perfect for interactive features that aren't needed immediately.
// ✅ Dynamic Import (manual code-splitting)
const DynamicComponent = dynamic(
() => import('./HeavyComponent'),
{
loading: () => <LoadingSpinner />,
ssr: false // Optional: disable SSR
}
);Small, lightweight components that should remain in the main bundle. These are typically core UI elements used throughout your application.
// ❌ Don't dynamically import lightweight components
'use client';
import React from 'react';
export default function SimpleButton() {
// Lightweight component with minimal dependencies
return <button>Click me</button>;
}This is a lightweight component that should be in the main bundle
These components should stay in the main bundle for optimal performance
Select a view above to see dynamic loading in action
| Component Type | Bundle Impact | Loading Behavior | Conditionals | Best For |
|---|---|---|---|---|
| Server Component | Zero client JS | Rendered HTML, no loading | ✓ Server-side evaluation | Static content, data display |
| Dynamic Import | Separate chunks | On-demand with loading state | ✓ Runtime conditional loading | Interactive features, modals |
| Regular Client | Main bundle | Immediate availability | ⚠️ All code loaded | Core UI, critical features |
Use when conditions are known at render time (user role, feature flags, etc.)
Use when conditions change based on user interaction or runtime state
Use for lightweight components that are likely to be used regardless of conditions