Server Side Rendering — Why should I use SSR?
Written by Lucas Rodrigues
When we have a dynamic page and we use SPA (single page application), the server sends to the web browser our whole application in javascript files (aka bundle files) and after that, the browser will do requests to apis using ajax calls to render the content properly on our page. When we have a server-side rendering, the server will send to the client the HTML, ready to render.
Why should I use Server Side Rendering?
Depending on your application, you’ll need to handle things like SEO and web crawlers to rank your page and usually SPA is not the best solution when you for that. The reason is that any milliseconds matters, and when you send HTML already built to the browser, it will render in the client side quicker compared to SPA.
Web crawlers like Google, Bing and Yandex, when they check your page, they will evaluate a bunch of things in your application like, how long your app takes to render something in the browser (TTFMP: Time to first meaningful paint) and how long your app takes to be interactive (TTI: Time to interactive). For that reason server-side rendering is a good tool to handle these issues, usually web crawlers do not use javascript, when you disable javascript in your browser, SPA won’t work, but SSR (server-side rendering) will be able to render the page without any issue.
When you have e-commerce as an application
this kind of approach can help you a lot.
Currently, three main SPA frameworks (Angular, VueJS and React) have the SSR version.
· Angular has one called Universal: https://angular.io/guide/universal
· VueJS has one called NuxtJS: https://nuxtjs.org/
· React has one called NextJS: https://nextjs.org/
Who uses this kind of tool?
NextJS provides a showcase page where you can see all big successful cases that uses this tool: https://nextjs.org/showcase
NuxtJS has https://awesomenuxt.js.org/resources/showcase.html
Static vs Dynamic pages
This is a strategy to save time to build pages, using SSR you can build some pages during build time and others in the request time. Assuming that you have a blog post. Once one new post is already finished, the content won’t change so much, so for that reason you can choose to build this page as static, meaning that when someone hits the URL, that page will be already ready in the server, your application just needs to send the HTML, CSS and JS files to the client. But assuming now that you have an e-commerce website and the price, description and images change frequently. In that case you have a dynamic page and you can configure to build the content in the time of request. In case you have a blog and you want to handle only static pages, you have another alternative, which is a project called Gatsby.
States
SPAs application manipulate states on the client-side, like React community uses Redux or Vue community uses Vuex. Next (React SSR) and Nuxt (Vue SSR) have some alternatives when it comes in how they handle it and the flow is:
· In the server-side you do all the requests that you need to do, build the state and use a technic called HYDRATE, where the server will send the HTML to the client in sequence and the client will receive the whole state already built, but injected by HYDRATE technic.
PROS AND CONS ABOUT SSR
PROS
· Faster to render pages
· Each page is independent
· Dynamic pages and Static pages
Cons
· Manipulate life cycles in different environments (client-side and server-side)
· Hard to synchronize states
· Synchronize builds to deploy, in case you are not using containers, all applications replicas need to have the same build.
Conclusion
The server-side rendering is a great technic to gain performance in your applications, but it doesn’t solve all problems, keep in mind that you need to understand which kind of application you are working on and which kind of problem you need to solve. SSR is easy to solve most of the problems related with performance, metadata headers and other implications that you have in SPA.
References
· React NextJS - https://nextjs.org/
· Vue NuxtJS - https://nuxtjs.org/
· Angular Universal - https://angular.io/guide/universal
· Static pages - https://www.gatsbyjs.com/
· Time to interactive: https://developer.mozilla.org/en-US/docs/Glossary/Time_to_interactive
· Time to first meaningful paint: https://developer.mozilla.org/en-US/docs/Glossary/first_meaningful_paint