iT邦幫忙

第 11 屆 iThome 鐵人賽
DAY 19
0
Modern Web

VueJS 從前端到後端系列 第 19 篇

為何我不用 SSR？ Day 18

11th鐵人賽 javascript vuejs vue.js
3086 瀏覽

  • 分享至 

  • xImage
    •  

部落格同步刊登 [IT 鐵人賽] 為何我不用 SSR？ Day 18

昨天提到了關於 SEO 的狀況，那麼，我們是不是使用 SSR 就能解決那些問題？關於這件事情我還是持保留態度。我們今天會帶大家來看一下 Vue 的 SSR 是怎麼運作的。

至於為何我沒有採用，沒有為什麼，因為我不會用啊（啊哈哈哈哈）

SSR 要如何開始？

SSR 的全名為 Server Side Render，顧名思義，就是先在伺服器端渲染的意思。那麼，跟原本使用 JavaScript 前端渲染，到底為何又要牽扯到後端？最主要的目的還是為了解決 SEO 的問題，而其他的事情大概是連帶的一些好處。

比起使用預先渲染，或是別人幫我渲染，對於 SSR 來說，他的好處多半是你自己可以控制所需要渲染的區塊，以及最終渲染的結果來做後續處理。對於 Vue 來說，爾或是各種前端渲染框架，這樣的作法可以讓你不用寫兩次程式碼，然後一次就能搞定（理想狀況下）。

Vue.js Server-Side Rendering Guide

官方有些先決條件必須要留意：

  • vue & vue-server-renderer 2.3.0+
  • vue-router 2.5.0+
  • vue-loader 12.0.0+ & vue-style-loader 3.0.0+

滿足了以上這些條件之後，我們就可以開始準備使用 SSR 的工作。但是在開始之前，有些事情還是必須要跟大家說明一下。SSR 並不是萬靈丹，他只是提供了比單純前端渲染，對於 SEO 更友善，且對於內容呈現的效率更好一點的方式，其他就沒有了。缺點倒也是不少，對於各位影響比較大的，多數在於許多第三方套件，並不一定能完全支援 SSR 的架構，所以這一點必須自己去衡量。

再者，如果你想要支援 SSR，你所撰寫的程式碼會跟平常有一點不一樣。官方也有提及，你的程式碼必須是所謂的通用程式碼（ Universal Code ），差異在於，當我們使用伺服器端渲染你的程式碼時，當你用了 window 或是 document 這一類 瀏覽器端 才會有的全域變數時，在 NodeJS 執行過程中，就會拋出錯誤。

請記得，因為 SSR 是在 伺服器端 運作，所以，所有關於 瀏覽器端 的事情，對他來說都是未知的東西，因此，倘若你，或是你所使用的第三方套件當中，有使用瀏覽器端的專屬操作的時候，那麼你的 SSR 就會因此而中斷。所以，你就必須想辦法替換，或是在這個區塊避開 SSR 的運作。

結構更動

首先，在使用 SSR 之前，有幾個項目是必須要注意的：

  • 預設入口依舊為 main.js ，但是他不做 $mount 。
  • main.js 需要提供一個建立 App 的函式，提供後續使用。
  • 需要額外建立兩個入口檔案，用以區分前端與後端渲染：
    • entry-client.js 給前端用的檔案。
    • entry-server.js 給後端用的檔案。
  • 你的所有程式碼必須符合通用程式碼規範，連同你所使用的套件也是。除非，你的套件在後端上不會用到。
  • 準備一台 NodeJS 來幫你做後端渲染，例如 Express 或 Koa。

首先我們來看 main.js 會變成什麼樣子，這邊盡量精簡程式碼，主要讓你們方便理解為主：

import Vue from 'vue'
import Vuex from 'vuex'
import Router from 'vue-router'
import App from './App.vue'

Vue.use(Vuex)

Vue.config.productionTip = false

export function createApp() {
  const router = new Router({
    mode: 'history',
    routes: [
      {
        path: '/hello',
        name: 'Hello',
        component: () => import('@/components/Hello.vue')
      }
    ]
  })

  const app = new Vue({
    router,
    render: h => h(App)
  });
  return { app, router };
}

原本的 new Vue 不見了，取而代之的是一個建立 App 的函式 createApp()，然後就沒有然後了。

接著我們要提供兩個入口檔案，分別給前後端使用，以下是 entry-client.js 的部分：

import { createApp } from './main'
const { app, router } = createApp()

router.onReady(() => {
  app.$mount("#app")
})

這裡是 entry-server.js 的部分：

import { createApp } from './main'

export default context => {
  return new Promise((resolve, reject) => {
    const { app, router } = createApp()
    router.push(context.url)
    router.onReady(() => {
      resolve(app)
    }, reject)
  })
}

你會發現我有使用 Router，是的，如果你不要用也可以，這裡會提及，是因為 Router 在 SSR 的部分有幾個地方需要注意，所以我直接使用 Router 的範例給大家做參考。再者，如果你真的做要簡單的 SPA （ Single Page Application ） 的話，jQuery 就很好用了， 不要學人家用什麼 Vue 而且還用 SSR 你不覺得奇怪我都覺得很奇怪。

至於為何要提及 Router 這個部分，你留意到我的 Router 是使用懶加載了嗎？是的，當我們使用 SSR 的時候，建議在 Router 的部分使用懶加載操作，一方面可以減低客戶端在初始化的時間，也能有效降低伺服器的壓力。

然後這樣就可以跑了嗎？ 當然不行。 我們還有不少設定檔需要跟著做調整，而且還 真的不少 ，所以，我說那個 醬汁 設定檔呢？我們以 vue.config.js 來看（注意！前方高能！）

const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')
const nodeExternals = require('webpack-node-externals')
const webpack = require('webpack')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const path = require('path')
const resolve = file => path.resolve(__dirname, file)

// 正式環境或是開發環境
const isProd = process.env.NODE_ENV === 'production'
// 用環境變數來區隔建立的目標。
const TARGET_NODE = process.env.BUILD_TARGET === 'node'
// 一個是伺服器端，一個是客戶端。
const target = TARGET_NODE ? 'server' : 'client'

module.exports = {
  publicPath: '/',
  assetsDir: 'static',
  css: {
    extract: true,
    sourceMap: !isProd
  },
  devServer: {
    headers: { 'Access-Control-Allow-Origin': '*' },
    disableHostCheck: true
  },
  productionSourceMap: !isProd,
  transpileDependencies: [],
  configureWebpack: config => ({
    entry: `./src/entry-${target}.js`,
    target: TARGET_NODE ? 'node' : 'web',
    node: TARGET_NODE ? undefined : false,
    output: {
      libraryTarget: TARGET_NODE ? 'commonjs2' : undefined
    },
    externals: TARGET_NODE
      ? nodeExternals({
        whitelist: [/\.css$/, /\?vue&type=style/]
      })
      : undefined,
    optimization: {
      splitChunks: TARGET_NODE ? false : undefined
    },
    plugins: [
      TARGET_NODE ? new VueSSRServerPlugin() : new VueSSRClientPlugin(),
      new webpack.DefinePlugin({
        'process.env.VUE_ENV': `'${target}'`,
        'process.env.NODE_DEPLOY': `'${process.env.NODE_DEPLOY}'`
      })
    ].concat(
      !isProd
        ? []
        : new CopyWebpackPlugin([
          {
            from: resolve('./server'),
            to: resolve('./dist/server'),
            toType: 'dir',
            ignore: [
              '.DS_Store'
            ]
          },
          {
            from: resolve('./package.json'),
            to: resolve('./dist')
          },
          {
            from: resolve('./yarn.lock'),
            to: resolve('./dist')
          },
          {
            from: resolve('./package-lock.json'),
            to: resolve('./dist')
          }
        ])
    )
  }),
  chainWebpack: config => {
    if (TARGET_NODE) {
      const isExtracting = config.plugins.has('extract-css')
      if (isExtracting) {
        const langs = ['css', 'postcss', 'scss', 'sass', 'less', 'stylus']
        const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
        for (const lang of langs) {
          for (const type of types) {
            const rule = config.module.rule(lang).oneOf(type)
            rule.uses.delete('extract-css-loader')
            rule
              .use('vue-style')
              .loader('vue-style-loader')
              .before('css-loader')
          }
        }
        config.plugins.delete('extract-css')
      }

      config.module
        .rule('vue')
        .use('cache-loader')
        .tap(options => {
          // Change cache directory for server-side
          options.cacheIdentifier += '-server'
          options.cacheDirectory += '-server'
          return options
        })
    }
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        if (TARGET_NODE) {
          options.cacheIdentifier += '-server'
          options.cacheDirectory += '-server'
        }
        options.optimizeSSR = TARGET_NODE
        return options
      })
    if (TARGET_NODE) {
      config.plugins.delete('hmr')
    }
  }
}

第一次執行

上述設定都好了之後，你可以試著跑跑看：

NODE_ENV=production BUILD_TARGET=node yarn build

https://ithelp.ithome.com.tw/upload/images/20190920/2000143362gmwcfUGw.png

你會收到兩個警告，一個是 server 資料夾不存在，另一個是 package-lock.json 不存在。不過沒關係，由於我們是使用 yarn 所以 package-lock.json 不存在可以忽略，或是你乾脆把 vue.congif.js 裡面拷貝這個檔案的設定拿掉也可以。

至於 server 我們後續會繼續提到，他主要是放置我們 NodeJS 的服務器設定的地方，例如你要使用 Express 或是 Koa，相關的執行檔案會放在這裡面。

https://ithelp.ithome.com.tw/upload/images/20190920/20001433TBn2aQzCdT.png

接著我們跑一下非伺服器端，也就是前端渲染的建置：

NODE_ENV=production yarn build --no-clean

請注意，後者執行的必須要加上 --no-clean 的參數，不然你會把之前 dist/ 的東西清除。

https://ithelp.ithome.com.tw/upload/images/20190920/20001433hOTi8ecvyL.png

https://ithelp.ithome.com.tw/upload/images/20190920/20001433eOdlujhKUT.png

這是我們第一次執行建置，是不是能跑我們還不知道，你會發現我們總共多出了兩個檔案：

  • vue-ssr-server-bundle.json
  • vue-ssr-client-manifest.json

這兩個檔案，其實之後是要餵給 NodeJS 的服務使用的，這個時候，我們可以來看看 server 裡面需要什麼東西。首先，我們需要一個 js 檔案來執行服務，我們這邊採用 Koa 來當作網頁伺服的服務提供，所以，我們建立好 server 資料夾後，可以建立一個 index.js 來撰寫程式碼。

詳細內容我就不貼出來了，這邊就片段的介紹執行的部分。

// 寫個變數來判斷是正式環境還是開發環境。
const isProd = process.env.NODE_ENV === 'production'

// 讀取 index 樣版檔案。
const template = fs.readFileSync(resolve('./index.template.html'), 'utf-8')

// 這是建立伺服器端元件的工具。
const { createBundleRenderer } = require('vue-server-renderer')

// 把剛剛的檔案讀取進來
const bundle = require("../vue-ssr-server-bundle.json")
const clientManifest = require("../vue-ssr-client-manifest.json")

然後關於 Koa 的部分就不多著墨，我們先把靜態檔案路徑的地方搞定，

app.use(mount('/static', koaStatic(resolve('../static'))))

接著，我們做一個簡單的 async 函式來幫我們處理 SSR 的請求，

async function ssrRequestHandle(ctx, next) {
  ctx.set('Content-Type', 'text/html')
  const context = {
    title: 'SSR PAGE TITLE',
    description: '',
    keywords: '',
    ssrHeadAddInfo: '',
    url: ctx.url,
    cookies: ctx.cookie || {},
    userAgent: ctx.header['user-agent']
  }

  try {
    ctx.body = await renderer.renderToString(context)
  } catch (err) {
    handleError(ctx, err)
  }
}

當中的 handleError 是處理例外錯誤的地方，你可以自由發揮。最後我們把這個 ssrRequestHandle 丟去給 Koa 使用。

app.use(async (ctx, next) => {
  await ssrRequestHandle(ctx, next)
})

請注意！我們這邊並沒有判斷所謂的 特定使用者頁面 ，換句話說，有些不適合做 SSR 的頁面你必須要在這邊就先過濾掉。不然，你可能會發現，例如，使用者登入後，畫面跟其他使用者好像長得差不多，然後資料可能也一樣之類的狀況。

接著，我們需要在 server 資料夾，放上一個 index.template.html 來讓他當作樣版使用，

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>{{ title }}</title>
    <meta name="description" content="{{ description }}">
    <meta name="keywords" content="{{ keywords }}"> {{{ ssrHeadAddInfo }}}
  </head>
  <body data-server-rendered-page="true">
    <!--vue-ssr-outlet-->
  </body>
</html>

請注意，這個文件中有 <!--vue-ssr-outlet--> 請不要忽略，他是 Vue SSR 套件用來將資料注入的地方，如果你拿掉了，會有錯誤。

Using a Page Template

然後我們可以把 Koa 跑起來看一下，

node dist/server/index.js

https://ithelp.ithome.com.tw/upload/images/20190920/20001433ciXdIvl05r.png

https://ithelp.ithome.com.tw/upload/images/20190920/20001433ZzDqvXLUhg.png

我們上面有提過了，對於使用 SSR 的部分，不能使用瀏覽器方面的變數，所以你就會像這個樣子出現了錯誤。我們把資訊修正過之後，你就可以看到正常渲染的頁面了。

https://ithelp.ithome.com.tw/upload/images/20190920/20001433HZ4lbYWe1n.png

https://ithelp.ithome.com.tw/upload/images/20190920/20001433hcu4B7SLbQ.png

你會發現 HelloKitty 被呼叫了兩次，原因是 favicon.ico 因為找不到檔案的關係，所以他就直接再次去呼叫 index.html，所以 Koa 就很乖的再次幫你渲染一次了。不過這個靜態檔案的問題，你可以用 Koa 的套件去解決，我們這邊就不多著墨：

https://github.com/koajs/favicon

然後我們剛剛不是有使用 Router 嗎？我們設定了一個叫做 Hello 的頁面，我們現在切換到那個頁面看看：

https://ithelp.ithome.com.tw/upload/images/20190920/200014338NFnycA0zs.png

看起來運作正常，但是你會發現，欸？我的 <meta> 與 title 怎麼好像沒改變？是的，這個部分你需要自己製作工具來連帶更新 TDK（ Title, Description, Keyword ）。

更新頁面資料

那麼，我們要怎麼更新畫面上的資料呢？首先，我們的 index.template.html 已經有先放好了 TDK 與其他擴充的變數（ ssrHeadAddInfo ），我以當我們在使用伺服器端渲染時，我們的元件，特別是 Router 底下的元件，必須要能夠去更新 TDK 才行。

官方文件有提及這一點：

Logic Collocation with Components

所以你有 serverPrefetch 這個方法可以用，對了，上述文件不要覺得是英文的很難懂，因為你若是切到中文，不好意思，我等一下講的東西，中文資料都沒有。

serverPrefetch 是伺服器渲染專用的方法，他必須要回傳一個 Prmoise 物件，在擁有此方法的物件中，該物件會等待這個方法完成後，才會進行渲染的動作。

export default {
  name: 'Hello',
  components: {
  },
  data () {
    return {
      foo: '爽 2'
    }
  },
  serverPrefetch () {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve()
      }, 3000)
    })
  },
  mounted () {
    console.log('Hello mounted')
  }
}

如果我們這麼做，那我們直接在 Hello 頁面重新整理的話，他會等 3 秒之後，才會將頁面返回。也就是說，我們在這邊可以用來取得物件。然後，有一個雷點在這裡：

serverPrefetch 雖然可以使用 this ，但是你無法直接更改元件內的數值，例如，你想把上述的 foo: '爽 2' ，透過 serverPrefetch 來改成 foo: '爽 100' 是沒有用的。

再說一次，這樣改是沒有用的！請搭配 Vuex 來操作這些事情。

好的，現在你知道了 serverPrefetch 這件事情，那麼我們要怎麼更新 TDK 呢？我們在 Vue 這個物件當中，有一個屬性叫做 $ssrContext，他代表了幾件事情：

  1. 可替換你在 index.template.html 裡面的變數。
  2. 你需要在 server/index.js 對於 ssrRequestHandle 的函式做修改。
  3. 他只能在伺服器端運作。
  4. 所以你的 entry-server.js 拿到的 context 也是從 Koa 進去的。
  5. 從前端看這個屬性，會永遠都是 undefined。

https://ithelp.ithome.com.tw/upload/images/20190920/20001433vFIgwFfXE2.png

所以，我們剛剛如果要換 TDK 的話，可以這樣做：

export default {
  name: 'Hello',
  components: {
  },
  data () {
    return {
      foo: '爽 2'
    }
  },
  serverPrefetch () {
    this.$ssrContext.title = 'SSR HELLO PAGE'
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve()
      }, 3000)
    })
  },
  mounted () {
    console.log('Hello mounted')
  }
}

我們的 $ssrContext 其實來源是上面的 Koa 的設定：

async function ssrRequestHandle(ctx, next) {
  ctx.set('Content-Type', 'text/html')
  const context = {
    title: 'SSR PAGE TITLE',
    description: '',
    keywords: '',
    ssrHeadAddInfo: '',
    url: ctx.url,
    cookies: ctx.cookie || {},
    userAgent: ctx.header['user-agent']
  }

  try {
    ctx.body = await renderer.renderToString(context)
  } catch (err) {
    handleError(ctx, err)
  }
}

這樣你應該知道你可以設定什麼東西了。所以剛剛的例子裡面，我們就可以把網頁的 title 修改成 SSR HELLO PAGE 的標題了。

https://ithelp.ithome.com.tw/upload/images/20190920/20001433Fuodjergba.png

搭配 Vuex

剛剛提到你無法直接修改元件中的變數，所以，你還是得把 Vuex 拿進來使用，操作方式跟一般的 Vuex 沒有太大的差異，差別只在於，你的元件與伺服器之間，必須要先把儲存的事情做好，這樣才能正確的顯示資料。

所以我們改一下 main.js 加入 Vuex 的套件，然後我們寫一個簡單的資料：

import Vue from 'vue'
import Vuex from 'vuex'
import Router from 'vue-router'
import App from './App.vue'

Vue.use(Router)
Vue.use(Vuex)

Vue.config.productionTip = false

export function createApp() {
  const router = new Router({
    mode: 'history',
    routes: [
      {
        path: '/hello',
        name: 'Hello',
        component: () => import('@/components/Hello.vue')
      }
    ]
  })

  const store = new Vuex.Store({
    state: {
      age: 18
    },
    mutations: {
      incrementAge: function (state) {
        state.age++
      }
    },
    actions: {
      ohMyAge: function ({ commit }) {
        commit('incrementAge')
      }
    },
    getters: {
      getAge: function (state) {
        return state.age
      }
    }
  })

  const app = new Vue({
    router,
    store,
    render: h => h(App)
  });
  return { app, router, store };
}

接著我們需要更換 entry-server.js 的部分：

import { createApp } from './main'

export default context => {
  return new Promise((resolve, reject) => {
    const { app, router, store } = createApp()
    router.push(context.url)
    router.onReady(() => {
      // 加入這件事情
      context.rendered = () => {
        context.state = store.state
      }
      resolve(app)
    }, reject)
  })
}

最後修改 entry-client.js 的地方：

import { createApp } from './main'
const { app, router, store } = createApp()

if (window.__INITIAL_STATE__) {
  store.replaceState(window.__INITIAL_STATE__)
}

router.onReady(() => {
  app.$mount('#app')
})

以上的修改在官方文件也是有說明：

Final State Injection

最後我們將應用程式重新建置，然後跑一次試試看：

https://ithelp.ithome.com.tw/upload/images/20190920/20001433YMqhvreAMW.png

然後你就會看到資料從原本的 18 變成了 19，那麼我們 Hello.vue 做了什麼事情呢？

import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'Hello',
  components: {
  },
  data () {
  },
  serverPrefetch () {
    return new Promise((resolve, reject) => {
      this.$ssrContext.title = 'SSR HELLO PAGE'
      setTimeout(() => {
        // 從這邊呼叫 Vuex Actions
        this.ohMyAge()
        resolve()
      }, 3000)
    })
  },
  mounted () {
    console.log('Hello mounted')
  },
  computed: {
    changeFoo () {
      return '爽 ' + this.getAge
    },
    ...mapGetters({
      getAge: 'getAge'
    })
  },
  methods: {
    ...mapActions({
      ohMyAge: 'ohMyAge'
    })
  }
}

然後我們會想說 serverPrefetch 是從伺服器後端所操作，那麼，當我使用前端的 Router 的時候，原本的 this.ohMyAge() 就不會被呼叫到了。所以，我們還是需要把這件事情，放到 mounted 或是 beforeRouteEnter 裡面，這樣對於前端渲染的動作才會有動作。

我們先來看看結果：

https://ithelp.ithome.com.tw/upload/images/20190920/20001433czAnJJXIQT.png

有沒有發現哪裡怪怪的？是的，原本的 18 突然變成 21 了，這個狀況在 Hello 頁面重新整理之後，就會發生這種怪事。照理來說，我們在 Vuex.Store 的預設值是 18，進入了 Hello 頁面，理論上應該是 19，但是，由於我們調整了 mounted 或 routeEnterBefore，所以，原本的 ohMyAge() 會 再次 被呼叫一次。

那麼，理論上應該是 20 才對，為何是 21 呢？

我把 console.log() 埋到 Vuex 當中，印出來看看發生了什麼事情：

https://ithelp.ithome.com.tw/upload/images/20190920/20001433wtGZwnLHkI.png

有沒有一種超想罵髒話的感覺，有沒有！有沒有啊！

我們再來看看伺服器端的渲染，印出了什麼東西來。

https://ithelp.ithome.com.tw/upload/images/20190920/20001433K6CdTLNeHI.png

然後我們換到 mounted 這個生命週期的勾子，再試一次：

https://ithelp.ithome.com.tw/upload/images/20190920/20001433JMnsMPohDm.png

有沒有一種超想罵髒話的感覺，有沒有！有沒有啊！

剛剛有提到過，mounted 是屬於 前端渲染 的事件，所以，他並不會在後端跑一次。而剛剛的 beforeRouteEnter 會在 後端先跑一次 ，然後 前端再跑一次 ，所以你會得到 21 的這個結果。但是，其實 20 應該也不對，照理說我們需要的是剛剛的 19 ，其他應該都不是正確答案。

那麼，我們要怎麼確保這些事情只做一次呢？首先，我們可以告訴他，這個呼叫 Actions 的動作是從那邊來的，舉例來說：

export default {
  // 前略...
  serverPrefetch () {
    return new Promise((resolve, reject) => {
      this.$ssrContext.title = 'SSR HELLO PAGE'
      setTimeout(() => {
        this.setSource('server')
        this.ohMyAge()
        resolve()
      }, 3000)
    })
  },
  computed () {
    needInitialize () {
      return this.getSource === 'client' || this.getSoruce === null
    },
    ...mapGetters({
      getAge: 'getAge',
      getSource: 'getSource'
    })
  },
  mounted () {
    console.log('Hello mounted')
    if (this.needInitialize) {
      this.ohMyAge()
    }
  },
  methods: {
    ...mapActions({
      ohMyAge: 'ohMyAge'
    }),
    ...mapMutations({
      setSource: 'setSource'
    })
  },
  // 後略...
}

然後我們在 Vue.Store 裡面動個手腳，

const store = new Vuex.Store({
    state: {
      age: 18,
      source: null
    },
    mutations: {
      incrementAge: function (state) {
        state.age += 1
      },
      setSource: function (state, source) {
        state.source = source
      }
    },
    actions: {
      ohMyAge: function ({ commit }) {
        commit('incrementAge')
      }
    },
    getters: {
      getAge: function (state) {
        return state.age
      },
      getSource: function (state) {
        return state.source
      }
    }
  })

所以，這樣你最後會拿到的結果就是 19 了。

有沒有一種超想罵髒話的感覺，有沒有！有沒有啊！

最後加起來再來一次。這裡有一個專案都寫好了，可以參考一下：

https://github.com/ediaos/vue-cli3-ssr-project

我不保證上面的專案你一定可以跑，因為我的設定也跟他有點不太一樣。至於會踩到什麼雷點？可能每個人的環境不同，所以多少會有點差異。這個專案裡面的諸多設定，大概都是從大家回報的問題中，慢慢累積而來的。

雷點

SSR app with async components, 500s when using component styles
normalizeFile get undefined file
Vuejs SSR Issues
SSR build says “document is not defined” for a Vuejs cli3 SPA app using a Vue cli3 library
Stackoverflow tagged vue-ssr

我沒有不敬的意思。

小結

對於 SSR 的部分，大抵上只要有大框架，基本上不會有太大問題，只是必須要留意你的程式碼必須要能前後端間容。且必須要留意哪些生命週期會在前端還是後端還是都會執行。

  • beforeRouterEnter
  • beforeCreate
  • created

以上生命週期，在重新整理路由時，前後端都會執行，還會不會有，這就留給你自己了（燦笑）。我就跟你說我不會用了，所以如果有什麼奇怪的問題，我可以回答的我會盡量回答，不能回答的我可以幫你 Google 一下。而且，其實為了要跑這個東西，前端 NodeJS 後端 API 跑 PHP，其實挺累的。

ITHome 鐵人賽同步刊登 為何我不用 SSR？ Day 18


上一篇
SEO 的問題 Day 17
下一篇
後端的 Template Layout Day 19
系列文
VueJS 從前端到後端 共 31 篇
  1. 27
    大型資料載入實例與狀況 Large of DOMs Day 26
  2. 28
    大型資料載入實例與狀況 Deep watch Day 27
  3. 29
    Vanilla JS 與 Vue 的生命週期 Day 28
  4. 30
    下一個 VueJS 3.0 Day 29
  5. 31
    在 Vue 之後的事情，還會有什麼？ Day 30
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22077 篇
完賽人數
594 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙