An Overview Of React Server-Side Rendering (SSR) For Building SaaS Applications

Can you improve the experience for your SaaS Clients using Server Side Rendering?

React is a framework for building performant Client-Side Applications; however, there are situations where it is not enough. Your Javascript containing React components is delivered to the browser, where it is executed, and all the UI is rendered.

This approach has some issues, which resulted in the creation of Server Side Rendering for React.

What is SSR?

Server-Side Rendering (SSR) is the process of fetching all necessary data and rendering your React Components on the server, and delivering the resulting HTML directly to the client browser.

Why use SSR?

• SEO — Google page crawlers can execute synchronous javascript, meaning if you need to fetch data to render your content, it will not be seen and indexed by crawlers.
• Bundle Size — When building a full client-side app, you need to deliver all your Javascript code to the browser. This code needs to be executed in the browser for the final user to interact with your application.
• Time-To-Interaction (TTI) — How much time passed between users opening your application until they could interact with the content. The shorter this time, the better. SSR helps with reducing your application’s TTI.

If you have dynamic pages that show data that can be indexed by Google and bring customers to your app, SSR is an excellent choice for this case.

Why NOT use SSR?

When there are many requests to your server to render for many clients, this can cause an overload and decrease the response time.

Client-Side apps: All clients do the rendering for themselves

SSR apps: The server does the rendering for all clients

If your application is a dashboard for a client to access his data, a SPA (Single Page Application) should be more than enough.

This post was created with Typeshare