Server component execution model in NextJS - Mini Project: Build & Apply

Understanding Server Component Execution Model in Next.js

📖 Scenario: You are building a simple Next.js app that shows a greeting message fetched from a server component. This will help you understand how server components run on the server and send HTML to the browser.

🎯 Goal: Create a Next.js server component that returns a greeting message. Then add a configuration variable for the greeting text. Next, use the greeting text inside the server component. Finally, export the component as default to complete the setup.

📋 What You'll Learn

Create a server component function named Greeting

Add a constant variable greetingText with the value 'Hello from Server Component!'

Use the greetingText inside the Greeting component to display the message inside an <h1> tag

Export the Greeting component as the default export

💡 Why This Matters

🌍 Real World

Server components in Next.js help build fast web pages by running code on the server and sending ready HTML to the browser. This reduces JavaScript sent to users and improves performance.

💼 Career

Understanding server components is important for modern React and Next.js development jobs, as many companies use server components to optimize their web apps.

1

Create the Server Component Function

Create a server component function called Greeting that returns an <h1> tag with the text 'Welcome!'.

NextJS

// Create a server component function called Greeting
// Your code here

Need a hint?

Remember, a server component is a function that returns JSX. Use function Greeting() and return an <h1> tag.

2

Add a Greeting Text Variable

Add a constant variable called greetingText with the value 'Hello from Server Component!' above the Greeting function.

NextJS

const greetingText = '';

export default function Greeting() {
  return Welcome!;
}

// Add a constant greetingText variable above the Greeting function

Need a hint?

Use const greetingText = 'Hello from Server Component!'; before the function.

3

Use the Greeting Text in the Component

Change the Greeting function to return an <h1> tag that displays the greetingText variable instead of the fixed text.

NextJS

const greetingText = 'Hello from Server Component!';

export default function Greeting() {
  // Use greetingText inside the h1 tag
  return ;
}

// Replace the fixed text with greetingText variable

Need a hint?

Use curly braces {} inside JSX to insert the variable greetingText.

4

Export the Component as Default

Ensure the Greeting function is exported as the default export using export default Greeting; at the end of the file.

NextJS

const greetingText = 'Hello from Server Component!';

function Greeting() {
  return {greetingText};
}

// Export Greeting as default export below

Need a hint?

Use export default Greeting; to export the component.