SSR/Server Side Rendering

Server-side rendering with React for better performance

Server Side Rendering (SSR) in JS frameworks is becoming increasingly popular in web development as it offers many advantages over traditional client-side rendering. SSR allows developers to render on the server before sending it to the browser, improving load times and providing a better user experience.

The most obvious benefit of server-side rendering is improved performance compared to client-side rendering. With SSR, all the necessary HTML is generated on the server and sent directly to the client's browser in one request, rather than multiple requests for each component/view. This reduces page load time and improves overall page speed, which can have a positive impact on SEO rankings and user engagement/retention metrics.

Another benefit of SSR is that it prevents certain types of malicious attacks such as cross-site scripting (XSS). By generating HTML on the server rather than relying on JavaScript rendered in the browser, any malicious code present in user input is sanitised by default, making it impossible for attackers to inject malicious code into the front end of your website.

Finally, using SSR also gives you access to powerful features such as preloading data before components are mounted, or prefetching data while components are idle so that when they are needed, it is already available rather than waiting for an additional network request or response from an API call. This can greatly improve performance and provide users with faster responses when interacting with your website or application.

While there are some drawbacks associated with server-side rendering, such as increased codebase complexity compared to client-side rendering (CSR), its potential benefits far outweigh these drawbacks, making it an ideal choice for most web applications looking for improved performance and security, as well as improved SEO rankings due to its ability to quickly generate HTML via server-side rendered components/views.