What is SSR (Server-Side Rendering)? Why use it and what should be considered when translating an application to SSR?

SSR (Server-Side Rendering) is the process of generating HTML pages on the server instead of the client. This allows for faster content display to the user, improved SEO, and better performance on low-end devices.

When transitioning to SSR, it is important to consider:

• Application state: properly synchronize state between server and client.
• Asynchronous data: data loading should occur on the server before rendering.
• Security: avoid leaking sensitive information in HTML.
• Caching: use caching to speed up responses.

Example with React and SSR:

// Server-side rendering
import ReactDOMServer from 'react-dom/server';
import App from './App';

const html = ReactDOMServer.renderToString(<App />);
// Send html to client