more tweaks

server.js

 process.env.VUE_ENV = 'server'
+const isProd = process.env.NODE_ENV === 'production'
 
 const fs = require('fs')
 const path = require('path')
+const resolve = file => path.resolve(__dirname, file)
 const express = require('express')
 const favicon = require('serve-favicon')
 const serialize = require('serialize-javascript')
@@ -11,11 +13,10 @@ const app = express()
 
 // parse index.html template
 const html = (() => {
-  const template = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf-8')
+  const template = fs.readFileSync(resolve('./index.html'), 'utf-8')
   const i = template.indexOf('{{ APP }}')
-  const style = process.env.NODE_ENV === 'production'
-    ? '<link rel="stylesheet" href="/dist/styles.css">'
-    : ''
+  // styles are injected dynamically via vue-style-loader in development
+  const style = isProd ? '<link rel="stylesheet" href="/dist/styles.css">' : ''
   return {
     head: template.slice(0, i).replace('{{ STYLE }}', style),
     tail: template.slice(i + '{{ APP }}'.length)
@@ -24,18 +25,18 @@ const html = (() => {
 
 // setup the server renderer, depending on dev/prod environment
 let renderer
-if (process.env.NODE_ENV !== 'production') {
+if (isProd) {
+  // create server renderer from real fs
+  const bundlePath = resolve('./dist/server-bundle.js')
+  renderer = createBundleRenderer(fs.readFileSync(bundlePath, 'utf-8'))
+} else {
   require('./build/setup-dev-server')(app, bundle => {
     renderer = createBundleRenderer(bundle)
   })
-} else {
-  // create server renderer from real fs
-  const bundlePath = path.resolve(__dirname, './dist/server-bundle.js')
-  renderer = createBundleRenderer(fs.readFileSync(bundlePath, 'utf-8'))
 }
 
-app.use('/dist', express.static(path.resolve(__dirname, './dist')))
-app.use(favicon(path.resolve(__dirname, './src/assets/logo.png')))
+app.use('/dist', express.static(resolve('./dist')))
+app.use(favicon(resolve('./src/assets/logo.png')))
 
 app.get('*', (req, res) => {
   var s = Date.now()

src/client-entry.js

 require('es6-promise').polyfill()
+import { app, store } from './app'
 
-import { app } from './app'
+// prime the store with server-initialized state
+store.replaceState(window.__INITIAL_STATE__)
 
 app.$mount('#app')

src/server-entry.js

 import { app, router, store } from './app'
 
+const isDev = process.env.NODE_ENV !== 'production'
+
 export default context => {
   // set router's location
   router.push(context.url)
   // call prefetch hooks on components matched by the route
-  const s = Date.now()
+  const s = isDev && Date.now()
   return Promise.all(router.getMatchedComponents().map(component => {
     if (component.prefetch) {
       return component.prefetch(store)
     }
   })).then(() => {
-    console.log(`data pre-fetch: ${Date.now() - s}ms`)
+    isDev && console.log(`data pre-fetch: ${Date.now() - s}ms`)
     // set initial store on context
     // the request handler will inline the state in the HTML response.
     context.initialState = store.state

src/store/index.js

@@ -4,17 +4,12 @@ import { watchTopIds, fetchTopIds, fetchItems } from './api'
 
 Vue.use(Vuex)
 
-const inBrowser = typeof window !== 'undefined'
-
-// if in browser, use pre-fetched state injected by SSR
-const state = (inBrowser && window.__INITIAL_STATE__) || {
-  storiesPerPage: 20,
-  topStoryIds: [],
-  items: {}
-}
-
 const store = new Vuex.Store({
-  state,
+  state: {
+    storiesPerPage: 20,
+    topStoryIds: [],
+    items: {}
+  },
 
   actions: {
     FETCH_TOP_IDS: ({ commit }) => {
@@ -50,7 +45,7 @@ const store = new Vuex.Store({
 })
 
 // watch for realtime top IDs updates on the client
-if (inBrowser) {
+if (typeof window !== 'undefined') {
   watchTopIds(ids => {
     store.commit('RECEIVE_TOP_IDS', { ids })
     store.dispatch('FETCH_NEWS')