How Next.js renders (server-first model) - Try It Yourself

How Next.js renders (server-first model)

📖 Scenario: You are building a simple Next.js app that shows a welcome message fetched from the server. This will help you understand how Next.js renders pages first on the server before sending them to the browser.

🎯 Goal: Create a Next.js app with a server component that fetches a message and displays it. You will set up the data, configure a fetch function, use the server component to render the message, and complete the page structure.

📋 What You'll Learn

Create a server component that fetches data

Use async/await to fetch the message

Render the fetched message inside a React component

Use Next.js App Router conventions with a page.tsx file

💡 Why This Matters

🌍 Real World

Next.js is used to build fast websites that load content on the server first, improving performance and SEO.

💼 Career

Understanding server-first rendering in Next.js is essential for frontend developers working with modern React frameworks and building scalable web apps.

1

DATA SETUP: Create a simple message variable

Create a constant called message with the exact string value 'Welcome to Next.js server-first rendering!'.

NextJS

// Create a constant called message with the exact string value
// Your code here

Need a hint?

Use const message = '...' to create the message string.

2

CONFIGURATION: Create an async function to fetch the message

Create an async function called fetchMessage that returns the message constant.

NextJS

const message = 'Welcome to Next.js server-first rendering!';

// Create an async function fetchMessage that returns message
// Your code here

Need a hint?

Define async function fetchMessage() { return message; }.

3

CORE LOGIC: Create a server component that uses fetchMessage

Create an async React component called Welcome that calls fetchMessage(), awaits its result, and returns a <div> containing the message inside a <p> tag.

NextJS

const message = 'Welcome to Next.js server-first rendering!';

async function fetchMessage() {
  return message;
}

// Create an async React component Welcome that fetches the message and renders it
// Your code here

Need a hint?

Use export default async function Welcome() { const msg = await fetchMessage(); return (<div><p>{msg}</p></div>); }.

4

COMPLETION: Add the page metadata export

Add an export called metadata with a title property set to 'Next.js Server Rendering'.

NextJS

const message = 'Welcome to Next.js server-first rendering!';

async function fetchMessage() {
  return message;
}

export default async function Welcome() {
  const msg = await fetchMessage();
  return (
    
      {msg}
    
  );
}

// Add export metadata with title 'Next.js Server Rendering'
// Your code here

Need a hint?

Use export const metadata = { title: 'Next.js Server Rendering' };.