VueJS comes with a lot of SSR built in. Sometimes SSR can seem a little mystical but at its heart it is really these things

a. Compile and render your component and it’s children
b. Generating your styles and initializing store if you use vuex
c. Assembling all of that
d. Taking care of sourcemap stuff
e. Responding in the way the client expects

This code lives in vue/src/server and the function that coordinates all of this lives in `create-bundle-renderer.js`. It exports a function called createBundleRendererCreator that does the following things.

NOTE: bundle is a generic term for a specification for mapping file names to js and source maps

1. Creates a String or Stream renderer based on what is specified
2. Load the bundle (it can be a file reference, string or object generated by VueSSRRendererf)
3. Create an function that can use that bundle to create a component given a context
4. return an object that can use the renderer from 1 to render a String or Stream

With this in place vue-server-renderer is able to use this to generate and serve your components.

a. render.js => utility functions for generating and cache a component
b. vue-ssr-html-stream.js HTMLStream => Takes care of assembling vuex, head and css
-> pulls template from index.html and reassemble
-> Creates __INITIAL_STATE__ in _flush method
-> Adds css form vue-stle-loader
-> adds head data from server-renderer
c. create-renderer.js

VueJS will follow this algorithm when attempting client side hydration

1. It will always attempt to hydrate when the root node has data-server-rendered attribute.
2. In dev mode, if it failed to hydrate there will be a warning. If nothing happens, it worked.
3. In prod mode, it assumes the markup is correct.