When to keep components on server in NextJS - Step-by-Step Execution

Concept Flow - When to keep components on server

Start: Decide component type

↓

Does component need user interaction?

Yes→Keep on Client

No↓

Does component fetch data?

Yes→Keep on Server

No↓

Is SEO important?

Yes→Keep on Server

No↓

Keep on Client or Server based on performance needs

↓

End

Decide if a component should run on server or client by checking interaction, data fetching, SEO, and performance needs.

Execution Sample

NextJS

export default function Greeting() {
  return <h1>Hello from Server!</h1>
}

// This component runs on server by default in Next.js

A simple Next.js component that runs on the server and renders a greeting.

Execution Table

Step	Check	Condition	Decision	Reason
1	User interaction needed?	No	Keep on Server	No event handlers or state needed
2	Fetch data inside component?	Yes	Keep on Server	Server can fetch data before sending HTML
3	SEO important?	Yes	Keep on Server	Server renders full HTML for search engines
4	Performance critical client updates?	Yes	Keep on Client	Client handles fast UI updates
5	Default fallback	N/A	Keep on Server	Server components are default in Next.js

💡 Decision made based on interaction, data, SEO, and performance needs

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	Final
ComponentLocation	Undecided	Server	Server	Server	Client if needed	Server or Client

Key Moments - 3 Insights

Why do we keep components that fetch data on the server?

Because server components can fetch data before sending HTML, improving load speed and SEO, as shown in execution_table step 2.

What if a component needs user clicks or typing?

Then it must be kept on the client to handle events and state, as explained in execution_table step 1.

Is SEO a reason to keep components on the server?

Yes, server components render full HTML for search engines, improving SEO, as shown in execution_table step 3.

Visual Quiz - 3 Questions

Look at the execution table, at which step do we decide to keep a component on the client?

A Step 4

B Step 1

C Step 3

D Step 2

💡 Hint

Check the 'Decision' column for 'Keep on Client' in the execution_table rows

According to variable_tracker, what is the component location after step 3?

A Client

B Undecided

C Server

D Both

💡 Hint

Look at the 'ComponentLocation' row and the 'After Step 3' column in variable_tracker

If a component does not fetch data and does not need user interaction, where should it be kept?

A Client

B Server

C Either client or server

D Neither

💡 Hint

Refer to execution_table steps 1 and 2 where no interaction and no data fetching leads to server

Concept Snapshot

Next.js components run on server by default.
Keep components on server if they fetch data or need SEO.
Keep on client if user interaction or fast UI updates are needed.
Server components send full HTML, client components handle events.
Decide based on interaction, data, SEO, and performance.

Full Transcript

In Next.js, components run on the server by default. To decide where to keep a component, first check if it needs user interaction like clicks or typing. If yes, keep it on the client to handle events. If not, check if it fetches data inside the component. Data fetching is best done on the server to send ready HTML and improve SEO. Also, if SEO is important, keep the component on the server so search engines see full content. If the component needs fast UI updates or animations, keep it on the client. Otherwise, server components are preferred for performance and SEO. This decision flow helps build fast, SEO-friendly apps with Next.js.

Practice

1. Which of the following is the best reason to keep a component as a server component in Next.js?

easy

A. It requires frequent updates based on user interaction.

B. It needs to handle user clicks and input events.

C. It fetches data securely and renders static content.

D. It uses browser-only APIs like localStorage.

Solution

1. Step 1: Understand server component purpose

   Server components run on the server and are ideal for static content and secure data fetching.

2. Step 2: Identify interactive needs

   Components that handle user clicks or browser APIs must be client components, not server components.

3. Final Answer:

   It fetches data securely and renders static content. -> Option C

4. Quick Check:

   Server components = static + secure data [OK]

Hint: Server components = static or secure data only [OK]

Common Mistakes:

• Choosing server component for interactive UI
• Using browser APIs in server components
• Thinking server components handle events

2. Which syntax correctly forces static rendering for a server component in Next.js 14+?

easy

A. export const dynamic = 'force-static';

B. export const runtime = 'edge';

C. export const dynamic = 'force-dynamic';

D. export const client = true;

Solution

1. Step 1: Recall server component syntax

   Server components can be forced static with export const dynamic = 'force-static';.

2. Step 2: Differentiate other options

   export const dynamic = 'force-dynamic'; (dynamic = 'force-dynamic') forces dynamic rendering, B (runtime = 'edge') sets edge runtime without forcing static, D is invalid syntax.

3. Final Answer:

   export const dynamic = 'force-static'; -> Option A

4. Quick Check:

   Force static = server component [OK]

Hint: Use 'force-static' to keep component server-only [OK]

Common Mistakes:

• Confusing client directive with server component
• Using 'force-dynamic' for server-only components
• Mixing runtime and dynamic exports

3. Consider this Next.js server component code snippet:

export default function Greeting() {
  const name = fetchNameFromDB();
  return <h1>Hello, {name}!</h1>;
}

What will be the output rendered in the browser?

medium

A. <h1>Hello, [name from DB]!</h1>

B. Error: fetchNameFromDB is not defined

C. <h1>Hello, undefined!</h1>

D. Nothing renders because server components cannot fetch data

Solution

1. Step 1: Understand server component data fetching

   Server components can fetch data directly on the server before rendering.

2. Step 2: Analyze the code behavior

   The function fetchNameFromDB() is not defined in the snippet, so this will cause a runtime error.

3. Final Answer:

   Error: fetchNameFromDB is not defined -> Option B

4. Quick Check:

   Undefined functions cause errors [OK]

Hint: Undefined functions cause errors in server components [OK]

Common Mistakes:

• Assuming fetchNameFromDB is defined
• Thinking server components can't fetch data
• Confusing client-side data fetching with server

4. You have a Next.js component that fetches user data and also handles a button click event. You mistakenly keep it as a server component. What error or issue will you face?

medium

A. The component will render twice causing performance issues.

B. The component will throw a syntax error at build time.

C. The data fetching will fail because server components cannot fetch data.

D. The button click event will not work because server components cannot handle client events.

Solution

1. Step 1: Understand event handling in Next.js components

   Only client components can handle browser events like button clicks.

2. Step 2: Identify the problem with server components

   Server components run on the server and cannot respond to client-side events, so the button click won't work.

3. Final Answer:

   The button click event will not work because server components cannot handle client events. -> Option D

4. Quick Check:

   Server components = no client events [OK]

Hint: Client events need client components [OK]

Common Mistakes:

• Expecting server components to handle clicks
• Thinking server components cause syntax errors
• Confusing data fetching ability

5. You want to build a Next.js page that shows a list of blog posts fetched from a database and includes a search box that filters posts as the user types. How should you split components between server and client?

hard

A. Keep the blog list as a server component and the search box as a client component.

B. Make both blog list and search box client components for interactivity.

C. Make both blog list and search box server components for performance.

D. Keep the search box server component and blog list client component.

Solution

1. Step 1: Identify static and interactive parts

   The blog list is static content fetched from the database, suitable for server components.

2. Step 2: Identify interactive UI needs

   The search box needs to respond to user typing, so it must be a client component.

3. Step 3: Combine components properly

   Use server component for data fetching and rendering list, client component for search input and filtering.

4. Final Answer:

   Keep the blog list as a server component and the search box as a client component. -> Option A

5. Quick Check:

   Static data = server, interactive UI = client [OK]

Hint: Static content server, interactive UI client [OK]

Common Mistakes:

• Making everything client component unnecessarily
• Trying to handle user input in server component
• Mixing up which part fetches data