feat: set initial state and re-hydrate in prerender mode

src/index.js

@@ -12,6 +12,7 @@ import Note from './components/Note.vue'
 import Gist from './components/Gist.vue'
 import Loading from './components/Loading.vue'
 import ExternalLinkIcon from './components/icons/ExternalLinkIcon.vue'
+import {INITIAL_STATE_NAME} from './utils/constants'
 
 // Built-in plugins
 import i18nPlugin from './plugins/i18n'
@@ -73,8 +74,9 @@ class Docute {
 
   mount() {
     const {target} = store.getters
-    this.app.$mount(`#${target}`)
-    this.collectInstance()
+    // Force hydration when there's initial state
+    const hydrate = Boolean(window[INITIAL_STATE_NAME])
+    this.app.$mount(`#${target}`, hydrate)
     return this
   }
 
@@ -86,16 +88,6 @@ class Docute {
       plugin.extend(this.pluginApi)
     }
   }
-
-  /**
-   * Used in pre-render
-   * @private
-   */
-  collectInstance() {
-    if (typeof window !== 'undefined' && window.__DOCUTE_INSTANCE__) {
-      window.__DOCUTE_INSTANCE__ = this
-    }
-  }
 }
 
 Docute.version = __DOCUTE_VERSION__

src/store.js

@@ -10,9 +10,12 @@ import hooks from './hooks'
 import load from './utils/load'
 import prismLanguages from './utils/prismLanguages'
 import {defaultCssVariables, darkCssVariables} from './utils/cssVariables'
+import {INITIAL_STATE_NAME} from './utils/constants'
 
 Vue.use(Vuex)
 
+const initialState = window[INITIAL_STATE_NAME]
+
 const store = new Vuex.Store({
   state: {
     originalConfig: {},
@@ -23,7 +26,8 @@ const store = new Vuex.Store({
     },
     env: {},
     showSidebar: false,
-    fetchingFile: true
+    fetchingFile: true,
+    ...initialState
   },
 
   mutations: {

src/utils/constants.js

@@ -0,0 +1 @@
+export const INITIAL_STATE_NAME = '__DOCUTE_INITIAL_STATE__'

src/views/Home.vue

@@ -45,6 +45,7 @@ import SidebarMask from '../components/SidebarMask.vue'
 import SiteHeader from '../components/Header.vue'
 import PrevNextLinks from '../components/PrevNextLinks.vue'
 import EditLink from '../components/EditLink.vue'
+import {INITIAL_STATE_NAME} from '../utils/constants'
 import hooks from '../hooks'
 
 export default {
@@ -60,7 +61,9 @@ export default {
   },
 
   mounted() {
-    this.fetchFile(this.$route.path)
+    if (!window[INITIAL_STATE_NAME]) {
+      this.fetchFile(this.$route.path).then(this.setInitialState)
+    }
   },
 
   beforeRouteUpdate(to, from, next) {
@@ -149,6 +152,18 @@ export default {
           })
         }
       }
+    },
+
+    setInitialState() {
+      if (/(Prerender|jsdom|PhantomJS)/i.test(navigator.userAgent)) {
+        const script = document.createElement('script')
+        script.textContent = `window.${INITIAL_STATE_NAME} = ${JSON.stringify({
+          page: this.$store.state.page,
+          env: this.$store.state.env,
+          fetchingFile: false
+        })}`
+        document.head.appendChild(script)
+      }
     }
   }
 }