1. Server Component Architecture
Implement Server Components effectively in Next.js 13+ by following the nested component pattern. This approach optimizes performance by reducing client-side JavaScript and leveraging server-side rendering where possible. Use client components only when necessary for interactivity.
nextjs-server-components.mdc
// app/posts/[id]/page.tsx
// Server Component (Default)
import { PostContent } from './PostContent';
import { CommentSection } from './CommentSection';
import { fetchPost, fetchComments } from '@/lib/api';
export default async function PostPage({ params }: { params: { id: string } }) {
// Server-side data fetching
const post = await fetchPost(params.id);
const comments = await fetchComments(params.id);
return (
);
}
// components/CommentSection.tsx
'use client'; // Mark as Client Component for interactivity
import { useState } from 'react';
import type { Comment } from '@/types';
interface CommentSectionProps {
initialComments: Comment[];
postId: string;
}
export function CommentSection({ initialComments, postId }: CommentSectionProps) {
const [comments, setComments] = useState(initialComments);
// Client-side interactivity
const handleAddComment = async (text: string) => {
// Implementation
};
return (
{/* Interactive comment form */}
);
}Why This Rule Matters
- Optimizes initial page load by reducing client-side JavaScript
- Improves SEO with better server-side rendering
- Maintains interactivity where needed with client components
- Follows Next.js 13+ best practices for component architecture
- Better caching and streaming capabilities
Using with Cursor
Cursor's AI capabilities can help you:
- Automatically identify components that should be server vs. client
- Generate proper data fetching patterns for server components
- Suggest optimizations for component boundaries
- Implement proper TypeScript types for your components