Skip to content
QuiznExam

Server Components and Client Components in Next.js Quiz

Test your knowledge of Server Components and Client Components in Next.js, including rendering strategies, the use client directive, server-side data fetching, React hooks, event handlers, component composition, and performance optimization.

15
Questions
12 min
Time limit
Medium
Difficulty

No sign-up needed · Last updated:

Save your score

At least 8 characters.

Forgot password?

Related quizzes

All 15 questions and answers Spoilers: this shows the questions and answers. Try the quiz first! Open

  1. 1. What is the default component type in the Next.js App Router?

    • A. Client Component
    • B. Server Component
    • C. Class Component
    • D. Web Component
    Show answer

    B. Server Component

    Components in the App Router are Server Components by default unless a client boundary is introduced.

  2. 2. Which directive is used to mark a module as a Client Component entry point in Next.js?

    • A. use client
    • B. use server
    • C. use browser
    • D. use component
    Show answer

    A. use client

    The use client directive marks a module boundary for Client Components, enabling client-side interactivity and browser-related functionality.

  3. 3. Which feature is directly supported in Client Components but not in Server Components?

    • A. Rendering HTML
    • B. Using server-side data sources
    • C. Using React useState for interactive state
    • D. Rendering static text
    Show answer

    C. Using React useState for interactive state

    Client Components can use interactive React features such as useState and useEffect. Server Components do not support these client-side hooks.

  4. 4. What is a major advantage of Server Components in Next.js?

    • A. They can directly handle browser click events
    • B. They always execute exclusively in the user's browser
    • C. They automatically make every page static
    • D. They can access server-side resources without exposing those resources directly to the browser
    Show answer

    D. They can access server-side resources without exposing those resources directly to the browser

    Server Components can access databases, server-side APIs, and other server resources. Sensitive credentials must still be handled securely and must not be exposed in client bundles or rendered output.

  5. 5. Can a Server Component import and render a Client Component?

    • A. No, Server Components cannot render other components
    • B. Yes, a Server Component can import and render a Client Component
    • C. Only when the Client Component has no props
    • D. Only when both components are class components
    Show answer

    B. Yes, a Server Component can import and render a Client Component

    Server Components can render Client Components as part of the component tree, allowing server-rendered content to include interactive UI.

  6. 6. Why should the use client directive usually be placed as low in the component tree as practical?

    • A. To reduce the amount of code sent to the client and preserve more server-rendered functionality
    • B. To make every component execute only at build time
    • C. To disable all React hooks
    • D. To prevent the application from using CSS
    Show answer

    A. To reduce the amount of code sent to the client and preserve more server-rendered functionality

    Keeping client boundaries small can reduce client JavaScript and allow more of the application to benefit from Server Components.

  7. 7. Which React hook is commonly used in Client Components to perform side effects after rendering?

    • A. useServerEffect
    • B. useRoute
    • C. useEffect
    • D. useDatabase
    Show answer

    C. useEffect

    The useEffect hook runs side-effect logic in Client Components after rendering, according to its dependency configuration.

  8. 8. What restriction applies to props passed from a Server Component to a Client Component across the server-client boundary?

    • A. All props must be strings
    • B. Props cannot contain numbers
    • C. Props must always be empty
    • D. Props must be serializable according to React's supported rules
    Show answer

    D. Props must be serializable according to React's supported rules

    Props crossing the Server Component to Client Component boundary must follow React's serialization rules. Ordinary functions generally cannot be passed this way, although supported Server Function references are an exception.

  9. 9. Can a Server Component use browser-only APIs such as window or localStorage during server rendering?

    • A. Yes, they are always available on the server
    • B. No, browser-only APIs are unavailable in the server environment
    • C. Yes, if the component uses JSX
    • D. Only when the component is asynchronous
    Show answer

    B. No, browser-only APIs are unavailable in the server environment

    Server Components execute in a server environment, where browser APIs such as window and localStorage are not available. Client-side logic can access them in an appropriate browser context.

  10. 10. Which statement about data fetching in Server Components is correct?

    • A. They can use async functions to fetch data on the server
    • B. They can fetch data only through useEffect
    • C. They cannot access databases
    • D. They must fetch all data after hydration
    Show answer

    A. They can use async functions to fetch data on the server

    Server Components can be asynchronous and await data from fetch requests, databases, or other server-side sources before producing their rendered output.

  11. 11. What is hydration in the context of Client Components in Next.js?

    • A. Deleting the server-rendered HTML
    • B. Moving the database into the browser
    • C. Attaching React's client-side behavior to the server-rendered HTML
    • D. Converting JavaScript into CSS
    Show answer

    C. Attaching React's client-side behavior to the server-rendered HTML

    Hydration allows React to attach event handling and other client-side behavior to HTML that was rendered on the server.

  12. 12. Which component type is generally appropriate for a button that uses onClick to update local state?

    • A. Server Component only
    • B. A static layout without client functionality
    • C. A database component
    • D. Client Component
    Show answer

    D. Client Component

    A button that uses an event handler and updates React state requires Client Component functionality.

  13. 13. What happens when a component file contains the use client directive at the top?

    • A. The entire Next.js application becomes a Client Component
    • B. The module establishes a client boundary, and its imported module dependencies become part of the client bundle where applicable
    • C. The component can no longer receive props
    • D. The component can access every server-only API from the browser
    Show answer

    B. The module establishes a client boundary, and its imported module dependencies become part of the client bundle where applicable

    The directive defines a client entry point. Its client-side dependency graph is included in the client bundle, while unrelated parts of the application can remain Server Components.

  14. 14. Which approach is generally recommended when a page needs both server-fetched data and a small interactive control?

    • A. Fetch the data in a Server Component and isolate the interactive control in a Client Component
    • B. Convert the entire application into a Client Component
    • C. Disable all React rendering
    • D. Move every database query into the browser
    Show answer

    A. Fetch the data in a Server Component and isolate the interactive control in a Client Component

    Separating server-side data work from interactive client-side behavior can reduce client JavaScript while preserving a responsive user experience.

  15. 15. Which statement about Server Components and Client Components is correct?

    • A. Client Components can never be pre-rendered on the server
    • B. Server Components always require a use server directive
    • C. Client Components can be pre-rendered to HTML and then hydrated in the browser
    • D. Server Components and Client Components have identical access to browser APIs
    Show answer

    C. Client Components can be pre-rendered to HTML and then hydrated in the browser

    Client Components can contribute server-rendered HTML for the initial page and then become interactive through hydration in the browser.