What is Server Side Rendering (SSR)?
When creating a dynamic webpage using Single Page Application (SPA), the server sends the entire web application in javascript files to the client, the browser will then make the api calls to the server to fetch the content from the server and render our page. With Single Server Rendering (SSR) the page is rendered on the server and the browser will receive an HTML page ready to be displayed.
Ok, so why is that better?
The benefits of using SSR boil down to a better user experience (UX) and better SEO
Improve UX. With SSR you get a faster time-to-content, now that we don’t need to wait till we download all of the JS files and then execute them a user with slower internet speed will get to see the webpage content much quicker. Another benefit is that the data on the initial load is loaded on the server as well which is likely a faster connection to the database than most client connections.
These benefits tend to result in better Web Vitals as well which brings me to the next bug benefit of SSR.
Better SEO. Because we are loading a fully rendered page the search engine crawlers will see the fully rendered page.
There must be some tradeoffs to using SSR?
Yes, there are tradeoffs and they should be taken into account.
Development constraints. This is a big one and might need a post of its own to get into more detail but the general idea is, since we are rendering the page on the server any browser specific code needs to be called in the correct lifecycle hooks.
Server-side load. There is more load on the server now and that does need to be taken into account when it comes to scale.
Build setup and deployment are more involved. We now require a Node.js environment to build and deploy our app.
So when should I use SSR?
If time-to-content and better SEO are important to your web application and you have a large amount of dynamic content then SSR could help you improve your web application and may even help improve conversion rates.
Great how do I get started?
Here are some great resources to get you started with setting up your webapp with SSR.
For react check out the Next.JS.
For vue check out the Nuxt.JS.
For angular check out Angular Universal.
Top comments (0)