Data fetching in server components in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a server component in Next.js?

A server component is a React component that runs only on the server. It can fetch data directly and send fully rendered HTML to the client, improving performance and SEO.

beginner

How do you fetch data in a Next.js server component?

You fetch data by calling async functions directly inside the server component. Since it runs on the server, you can use native fetch or database queries without extra client-side code.

intermediate

Why should you avoid fetching data inside client components in Next.js when using server components?

Fetching data in client components adds extra client-side loading and delays. Server components fetch data once on the server, sending ready HTML to the client for faster load and better SEO.

intermediate

What happens if you use 'useEffect' to fetch data in a server component?

'useEffect' does not run in server components because it only runs in the browser. Data fetching in server components should be done with async/await directly in the component code.

beginner

Can server components fetch data from external APIs and databases?

Yes, server components can fetch data from any source like external APIs or databases because they run on the server and have full access to backend resources.

Where does data fetching happen in Next.js server components?

A Directly inside the server component using async functions

B Inside useEffect hook

C Only in client components

D Using Redux actions

Server components run on the server, so you fetch data directly with async functions inside them.

Why is data fetching in server components better for SEO?

A Because client components load faster

B Because the server sends fully rendered HTML with data

C Because it uses useEffect

D Because it avoids server rendering

Server components fetch data on the server and send ready HTML, which search engines can read easily.

What happens if you try to use 'useEffect' in a server component?

A It fetches data immediately

B It causes a server error

C It does not run because useEffect only works in the browser

D It runs on the server and client

'useEffect' runs only in the browser, so it does not run in server components.

Which of these is a benefit of fetching data in server components?

A Faster page load with ready HTML

B More client-side JavaScript

C Delayed rendering

D Requires Redux

Fetching data on the server means the client gets fully rendered HTML faster.

Can server components access databases directly?

A Only if using Redux

B No, only client components can

C Only with special APIs

D Yes, because they run on the server

Server components run on the server and can access databases directly.

Explain how data fetching works in Next.js server components and why it improves performance.

Think about where the code runs and what the client receives.

Describe the difference between fetching data in server components versus client components in Next.js.

Consider timing and where the data is fetched.