Server component restrictions in NextJS - Mini Project: Build & Apply

Understanding Server Component Restrictions in Next.js

📖 Scenario: You are building a simple Next.js app that uses server components to fetch and display data. You need to understand what you can and cannot do inside a server component.

🎯 Goal: Create a server component that fetches data from a server-side function and displays it. Learn the restrictions of server components by following the steps.

📋 What You'll Learn

Create a server component file named ServerData.js

Define a server-side data fetching function called fetchData

Use the fetchData function inside the server component to get data

Do not use client-only hooks or browser APIs inside the server component

💡 Why This Matters

🌍 Real World

Server components help build fast, SEO-friendly web pages by running code on the server and sending ready HTML to the browser.

💼 Career

Understanding server component restrictions is essential for Next.js developers to write efficient and correct React code that leverages server-side rendering.

1

Create a server-side data fetching function

Create an async function called fetchData that returns an object with message set to 'Hello from server'.

NextJS

# Your code here

Need a hint?

This function simulates fetching data on the server.

2

Create a server component that imports fetchData

Create a default exported async function component named ServerData that imports fetchData and calls it inside the component.

NextJS

export async function fetchData() {
    return { message: 'Hello from server' };
}

// Your code here

Need a hint?

Server components can be async and await server-side functions.

3

Add a client-side hook usage restriction comment

Inside the ServerData component, add a comment above the return statement that says // Cannot use client hooks like useState here.

NextJS

export async function fetchData() {
    return { message: 'Hello from server' };
}

export default async function ServerData() {
    const data = await fetchData();
    
    // Your code here
    return (
        
            Server Component
            {data.message}
        
    );
}

Need a hint?

Server components cannot use React hooks that require the browser.

4

Add a 'use client' directive in a comment to explain restriction

Add a comment at the top of the file that says // This is a server component, so no 'use client' directive allowed.

NextJS

// Your code here

export async function fetchData() {
    return { message: 'Hello from server' };
}

export default async function ServerData() {
    const data = await fetchData();
    
    // Cannot use client hooks like useState here
    return (
        
            Server Component
            {data.message}
        
    );
}

Need a hint?

Server components do not have the 'use client' directive at the top.