Static Site Generation and Server Side Rendering

Many websites built with Vue are Single Page Applications (SPAs). If our app is a SPA, users who visit our website would usually receive a blank HTML file with no content. The content is generated on the client-side and replaced dynamically when a user navigates between pages. In most Vue applications, browser navigation is hijacked and managed by a router library, such as Vue Router. Unfortunately, Single Page Applications are not SEO friendly. Not every crawler can handle them correctly. Therefore, to make a Vue app SEO friendly, a page sent from the server to the client shouldn’t be blank, but already filled with content. Static site generation and server-side rendering are possible solutions for that. Now, we might ask, what’s the difference between these two?

Static Site Generation (SSG)

If we use Vue-CLI, we have a build step that bundles and optimizes our project files. However, with SSG, the build step also generates HTML files for each page in our project so that when the user tries to visit our website, one of the files generated in advance is served.