Client-Side vs. Server-Side Rendering

Client-side rendering (CSR)

The default rendering mechanism in Vue is client-side rendering (CSR), which means that the application’s HTML is generated by the browser after the JavaScript has been downloaded and executed. This approach provides a fast and interactive user experience but might not be ideal for SEO or initial page load speed.

Here’s how it works:

The CSR process is given below:

• The client (browser) requests the static files from the server when the user enters the URL into the browser.
• The server receives the request for the application pages from the browser.
• The server sends a minimal HTML page containing a reference to the JavaScript bundle.
• The browser receives both the HTML index file and the JavaScript bundle, after which it renders the views.
• The browser handles user routing. No request is made to the server for static files after the initial request. This is true unless the application uses lazy loading for certain components where the server provides only the components needed for the browser to render.

As seen in the steps discussed and the image above, the client does a lot of the heavy lifting when it comes to generating the user interface for the user, while the server only provides the raw materials required. This is beneficial for the ...