Learning Vue

Chapter 13. Server-Side Rendering with Vue

In the previous chapter, we learned how to set up our Vue application’s complete CI/CD pipeline. We also learned how to deploy our application using Netlify for production. Our application is now ready for users to access via the web. With that, we have almost finished our journey with learning Vue. This chapter will explore the other aspect of using Vue, the server-side rendering and static site generation with Nuxt.js.

Client-Side Rendering in Vue

By default, Vue applications are for client-side rendering, with a placeholder index.html file, JavaScript file (usually compiled in chunks by Vite for performance optimization), and other files like CSS, icons, images, etc., for a complete UI experience. In the initial load, the browser sends a request to the server for the index.html file. In return, the server will deliver the original placeholder file (often with a single element with a unique id selector app for the Vue engine to mount the app instance, and a script tag pointing to the required JavaScript file containing the main code. Once the browser receives the HTML file, it will start parsing and request additional resources, such as the desired main.js file, then execute it to render the rest of the content accordingly (Figure 13-1).

Figure 13-1. Flow of rendering a client-side Vue application

From this point on, the application ...