1.
What are the advantages and disadvantages of
server-side rendering in React?

2.
2
Render() is the function which is available
Inside React Document Object Model which
is called using syntax ReactDOM.render()
The ReactDOM.render() function takes two arguments, HTML code and an HTML
element. The purpose of the function is to display the specified HTML code inside
the specified HTML element.
But render where?
There is another folder in the root directory of your React project, named "public".
In this folder, there is an index.html file.
You'll notice a single <div> in the body of this file. This is where our React
application will be rendered.

3.
3
What is Server Side Rendering?
In SSR, all pages of a web application are directly rendered on the
server rather than the browser. After rendering all pages performed it
results into rendered HTML pages, CSS style-sheets and JavaScript
then after when client request for those pages it get displayed to the
client. Server Side Rendering plays a very important role in performance
of popular frameworks like React and Angular, and SSR makes
Integrations very easy.

4.
4
How Does SSR works?
Img source: https://itnext.io/server-side-rendering-the-right-way-6c6ab5995be3

5.
5
Steps
●
Request is sent by user to access a webpage in the browser
●
Browser connects to the server to access resulted rendered HTML
and CSS codes.
●
After retrieval of HTML and CSS code, page is displayed on the
browser however page is not responsive yet.
●
Now browser downloads the JavaScript code available on the Server.
●
Now a fully responsive web page is visible to the user.
●
After download of JS code browser responds to all actions and events
generated in browser.

6.
6
Advantages of SSR
●
Web page loading time reduces drastically
●
Social Media can be easily optimized for instance when a link is
shared then automatically a preview is generated by the browser
that is actually because given URL is rendered by server
●
Web page can be easily optimized for Search Engine which is a
result of faster load time crawlers can crawl websites faster.
●
Brings rich experience to all users by providing ease to access
complete web application within less time because Server Side
Rendering is optimized for slow internet connections.

7.
7
Disadvantages of SSR
●
Since SSR brings highly optimized speed on client side however
on the server side server load time increases because rendering
take comparatively more time on server side.
●
Large scale web applications takes more load time
●
While the page is visible to the user still it can be non-responsive
because page will respond only after accession of JS code.
●
Slow TTFB (Time to first byte) – this happens because the server
requires time to process the rendered HTML to respond to the
first request.

8.
8
Important web parameter which gets enhanced
whenever a web application is rendered
●
Loading Time
Page load time is an important metric, especially in the current SEO
landscape. The faster your page loads, the better it is for users and
search engine spiders.
The initial page load time in SSR is faster than CSR. When compared,
SSR loads 1-1.5 seconds faster than CSR. This is because, in SSR,
the server responds by sending pre-rendered HTML, which can be
viewed by the user. In CSR, on the other hand, the entire code (HTML,
CSS and Javascript) needs to be rendered before the user can interact
with it. Once the initial page loads, we see the SSR in all its glory.

9.
9
●
Caching
Caching is a technique where important, reusable scripts are stored in the client’s browser.
This saves time as the cached scripts don’t need to be loaded again when a user revisits
the website. This is mainly used in PWA. CSR practically wins this one, hands down. In
CSR, once the page is loaded and executed, it does not need to make any requests to the
server and almost works like a desktop application. In some scenarios (when the Javascript
does not trigger API for calls to the server) it can also pretty much load without an Internet
connection. In SSR, since the page resources lie on the server, the browser needs to send
timely requests to the server.

10.
10
●
Search Engine Optimisation (SEO)
SEO is king in digital marketing. And in the race to capture the organic traffic,
Javascript SEO is a technique you have to engage with. Javascript SEO, in
simple terms, is the ability of ensuring that all your javascript content (.js) on
the website is correctly loaded, rendered, indexed and displayed on the Google
SERP. Rendering plays a vital role in this.
Let’s cut to the chase, SSR is a friend of SEO. In SEO, the search engine
spiders come to your website to crawl and index your metadata and content.
When SSR is implemented, search engine spiders get the data they are
looking for as the pre-rendered HTML is sent during the first request. However,
in CSR, search engine spiders have to wait for the entire code (HTML, CSS
and Javascript) to be rendered to start crawling the website.

11.
11
●
Conclusion
The SSR technique has a slight edge as compared to other Rendering
methods. SSR is a traditional rendering method and the most reliable one.
You can’t go too wrong with this approach.
Note- To know more, Please visit the URL:
https://avigma.com/services/mobile-apps-development-company/