Explain client-side rendering, server-side rendering and static site generation. When would you use each?

What the interviewer wants to hear

• CSR: browser downloads JS and builds the page
• SSR: server renders HTML per request, then hydrates
• SSG: HTML built at build time and served from a CDN
• Trade-offs: SEO, first load speed, server cost, freshness
• Hybrid options like ISR and streaming

Model answer

With client-side rendering the server sends almost empty HTML and a JavaScript bundle, and the browser builds the page. It is simple to host and good for app-like dashboards behind login, but the first load is slower and SEO is weaker. With server-side rendering the server builds HTML for each request, so users and crawlers see content quickly, then the page hydrates to become interactive. It suits personalised or frequently changing pages, but costs server time. Static site generation builds HTML at build time and serves it from a CDN, which is the fastest and cheapest, good for blogs, docs and marketing pages. Modern frameworks like Next.js mix these per route, with incremental regeneration and streaming for the parts that are slow.

More medium Frontend Developer questions

• Explain the JavaScript event loop, including microtasks and macrotasks.
• How do you decide where to keep state in a React app: local state, context, a store, or a server-cache library?
• A page has a poor LCP score. How would you investigate and fix it?
• What testing strategy would you use for a frontend application?
• What happens between typing a URL in the browser and seeing the page rendered? Focus on the frontend side.
• A React screen feels slow. How do you find and reduce unnecessary re-renders?
• How do you handle loading, error and empty states when a screen fetches data from an API?
• How do you use TypeScript effectively in a React codebase?
• How would you handle user authentication and tokens in a single-page app or Next.js frontend?