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
}

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...;
}

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
}

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}
    
  );
}

Hint

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

Practice

1. Which of the following can you safely run inside a Next.js server component?

easy

A. Manipulating the DOM directly

B. Accessing a database directly

C. Adding event listeners for user clicks

D. Using browser APIs like localStorage

Solution

1. Step 1: Understand server component environment

   Server components run only on the server, so they can use server-only features like database access.

2. Step 2: Identify client-only features

   Browser APIs, event listeners, and DOM manipulation require client-side JavaScript and cannot run in server components.

3. Final Answer:

   Accessing a database directly -> Option B

4. Quick Check:

   Server-only code = Access database [OK]

Hint: Server components run server code only, no browser APIs [OK]

Common Mistakes:

• Thinking client APIs like localStorage work in server components
• Trying to add event listeners in server components
• Assuming DOM manipulation is possible on server

2. Which syntax correctly imports a server-only module inside a Next.js server component?

easy

A. import localStorage from 'localStorage';

B. import { useState } from 'react';

C. import window from 'window';

D. import fs from 'fs';

Solution

1. Step 1: Recognize server-only modules

   Modules like 'fs' (file system) are server-only and can be imported in server components.

2. Step 2: Identify invalid imports

   useState is client-side React hook, window and localStorage are browser globals, not importable modules.

3. Final Answer:

   import fs from 'fs'; -> Option D

4. Quick Check:

   Server module import = fs [OK]

Hint: Only import Node.js modules like fs in server components [OK]

Common Mistakes:

• Importing client hooks like useState in server components
• Trying to import browser globals as modules
• Confusing client and server imports

3. Given this server component code, what will be rendered?

import fs from 'fs';
export default function Page() {
  const data = fs.readFileSync('data.txt', 'utf8');
  return <div>{data}</div>;
}

medium

A. Contents of data.txt file inside a div

B. Error: fs module not found

C. Empty div with no content

D. Client-side error about fs usage

Solution

1. Step 1: Understand server component execution

   The code runs on the server, so fs.readFileSync reads the file content successfully.

2. Step 2: Render the file content

   The content read from 'data.txt' is returned inside a div and sent as HTML to the client.

3. Final Answer:

   Contents of data.txt file inside a div -> Option A

4. Quick Check:

   Server read file = content rendered [OK]

Hint: Server components can read files and render content directly [OK]

Common Mistakes:

• Thinking fs is unavailable in server components
• Expecting client-side errors for server code
• Assuming empty output without file content

4. What is wrong with this server component code?

export default function Page() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

medium

A. Both A and B

B. onClick handlers are not allowed in server components

C. useState cannot be used in server components

D. No error, code works fine

Solution

1. Step 1: Check React hooks usage in server components

   useState is a client-side hook and cannot be used in server components.

2. Step 2: Check event handlers in server components

   onClick handlers require client-side JavaScript and are not supported in server components.

3. Final Answer:

   Both A and B -> Option A

4. Quick Check:

   useState + onClick invalid in server components [OK]

Hint: No React hooks or event handlers in server components [OK]

Common Mistakes:

• Using useState in server components
• Adding client event handlers in server components
• Assuming server components can handle user events

5. You want to fetch data from a database and display it in a Next.js app. Which approach best uses server components to improve performance and security?

hard

A. Fetch data in the browser using fetch API directly

B. Fetch data inside a client component using useEffect

C. Fetch data inside a server component and pass it as props to a client component

D. Fetch data in a client component and store it in localStorage

Solution

1. Step 1: Understand server component advantages

   Server components can securely fetch data on the server, avoiding exposing secrets or extra client JS.

2. Step 2: Use server component to fetch and pass data

   Fetching data in server component and passing it as props to client components optimizes performance and security.

3. Final Answer:

   Fetch data inside a server component and pass it as props to a client component -> Option C

4. Quick Check:

   Server fetch + props passing = best practice [OK]

Hint: Fetch data server-side, then pass to client components [OK]

Common Mistakes:

• Fetching data only on client causing slower load
• Exposing secrets by fetching in client
• Storing sensitive data in localStorage