Fetch 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 inside a Next.js server component?

You use the standard fetch API directly inside the server component. Since it runs on the server, you can fetch data without worrying about client-side delays or exposing secrets.

intermediate

Why is fetch in server components better for SEO?

Because the data is fetched and rendered on the server before sending the page to the browser, search engines see the full content immediately, improving SEO.

intermediate

What happens if you use fetch inside a client component in Next.js?

The fetch runs in the browser, which can cause slower loading and expose API keys or sensitive data. Server components avoid this by fetching on the server.

beginner

Can you use async/await with fetch in Next.js server components?

Yes, server components support async/await syntax, making it easy to write clear and readable code when fetching data.

Where does fetch run when used inside a Next.js server component?

A On the server

B In the browser

C Both server and browser

D Nowhere, fetch is not allowed

Fetch inside server components runs on the server, allowing secure and fast data fetching.

Why is fetching data in server components good for SEO?

A Because data is fetched after page loads

B Because it hides data from search engines

C Because it uses client-side JavaScript

D Because data is fetched on the server and sent as HTML

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

Which syntax can you use to handle fetch calls in server components?

A Callbacks only

B Promises only

C Async/await

D None, fetch is synchronous

Server components support async/await syntax for clear asynchronous code.

What is a risk of fetching data in client components?

A Slower loading and exposing secrets

B Faster loading and better SEO

C No risk, it is always safe

D Server crashes

Fetching in client components can slow loading and expose sensitive data to users.

Which of these is true about Next.js server components?

A They run only in the browser

B They can fetch data securely on the server

C They cannot fetch data

D They require special fetch libraries

Server components run on the server and can fetch data securely using standard fetch.

Explain how fetch works inside a Next.js server component and why it improves performance.

Think about where the code runs and what the user sees first.

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

Consider speed, security, and search engine visibility.