Why server components are the default in NextJS - See It in Action

Why Server Components Are the Default in Next.js

📖 Scenario: You are building a simple Next.js app that shows a greeting message and the current date and time. You want to understand why Next.js uses server components by default to improve performance and user experience.

🎯 Goal: Create a Next.js app with a server component that renders a greeting and the current date/time on the server, then add a client component that updates the time every second. This will show how server components handle static content by default and client components handle dynamic updates.

📋 What You'll Learn

Create a server component named Greeting that displays a greeting message and the current date/time.

Create a client component named Clock that updates the time every second.

Use the use client directive in the client component.

Render the Greeting component in the main page and include the Clock component inside it.

Ensure the server component fetches the date/time only once on the server.

Ensure the client component updates the time dynamically on the browser.

💡 Why This Matters

🌍 Real World

Many modern web apps use server components to improve performance by sending pre-rendered HTML and only loading JavaScript when needed for interactivity.

💼 Career

Understanding server and client components in Next.js is essential for building fast, scalable React apps and is a key skill for frontend and full-stack developers.

1

Create the Server Component

Create a server component named Greeting in a file called Greeting.jsx. It should return a div with a h1 that says "Hello from Server Component!" and a p that shows the current date and time using new Date().toLocaleString().

NextJS

// Your code here

Need a hint?

Remember, server components run on the server and can use JavaScript directly to get the current date/time once.

2

Create the Client Component

Create a client component named Clock in a file called Clock.jsx. Add the directive 'use client' at the top. Use useState and useEffect to update the current time every second. Render the current time inside a p tag.

NextJS

export default function Greeting() {
  const currentTime = new Date().toLocaleString();
  return (
    
      Hello from Server Component!
      Current time: {currentTime}
      {/* Add Clock component here */}
    
  );
}

// Your code here

Need a hint?

Use useState to hold the time and useEffect to update it every second with setInterval.

3

Render the Server Component in the Main Page

In the main page file page.jsx, import the Greeting server component and render it inside the default exported function.

NextJS

// Your code here

Need a hint?

Import the Greeting component and render it inside the main page's default export.

4

Explain Why Server Components Are Default

Add a comment at the top of Greeting.jsx explaining that server components are the default in Next.js because they run on the server, reduce client bundle size, and improve performance by sending ready HTML to the browser.

NextJS

// Your comment here
import Greeting from './Greeting';

export default function Page() {
  return ;
}

export default function Greeting() {
  const currentTime = new Date().toLocaleString();
  return (
    
      Hello from Server Component!
      Current time: {currentTime}
      
    
  );
}

'use client';

import { useState, useEffect } from 'react';

export function Clock() {
  const [time, setTime] = useState(new Date().toLocaleString());

  useEffect(() => {
    const timer = setInterval(() => {
      setTime(new Date().toLocaleString());
    }, 1000);
    return () => clearInterval(timer);
  }, []);

  return Updated time: {time};
}

Need a hint?

Write a clear comment explaining the benefits of server components as the default in Next.js.