How to decide what part should be rendered on the server and what on the client?

0-2 years experience

1. 1You have a simple blog page that fetches posts from an external API. How would you decide whether to use getStaticProps, getServerSideProps, or client‑side fetching in Next.js, and what steps would you take to implement it?
2. 2If you add a dynamic comment widget that should only load after the user scrolls to the bottom, how would you ensure it renders on the client only?
3. 3What happens if you mistakenly import a client‑only component inside getStaticProps, and how would you debug the resulting error?

2-5 years experience

1. 1Your team is building a product catalog with filters that depend on user selections. The initial list needs SEO, but filters must update instantly. Walk me through how you’d split server‑rendered and client‑rendered parts and the trade‑offs you’d consider.
2. 2During a rollout, a page that previously used getStaticProps now shows a blank page after adding a heavy third‑party chart. How would you investigate whether the rendering strategy caused the issue?
3. 3Explain why moving a component from server‑side rendering to client‑side caused a noticeable increase in Time to First Byte (TTFB). What would you change to mitigate it?

5-8 years experience

1. 1Design a strategy for a large e‑commerce site where personalized recommendations must be client‑only but product listings need SEO. Discuss data fetching, caching, and how you’d orchestrate hydration to avoid content mismatch.
2. 2Your application shows a hydration mismatch warning on a page mixing server‑rendered product listings with a client‑only interactive map. How would you refactor to eliminate the mismatch while keeping performance optimal?
3. 3In a Next.js monorepo shared across multiple teams with differing SEO requirements, how would you establish guidelines for deciding SSR vs CSR at the component level, and what tooling would you introduce to enforce consistency?

8+ years experience

1. 1Your company is migrating a legacy React SPA to Next.js. Leadership wants maximum SEO benefits with minimal rewrite effort. Outline an architecture plan for progressively moving routes to server‑rendered, including handling of shared state, authentication, and incremental adoption.
2. 2Across the organization, teams are debating whether to standardize on static generation, server‑side rendering, or client‑side rendering for new features. As a staff engineer, how would you create a decision framework that balances performance, developer velocity, and operational cost, and how would you communicate it?
3. 3A new regulation requires that certain user data never be sent to the client unless the user explicitly consents. How would you redesign the rendering pipeline in Next.js to enforce this at scale, considering both existing pages and future development?