What is the difference between server-side rendering…

Server-Side Rendering (SSR) and SPA (Single Page Application) represent different approaches to building web applications.

Server-Side Rendering (SSR):

The initial HTML is generated on the server, including data from the first request.
The browser receives a fully ready HTML that can be displayed immediately.
After the page loads, interactivity is added with JavaScript (hydration).

Advantages of SSR:

Better SEO optimization, as search engines see the ready content.
Faster initial paint time.
Better performance on low-end devices.

Disadvantages of SSR:

Higher server load.
More complex application architecture.

SPA (Single Page Application):

The browser loads a single HTML file containing minimal markup and links to JavaScript and CSS.
All content and application logic are loaded and rendered on the client side using JavaScript.
Page transitions occur without reloading, by manipulating the DOM and browser history.

Advantages of SPA:

Smooth page transitions.
Native app-like experience.
Lower server load after the initial load.
Convenient development with frameworks like React, Angular, Vue.js.

Disadvantages of SPA:

SEO issues, as content is generated on the client and may be inaccessible to search engines.
Longer initial render time, as the browser must load and execute the entire JS bundle.
High device performance requirements.

Key differences in the table:

Characteristic	SSR	SPA
Content generation	On the server	On the client
First paint	Fast	Slower (until JS loads)
SEO	Good	Can have issues
Server load	High at the initial stage	Low after the first load
User experience	Re-loads may be noticeable	Smooth transitions
Development complexity	Higher	Lower (using frameworks)

Example of SSR (simplified):

// Server-side code (Node.js)
const express = require('express');
const app = express();

app.get('/', (req, res) => {
  const data = { title: 'Hello, world!', content: 'This is server content.' };
  const html = `
    <html>
      <head>
        <title>${data.title}</title>
      </head>
      <body>
        <h1>${data.title}</h1>
        <p>${data.content}</p>
        <script src="/client.js"></script> // Script for interactivity
      </body>
    </html>
  `;
  res.send(html);
});

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

Example of SPA (simplified, conceptual):

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>My SPA</title>
  <script src="/bundle.js"></script> // All app JS code
</head>
<body>
  <div id="app"></div> // Mount point for client-side rendering
</body>
</html>

In SPA, bundle.js will contain the logic for rendering all components and handling routing on the client side.

What is the difference between server-side rendering and SPA (single-page application)?