Why should I use SSR?
You should use SSR if you are currently finding yourself with some trouble with Search Engine Optimization (SEO). As not every website gets indexed by its content, and this includes many applications too, this helps the SEO to provide metadata to the web and social medial channels. SSR also improves the speed of loading the page for the first time, the initial loading time.
SSR also helps to have better performance. The app is sent from the server on a single request instead of requiring a big setup that can become complicated to load on the server-side.
How does it work?
The process to use SSR on a React app is based on developing normally on React, but later on, applying the custom changes to the server. When creating your SSR for React apps, you will have to run a node backend for your server.
To create the app from scratch we will use NPX.
Npx create-react-app ssr-app
Next, we have to tell our express server 3 things.
- To import the app from the client-side
- To serve /build folder as static files
- To replace information.
On the client-side, we have to replace and Hydrate. To hydrate, we use the following: ReactDOM.hydrate(). Hydrate is the same as Render() but attaches event listeners. So that React then attaches the listeners to the existing markup.
Once you have your server and your client, run your application. If everything runs well, it should run on port 8080
It´s not all positive when it comes to SSR. The more complex your application is, the more complex it is to render it on the server. If it´s a big application, considering what big means in software, it can even make the service to load slower than by rendering on the client-side. Let alone the situation where you are running the service on a computer or phone with low hardware and bad internet connection. SSR is not for every app. But if you are developing a small-medium sized application, then you should consider using it.
As the applications we are going to run are developed on React, we can expect a Virtual DOM object per every DOM object. DOM, or in words, Document Object Model is "The Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document." The virtual version is created on the client-side, it knows not to render the document two times.
In conclusion, if you are looking to optimize the positioning of your application or website in search engines, without the need to pay more in advertising, but rather be better positioned based on code, then SSR is what you are looking for. It´s not the only positive thing SSR has when it comes to developing on React. One can expect much faster-loading pages and facilities to share on social media. Something not everybody knows, is the limitation of SSR, being that if your app is too big, it´s recommended to render it only on the client-side, as too much on the server-side will make the service slower.