Interleaving server and client in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does interleaving server and client mean in Next.js?

It means mixing server-side and client-side code in the same component or page to optimize performance and user experience.

beginner

Which Next.js feature allows you to fetch data on the server before rendering the page?

Server Components or server actions can fetch data on the server before sending the HTML to the client.

intermediate

Why should you keep heavy logic on the server when interleaving server and client?

Because the server can handle complex tasks without slowing down the user's browser, making the app faster and smoother.

beginner

How do you mark a React component as a client component in Next.js?

By adding the directive 'use client' at the top of the component file.

intermediate

What is a benefit of interleaving server and client code in Next.js?

It lets you send fast server-rendered HTML while still having interactive client features, improving speed and usability.

In Next.js, how do you specify a component should run on the client?

A Add 'use client' at the top of the file

B Use getServerSideProps

C Wrap component in <ClientOnly>

D Add 'use server' at the top

Adding 'use client' at the top tells Next.js this component runs on the client side.

What is a Server Component in Next.js?

A A component that runs only on the client

B A component that runs only on the server and sends HTML to the client

C A component that fetches data on the client

D A component that uses client-side hooks

Server Components run on the server and send pre-rendered HTML to the client.

Why interleave server and client code in Next.js?

A To disable server rendering

B To avoid using React hooks

C To make all code run only on the client

D To improve performance and user experience by using server for heavy tasks and client for interactivity

Interleaving lets you balance server speed and client interactivity.

Which hook can only be used in client components?

A useState

B getServerSideProps

C fetch

D useEffect on server

useState is a React hook that works only in client components.

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

A It delays rendering

B It works normally

C It causes an error because server components can't have client hooks

D It runs on the server without issues

Server components cannot use client-only hooks like useState.

Explain how Next.js lets you mix server and client code in one app and why this is useful.

Think about what runs where and why.

Describe the steps to create a Next.js component that fetches data on the server but has interactive buttons on the client.

Consider splitting logic between server and client parts.