What is the difference between client-side and server-side rendering (CSR vs SSR)?

Client-Side Rendering (CSR) is when the browser receives minimal HTML and JavaScript, which is then executed on the client to build and display the interface. Server-Side Rendering (SSR) is when the server generates a complete HTML with the page content and sends it to the client, which immediately sees the ready page.

Main differences:

• CSR:

  • Fast JS loading, but content appears after scripts are executed.
  • Better suited for SPAs with intensive interaction.
  • SEO may suffer without additional configurations.

• SSR:

  • Fast initial rendering, as HTML is ready immediately.
  • Better for SEO and social media.
  • May increase server load.

Example: A React application can be configured for CSR, where all rendering occurs in the browser, or for SSR using Next.js, where the server delivers a ready HTML.