Mastering Server and Client Components in Next.js

1. Introduction or Motivation

You want the blog page to be as fast as possible, interactive, and SEO-friendly. How do you achieve this? One crucial aspect is understanding how Next.js handles rendering components: on the server or the client. This decision profoundly impacts performance, user experience, and even how you write your code. Today, we'll unravel the mysteries of server and client components and equip you with the knowledge to make informed choices for your projects.

1.1 What are Server Components?

Server Components are React components that run on the server. They have direct access to data sources, like databases or APIs, without needing client-side fetching. This leads to faster initial page loads and improved SEO because the server can render the content before sending it to the client.

Example: Let's say our blog page needs to fetch a list of recent posts. A Server Component can do this directly:

TypeScript

// components/RecentPosts.tsx (Server Component)
import { getRecentPosts } from '@/lib/api'; // Hypothetical function to fetch posts

export default async function RecentPosts() {
  const posts = await getRecentPosts();

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

This component fetches the data on the server, renders the HTML, and sends the complete HTML to the client. The client just displays the content—no additional data fetching is required.

When to use: Use Server Components for data fetching, accessing backend resources, and rendering content that doesn't require client-side interactivity. Use also when bundling required libraries to client would unnecessarily increase the bundles size. 

When not to use: Avoid Server Components for interactive elements like buttons, form inputs, or anything that requires immediate user feedback.

1.2 What are Client Components?

Client Components, on the other hand, run in the user's browser. They're perfect for handling user interactions, managing state, and updating the UI dynamically.

Example: Let's add a "Like" button to each blog post. This requires client-side interactivity:

'use client'; // This directive makes it a Client Component, must be the first command on page
// components/LikeButton.tsx (Client Component)

import { useState } from 'react';

export default function LikeButton({ postId }: { postId: string }) {
  const [liked, setLiked] = useState(false);

  const handleLike = async () => {
    // Logic to send like to the server
    setLiked(true);
  };

  return (
    <button onClick={handleLike} disabled={liked}>
      {liked ? 'Liked!' : 'Like'}
    </button>
  );
}

The 'use client' directive is crucial. It tells Next.js that this component should be rendered on the client.

When to use: Use Client Components for interactive elements, state management, and UI updates.

When not to use: Avoid Client Components for initial data fetching or rendering large amounts of static content, as this can lead to slower initial page loads.

1.3 Combining Server and Client Components

The real power comes from combining these two types of components. Our blog page can use a Server Component to fetch the initial blog post data and a Client Component for the "Like" button.

// pages/blog/[slug].tsx
import RecentPosts from '@/components/RecentPosts';
import LikeButton from '@/components/LikeButton';

export default async function BlogPostPage({ params }: { params: { slug: string } }) {
    //... fetch blog post data
    return (
        <div>
            {/*... display blog post content */}
            <LikeButton postId={/*...post id...*/} />
            <RecentPosts />
        </div>
    )
}

There is a limit on using client components in server components, that you can only pass props of simple types such as string, or number (serialisable). You cannot pass functions or class instances. 

⚠️☢️⚠️ You cannot import server component into a client component

This approach gives us the best of both worlds: fast initial load from the Server Component and rich interactivity from the Client Component.

1.4 Conclusion

Today, we explored the crucial distinction between Server and Client Components in Next.js 13. Server Components excel at data fetching and initial rendering, improving SEO and initial load times. Client Components are essential for interactive elements and dynamic UI updates. By strategically combining them, you can build performant and engaging web applications. Remember to choose the right component type for the job: Server for data, Client for interactivity!