Questions
4 of 33
1Explain server-side rendering (SSR) in Next.js.
2List the benefits of Server-Side Rendering in Next.js.
3What are server components?
4How to use server components in next js?
5What is the React Server Component Payload (RSC)?
6Describe how server components are rendered.
7Describe server rendering strategies
8How can you keep Server-only Code out of the Client Environment
9What are the issues of using context provider at the root of the application?
10List dynamic functions available to server components.
11List all Dynamic APIs.
12How do we opt for Static Rendering, Dynamic Rendering and Streaming?
13Explain the difference between SSR, SSG, ISR, and CSR in Next.js. When would you choose each?
14How does getServerSideProps work internally? What is its execution context?
15What are the performance trade-offs of SSR vs SSG in a high-traffic production app?
16How does Next.js handle hydration? What is a hydration mismatch, and how do you debug it?
17What happens when getServerSideProps throws an error? How do you handle it gracefully?
18How would you architect a Next.js app that needs both personalised (SSR) and cacheable (SSG) pages at scale?
19Explain the App Router vs Pages Router SSR model differences. How does React Server Components change the SSR paradigm?
20How do React Server Components (RSC) differ from traditional SSR? Can they be used together?
21How does streaming SSR work in Next.js 13+? What role does Suspense play?
22How would you implement partial hydration or Islands Architecture in Next.js?
23Explain how Next.js handles data fetching waterfall problems in SSR and how you'd mitigate them.
24How would you implement partial hydration or Islands Architecture in Next.js?
25How do you implement caching strategies for SSR responses in Next.js? (CDN, Cache-Control, stale-while-revalidate)
26How would you reduce TTFB (Time to First Byte) in an SSR-heavy Next.js app?
27What's the difference between fetch caching in the App Router vs traditional getServerSideProps?
28How do you avoid redundant database/API calls across multiple server components on the same page?
29How do you securely handle authentication in SSR? What are the risks of passing tokens via cookies vs headers?
30How do you prevent sensitive server-side data from leaking to the client bundle?
31How would you implement role-based rendering on the server without exposing protected routes to the client?
32How do you debug SSR-only issues that don't appear in local development?
33How can we control dynamic rendering behaviour in next js?
04 / 33

How to use server components in next js?

Difficulty: 6/10
server components, data fetching, rendering strategy

Next js uses server components by default

Scenario Questions

0-2 years experience

  1. 1You need to add a header that shows the logged‑in user's name, but you want it rendered on the server. How would you implement this using a Next.js server component?
  2. 2If you import a client‑only library like a date‑picker inside a server component, what error would you see and how would you fix it?
  3. 3When you place a fetch call inside a server component, at what point does the data get fetched – build time, request time, or client side?

2-5 years experience

  1. 1Your product page fetches inventory from an external API via a server component, but the API sometimes returns 500 errors. How would you handle those errors so the rest of the page still renders?
  2. 2After adding a server component, the Time To First Byte for a high‑traffic route increased noticeably. What could be causing the slowdown and how would you diagnose and improve it?
  3. 3Explain why a server component cannot use useState or useEffect, and how you would restructure a feature that needs interactivity.

5-8 years experience

  1. 1Design a mixed rendering strategy for a dashboard where most widgets are static but one requires real‑time updates. Which parts would you make server components versus client components, and how would you manage data flow between them?
  2. 2Our legacy pages rely on getServerSideProps. We want to migrate them to server components. What architectural considerations and migration steps would you propose to minimize risk and keep performance high?
  3. 3Discuss the implications of streaming server components to the client in terms of SEO, caching, and error handling.

8+ years experience

  1. 1At scale we have thousands of server components across many teams. How would you establish shared libraries or conventions to ensure consistent data‑fetching patterns, type safety, and avoid bundle bloat?
  2. 2A critical security vulnerability is discovered in a third‑party library used only in server components. How would you coordinate the fix across teams and what safeguards would you put in place to prevent similar issues?
  3. 3If we need to support both edge runtime and Node.js runtime for server components, what trade‑offs arise and how would you design the codebase to abstract those differences?

Follow-up Questions

  • What are the SEO benefits of using a server component for this feature?
  • How does streaming affect the user‑perceived load time?
  • If a server component throws during rendering, how does Next.js handle the error?
Share

Share via WhatsApp, X, Facebook, LinkedIn or copy link. Open Graph preview enabled.