Server Side Rendering vs Client Side Rendering vs Static Site Generation
Lets see the differences and when to use them
Table of content
While building web applications we end up choosing one among these. Lets see when to choose what.
Server Side Rendering
As the name suggests, rendering of the view happens on the server. Data is picked from the database and inserted into html using some template engine. Html is constructed on the server and then sent to the client. Doing this is good for SEO. When we make request to some content from the browser, search engine (example google, duckduck go) crawls servers and looks for any data relevant to our search. In SSR as the content is generated on the server, crawlers can see what this content is all about and if there is any match search engine will rank and show the results in the browser.
Client Side Rendering
Also called as Single Page Application(SPA). The view is constructed on the client (browser) instead of server. Server exposes few API’s using which client application can request data from the server. The data may be in the form of json, xml or even plain text. Client application consumes the data and then generated view on the browser. CSR is not good for SEO as crawlers cannot see the contents.
Why do we render the html on the browser in the first place. The term Single Page Application explains it well. In SSR browser have to make new request to the server everytime the view has to change. But in CSR whole javascript bundle is downloaded once and view changes on the browser without making request to the server. DOM manipulation is handled by javascript.
CSR is best suited for applications where the view changes very often and SSR is best suited where SEO matters the most.
In CSR you will have to manage two code bases. One for backend service and one for client application. For example backend is written in .NET and client application is written in Reactjs. In SSR you will have a single code base.
Frontend frameworks like Reactjs, Angular or Vuejs gives abstract API for DOM manipulation, i.e changing the view and doing animations in easy here.
Static Site Generator
If you want goods of both the worlds, i.e CSR and SSR you can go with Static Site Generator. What if you could use Frontend frameworks like React to build a static site. Static site is one in which the contents doesn’t change. Small animated content and layout changes happen but not to the level of SSR or SPA where content changes a lot. Finally you will get html pages which you can host it. As the content is already generated, its good for SEO.
SSR is best suited when you have to create sites with lots of animations and view changes along with SEO.
⚡Gatsby provides lot of plugins and does a very good job as a Static Site Generator. You can use it with any of your frontend frameworks.
You can even use Frontend frameworks like React with backend frameworks as template engines. You can utilize dom manipulation API’s that these frameworks provide but not SEO.
⚡You can go with Nextjs, which is a fullstack React framework. You can use it to do SSR or even CSR when required. Along with awesome dom and state management that React provides SEO comes along as a bonus. Unlike Static Site Generators we can change the content very often. Have a freedom of choosing between SSR and CSR for different html pages.
Hope you got the gist of SSR, CSR and SSG. Choose based on project requirements.
Thank yourself for learning something new
Stay Curious… Stay Creative…
