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.