What are the disadvantages of server-side rendering (SSR)?

Main disadvantages of SSR:

• Increased server load: Each client request requires full page rendering on the server, consuming more resources (CPU, memory) compared to serving static files or SPA.
• Development complexity: Requires handling code isomorphism (working on server and client), managing state between requests, handling asynchronous data. Debugging can be more difficult.
• Downtime during server errors: If the main rendering server fails, the site can become inaccessible, unlike SPA, where the client can continue working with cached resources or fallback pages.
• Longer time to interactivity (TTI): Although the first content appears faster (FCP), the user cannot interact with the app until all JavaScript is loaded and executed on the client (hydration). In SPA, interactivity can appear earlier on already loaded parts of the page.
• Caching complexity: Caching dynamically generated HTML is more complex than static resources. More sophisticated server-side caching strategies are required.
• Higher First Byte Time (TTFB): The server needs time to process the request, fetch data, render HTML, and send the first byte back to the client.
• Potential issues with isomorphic code: Some client APIs (e.g., window, document) are unavailable on the server, requiring conditional code or special libraries.

// Example of conditional rendering on the server
if (typeof window === 'undefined') {
  // Code that runs only on the server
  console.log('Server-side rendering');
} else {
  // Code that runs only on the client
  console.log('Client-side rendering');
}