How to Server Side Rendering (SSR) with Vue.js?

First of all, the purpose of the article; Why do we need an SSR approach, why and where to use SSR, what are the differences between SSR and CSR? We will consolidate what we know about these with examples.

What is Client Side Rendering (CSR)?

In client side rendering, our server returns a simple plain html page to the browser. Then, the html page returned by our server is compiled in the user’s browser with javascript and a meaningful html output is obtained. The resulting html output is compiled by the browser and presented to the user.

What is Server Side Rendering (SSR)?

In this approach, javascript is compiled on the server, not the browser. Thus, straight and meaningful html takes place directly in the browser

When Should I Consider Using SSR?

There are two main reasons for this; Better SEO and Faster time-to-content.

Performing SSR makes us stronger for SEO. Because Google Spiders (or other bots) can understand straight and meaningful html output.

Also, if we use ssr, our site open faster. Because we make the compilation on the server side so we build a more user-friendly website.

Trade-Offs

· SSR requires an environment where Node.js server can run.

· Since the compilation process is made by the server side, your costs will increase a little.