Server component database queries in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a server component in Next.js?

A server component in Next.js is a React component that runs only on the server. It can fetch data directly from a database or API before sending the rendered HTML to the client, improving performance and security.

beginner

Why should database queries be done inside server components in Next.js?

Database queries inside server components keep sensitive data on the server, reduce client bundle size, and allow faster page loads by sending pre-rendered HTML with data already fetched.

intermediate

How do you import and use a database client inside a Next.js server component?

You import the database client (like Prisma or a custom client) at the top of the server component file and call its query methods directly inside the component's async function before returning JSX.

intermediate

What is the benefit of using async/await in server components for database queries?

Using async/await lets the server component wait for the database query to finish before rendering. This ensures the component has all data ready, so the user sees the complete page immediately.

beginner

Can server components in Next.js access environment variables for database credentials?

Yes, server components can safely access environment variables because they run only on the server. This keeps database credentials secure and hidden from the client.

Where do server components in Next.js run?

A On the server only

B On the client only

C Both client and server

D In the browser's local storage

Server components run only on the server, allowing them to fetch data securely and send pre-rendered HTML to the client.

Why is it better to fetch database data inside server components?

A To slow down page loading

B To increase client bundle size

C To keep data fetching hidden from the client

D To expose database credentials to users

Fetching data inside server components keeps database queries and credentials hidden from the client, improving security.

Which syntax is commonly used to wait for database queries in server components?

A setTimeout

B promises without await

C callbacks

D async/await

Async/await syntax makes it easy to write code that waits for database queries to finish before rendering.

Can server components access environment variables in Next.js?

A No, only client components can

B Yes, because they run on the server

C Only if variables are public

D Only in development mode

Server components run on the server and can safely access environment variables like database credentials.

What happens if you try to run a database query inside a client component?

A It may expose sensitive data to the user

B It runs faster than server components

C It is the recommended way

D It automatically hides credentials

Running database queries in client components risks exposing sensitive data and credentials to users.

Explain how server components in Next.js handle database queries and why this is beneficial.

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

Describe the steps to fetch data from a database inside a Next.js server component.

Focus on code structure and data flow.