Describe server rendering strategies
- 1
With Static Rendering, routes are rendered at build time, or in the background after data revalidation. The result is cached and can be pushed to a Content Delivery Network (CDN). This optimization allows you to share the result of the rendering work between users and server requests. Static rendering is useful when a route has data that is not personalized to the user and can be known at build time, such as a static blog post or a product page.
- 1
With Dynamic Rendering, routes are rendered for each user at request time. Dynamic rendering is useful when a route has data that is personalized to the user or has information that can only be known at request time, such as cookies or the URL's search params.
- 2
In Next.js, you can have dynamically rendered routes that have both cached and uncached data. This is because the RSC Payload and data are cached separately. This allows you to opt into dynamic rendering without worrying about the performance impact of fetching all the data at request time.
- 3
During rendering, if a dynamic function or uncached data request is discovered, Next.js will switch to dynamically rendering the whole route.
- 1
With Streaming, routes are rendered on the server at request time. The work is split into chunks and streamed to the client as it becomes ready. This allows the user to see a preview of the page before it's fully rendered. Streaming is useful for lower-priority UI, or UI that depends on slower data fetches that would block rendering for the whole route.
Scenario Questions
0-2 years experience
- 1If you need to show a product page with SEO metadata in a Next.js app, which rendering strategy would you pick and why?
- 2How would you configure a page to be statically generated at build time versus rendered on each request?
- 3What happens if you use getServerSideProps on a page that also has dynamic routes?
2-5 years experience
- 1We have a blog where new posts are added frequently. You notice the page load time spikes after a new post is published. Which Next.js rendering strategy would you choose to balance freshness and performance, and how would you implement it?
- 2During a rollout, a page that uses getStaticProps started returning 404 after deployment. Walk me through how you'd debug the issue.
- 3Explain the trade‑offs between using ISR with a revalidation time of 10 seconds versus using SSR for a dashboard that updates every minute.
5-8 years experience
- 1Our e‑commerce site serves millions of product pages. Design a rendering strategy that minimizes server load while keeping product data up‑to‑date within 5 minutes. Discuss caching, ISR, and fallback mechanisms.
- 2We need to support personalized content (user’s cart) on a page that is otherwise static. How would you combine static generation with server‑side rendering in Next.js to achieve this without hurting performance?
- 3What edge cases can cause stale data when using ISR, and how would you mitigate them at scale?
8+ years experience
- 1The company is migrating a legacy monolith to a micro‑frontend architecture using Next.js. How would you decide which parts of the app should use SSR, SSG, or ISR to optimize both developer velocity and runtime cost across teams?
- 2Explain how you would set up a CI/CD pipeline that automatically adjusts rendering strategies (e.g., switches a page from SSR to ISR) based on observed traffic patterns and cost metrics.
- 3Discuss the long‑term maintenance implications of mixing SSR, SSG, and ISR in a large codebase. How would you enforce consistency and avoid technical debt across multiple squads?
Follow-up Questions
- Can you walk me through the implementation steps for that choice?
- What monitoring or metrics would you put in place to verify it works as expected?
- How would you handle a failure or edge case that breaks the rendering pipeline?