What can run in server components in NextJS - Mini Project: Build & Apply

Understanding What Can Run in Next.js Server Components

📖 Scenario: You are building a Next.js app that uses server components to fetch and display data securely and efficiently.

🎯 Goal: Learn which code and operations can run inside Next.js server components by creating a simple server component that fetches data and renders it.

📋 What You'll Learn

Create a server component file with the exact name ServerData.js

Define an async function called fetchData inside the component

Use fetch to get data from https://jsonplaceholder.typicode.com/posts/1

Render the fetched data inside the component

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

💡 Why This Matters

🌍 Real World

Server components help build fast, secure web apps by fetching data on the server and sending ready HTML to the browser.

💼 Career

Understanding server components is essential for modern Next.js development, improving performance and security in professional web projects.

1

Create the Server Component File

Create a file named ServerData.js and export a default async function called ServerData that returns a simple <div> with the text Loading data....

NextJS

export default async function ServerData() {
  // Your code here
}

Need a hint?

This is the basic structure of a server component in Next.js. It must be an async function if you plan to fetch data.

2

Add Data Fetching Logic

Inside the ServerData function, create an async function called fetchData that uses fetch to get JSON data from https://jsonplaceholder.typicode.com/posts/1 and returns the parsed JSON.

NextJS

export default async function ServerData() {
  async function fetchData() {
    // Your code here
  }
  return Loading data...;
}

Need a hint?

Use await fetch(url) and then await res.json() to get the data.

3

Use the Fetched Data in the Component

Call the fetchData function inside ServerData and store the result in a variable called post. Then return a <div> that displays the post.title inside an <h1> and the post.body inside a <p>.

NextJS

export default async function ServerData() {
  async function fetchData() {
    const res = await fetch('https://jsonplaceholder.typicode.com/posts/1');
    const data = await res.json();
    return data;
  }
  // Your code here
}

Need a hint?

Remember to await the fetchData() call and use JSX to display the data.

4

Confirm Server Component Restrictions

Ensure that the ServerData component does not use any client-side hooks like useState or browser-only APIs such as window or document. Add a comment inside the component explaining that server components run only on the server and can safely fetch data.

NextJS

export default async function ServerData() {
  async function fetchData() {
    const res = await fetch('https://jsonplaceholder.typicode.com/posts/1');
    const data = await res.json();
    return data;
  }
  const post = await fetchData();
  // Your code here
  return (
    
      {post.title}
      {post.body}
    
  );
}

Need a hint?

Server components do not use useState or window. Add a comment to explain this.