Server Side Rendering with Vue.js 3

Summary

In this tutorial, the YouTuber dives into Vue 3's server-side rendering capabilities using the raw API. The goal is to create a Vue 3 application with the Vue CLI, render it on a server, and explore concepts with tools like Express and Webpack. The script guides through setting up an Express server, configuring Webpack for SSR, and using Vue's new APIs for SSR apps and rendering to string. The process involves building the app for Node.js, handling static files, and integrating the server-rendered HTML with client-side JavaScript, culminating in a fully server-rendered Vue 3 application.

Takeaways

• 😀 The video is a tutorial on experimenting with Vue 3's server-side rendering (SSR) features using the raw API.
• 🛠️ The goal is to create a Vue 3 application with the Vue CLI and then render it on a server using Express and Webpack.
• 📝 The presenter emphasizes focusing on concepts rather than building a complete SSR solution.
• 💻 The process starts by setting up an Express server and creating a basic server.js file to handle HTTP requests and responses.
• 📥 The tutorial includes installing necessary packages like Express and Webpack Node Externals.
• 🔧 Configuration of Webpack is detailed, including setting the target to Node.js and adjusting the output library target.
• 📝 Use of Webpack Manifest Plugin is highlighted to track emitted files, which is crucial for SSR.
• 🚫 Disabling certain Webpack optimizations like code splitting and compression for SSR is discussed.
• 🔄 The presenter shows how to modify the Vue CLI's webpack configuration for SSR by setting environment variables and using an allow list.
• 🌐 The video covers using Vue 3's new APIs for SSR, such as `createSSRApp` and `renderToString`.
• 🔧 The tutorial explains how to adapt the main.js file for SSR by creating a `main.server.js` and adjusting the Vue CLI configuration.
• 🔄 The importance of serving static files like CSS from the Express server and using the manifest to locate them is covered.

Q & A

What is the main goal of the video script?

The main goal of the video script is to create a Vue 3 application using the Vue 3 CLI and then render that app on a server using server-side rendering (SSR) with the help of Express, Webpack, and Vue 3's SSR features.

What is the first step in setting up the server for SSR in Vue 3?

The first step is to install Express using npm i express and then create a new file called server.js to start setting up the server using Express.

Why is a new build required for SSR in Vue 3?

A new build is required for SSR because the application needs to be built in a way that it's compatible with Node.js, which involves setting specific Webpack configurations for server-side rendering.

What is the purpose of creating a view config.js file in the context of SSR?

The view config.js file is created to customize the Webpack configuration for SSR, including setting the target to Node.js, defining the library target, and using plugins like webpack-manifest-plugin to manage the emitted files.

What is the role of the webpack-manifest-plugin in the SSR build process?

The webpack-manifest-plugin is used to create a manifest file that lists all the emitted files by the Webpack build process, which is instrumental for referencing the correct files in the server-side rendering setup.

Why is the 'ssr' environment variable set in the Webpack configuration?

The 'ssr' environment variable is set to indicate that the Webpack build is for server-side rendering. It helps in conditionally applying SSR-specific configurations.

What changes are made to the Webpack configuration to disable browser-specific optimizations?

To disable browser-specific optimizations, the splitChunks and minimize options are set to false in the Webpack configuration, as these are not needed for Node.js server consumption.

How is the Vue 3 application prepared for SSR in the server.js file?

The Vue 3 application is prepared for SSR by using the createSSRApp function from Vue, which is then used to create an SSR application instance. The renderToString function from vue-server-renderer is used to render the app content as a string.

What modifications are made to the main.js file to accommodate SSR?

The main.js file is modified by removing the createApp and mount logic and instead exporting the app instance directly. This is because the SSR setup uses createSSRApp, which is incompatible with the createApp and mount approach.

How are static files like CSS and JavaScript handled in the Express server for SSR?

Static files are handled by using the express.static middleware in the Express server, which serves the files from the 'dist' folder for each file type (images, JavaScript, CSS, etc.).

What is the final step to verify that the SSR setup is working correctly?

The final step is to start the server and check the browser for the rendered application. Additionally, inspecting the network activity in the browser's developer tools to ensure that the server is sending the correct HTML response.