Tell about SSR, CSR, and SSG — what is the difference?

SSR (Server-Side Rendering), CSR (Client-Side Rendering), and SSG (Static Site Generation) are three approaches to rendering web pages:

• SSR — the page is generated on the server for each request and sent as a complete page to the browser. This improves SEO and the time to first paint, but increases server load.

• CSR — the server sends minimal HTML and JavaScript, and all rendering occurs in the browser. This provides a more interactive experience but can negatively impact SEO and the time to first render.

• SSG — pages are pre-generated during the build process and stored as static files. It offers fast delivery and good SEO but is not suitable for frequently changing content.

Examples:

• SSR: Next.js with getServerSideProps
• CSR: React application fetching data via API after load
• SSG: Next.js with getStaticProps or Gatsby

The choice depends on SEO requirements, interactivity, and update frequency.