Server-side rendering(SSR) with React[Part-1]

#react #javascript #webdev #performance

Client-side-rendering
Drawbacks
Server-side rendering
Drawbacks
Conclusion

This article is not for beginners, I'll assume that you save some experience working with React.
The article consists of two parts, this is Part-1 of the article. The first part covers the fundamentals that are required to actually know how SSR with react works. We'll then move on to Part-2 where I'll explain SSR with react and also the implementation about how can we enable SSR in React and give our app a performance boost.

Article mirrors

Read in your preferred platform:

hashnode

We know how React renders our app on the client-side. We can as well render our React app at the server-side and leverage the advantages that SSR offers us. But before going any further let's have a look at what we mean by client-side and server-side rendering.

What is Client-side rendering?

When developers talk about client-side rendering they're talking about JavaScript rendering the content of our webpage in the browser.

If you have some experience with building react applications, by now you would be familiar with <div id=" root "></div>, that is where our application content renders. The JavaScript file is responsible for dynamically rendering the content of our website.

Drawbacks

When we visit a website that is client-side rendered, with the HTTP request the javascript file is downloaded, and till the time the javascript file downloads we have nothing to render on our screen, we'll be seeing a blank page.
Now, as soon as the download completes HTML markup is loaded, and finally, we see our app rendered.
Initial load time is increased if the size of the js file is heavy. That means the user needs to wait for some time before our app is loaded and we don't want our user to keep hanging till the app loads.

Also, if we're concerned about SEO we should not be rendering our app client-side.
Web Crawlers are unable to index our site since they'll be seeing a blank page while our javascript file still loads. Therefore, client-side rendering impacts our website ranking.

Is there a better way to render our app? Yes! Server-side rendering to our rescue

What is Server-side rendering?

In Server-side rendering(or SSR) we load our HTML pages onto the server instead of rendering them in the browser.
When we visit a website, we make an HTTP request to our server, the server sends back a fully rendered HTML page as a response that almost instantly gets rendered(also depends on the user's internet speed, location of the server, and on a multitude of factors).

This solves our issue related to initial load time. Also, Web Crawler now sees a rendered page and can index our app thereby ensuring SEO.

However, now let's look at another side of the SSR.

Drawbacks

Though it solves the problem that we faced with client-side rendering it has its downside.

Suppose we visit a website that is server-side rendered. Our app loads fully rendered content returned by the server almost instantly as discussed. However, if we navigate to another page of our app, we make another request to our server returning us the corresponding webpage, and then the content is rendered from the ground up.

As we see that even for a small change that needs to be rendered while we navigate to another page the content is fetched and rendered from the ground up. That means with every request the entire new page would be rendered, and not just the new content.
Therefore, we make frequent requests to the server, which is bad.

So, can we solve this issue of making frequent requests and avoid full page reloads? Yes! SSR with React

Conclusion

In this article, we saw two different ways of rendering our content i.e client-side and SSR. We also saw what are the drawbacks of both and how they solve them.

In PART-2 of this article, I'll cover SSR with React and how we can enable SSR in React.

I hope you liked the content, ~~Part-2 is coming soon. Stay Tuned!~~.

PART-2 is now live.🔥

If you have any suggestions or questions or found this article helpful, please let me know in the comments.

Follow me on Twitter.