When I started collecting information about SSR (server-side rendering) with Vue, I had to get pieces from different articles as well as the official documentation to get a complete understanding of the subject.
Here are some problems I found in these sources:
- A lot of assumptions about information that you should have, like Webpack configuration, the proper way to hook up Vue Router etc.
- Lacking certain important information and leaving some gaps for the reader to fill in.
- In the examples given, most don’t follow the standards and best practices provided by the official documentation.
The objective of this article is to provide all the information you may need to get SSR working with Vue Router, making an extra effort to avoid any gaps that may give you a headache later. I also try to respect all the Vue team’s recommendations.
Before jumping into the actual implementation, there are some main concepts that you need to understand:
- SSR involves creating a fully-loaded version of the app for the requested route on the server. Once that page is rendered on the client side, the client-side code takes ownership.
- You are going to need two entry building points for your app, one for the server and one for the client.
With that in mind, here’s what we will accomplish in this article:
- Install the needed dependencies
- Webpack configuration
- NPM build scripts
- Folder structure
- App configuration
- Setting up Vue Router
- Client entry point
- Server entry point
- Server configuration
Let’s hope this example brings some clarity to the subject!
Let’s go through the dependencies that we are going to have to install: