Server-side Rendering

= ability of a Javascript app on the server side as well

Why Server-side Rendering is needed

- for search engines to index / find your web pages

- for faster first page load-time

- to allow people to share a page of your site via email or on social platforms

With no Server-side rendering, Server would just send the initial HTML along with the bundled script to the browser and then browser would have to compile(interpret) the whole script (including the framework logic) to render the page, this may take long initial rendering time

(SSR for a very large, resource-intensive application on a heavily-loaded server may again slow down the initial rendering )

You can set up SSR using node tools like express or framework like next.js

After Setting up Express app to render your react app's index.html

in you React app app, replace the ReactDOM.render() with ReactDOM.hydrate()

ReactDOM.render(<App />, document.getElementById('root'))

to

ReactDOM.hydrate(<App />, document.getElementById('root'))

and then there is some more setup involved

check this out https://flaviocopes.com/react-server-side-rendering/

https://www.clariontech.com/blog/server-side-rendering-vs.-client-side-rendering

Server-side pros:

1. Search engines can crawl the site for better SEO.

2. The initial page load is faster.

3. Great for static sites.

Server-side cons:

1. Frequent server requests.

2. An overall slow page rendering.

3. Full page reloads.

4. Non-rich site interactions.

Client-side pros:

1. Rich site interactions

2. Fast website rendering after the initial load.

3. Great for web applications.

4. Robust selection of JavaScript libraries.

Client-side cons:

1. Low SEO if not implemented correctly.

2. Initial load might require more time.

3. In most cases, requires an external library.

Now that you’re aware of the pros and cons of each approach, let’s take a look at ideal scenarios for their implementation.

When to use server-side rendering

• An application has very simple UI with fewer pages/features

• An application has less dynamic data

• Read preference of the site is more than write

• The focus is not on rich site and has few users

When to use client-side rendering

• An application has very complex UI with many pages/features

• An application has large and dynamic data

• Write preference of the site is more than reading

• The focus is on rich site and a huge number of users

In a nutshell, server-side rendering is like receiving a pre-assembled toy train set whereas client-side rendering is like receiving a dismantled one that you need to assemble yourself. You have to decide whether you’d like to play with a pre-assembled one or prefer assembling it just the way you want it.