Vue.js 2.0 で自社プロダクトを SPA + SSR 化した話
15 likes21,319 views
2017.05.27 の 初夏の JavaScript 祭 in mixi でお話した時のスライドです。
![404ページのデザイン欲しい
// router.js
[
{ path: '/', name: 'top', component: top },
...
{ path: '*', name: 'not-found', component: notFound }
]](https://image.slidesharecdn.com/reveal-170527074344/85/Vue-js-2-0-SPA-SSR-24-320.jpg)
![PC/SP用エントリーポイントをそれぞれ用意
// webpack.config.client.js
entry: {
'polyfills': [path.join(..., 'app/entry/polyfills.js')],
'vendor': [path.join(..., 'app/entry/vendor.js')],
'app.pc': [path.join(..., 'app/entry/pc/client-entry.js')],
'app.sp': [path.join(..., 'app/entry/sp/client-entry.js')]
},
// webpack.config.server.js
entry: {
'server-bundle.pc': path.join(..., 'app/entry/pc/server-entry.js'),
'server-bundle.sp': path.join(..., 'app/entry/sp/server-entry.js')
}](https://image.slidesharecdn.com/reveal-170527074344/85/Vue-js-2-0-SPA-SSR-32-320.jpg)
![テンプレートも2つ
// webpack.config.client.js
new HTMLPlugin({
template: path.join(..., 'templates/pc.html'),
filename: 'index.pc.html',
excludeChunks: ['app.sp']
}),
new HTMLPlugin({
template: path.join(..., 'templates/sp.html'),
filename: 'index.sp.html',
excludeChunks: ['app.pc']
}),](https://image.slidesharecdn.com/reveal-170527074344/85/Vue-js-2-0-SPA-SSR-33-320.jpg)
![ExpressでUA判定して起動するレンダラを切り替え
// server.js
const useragent = require('express-useragent');
...
app.use(useragent.express());
app.get('*', (req, res) => {
...
const device = (req.useragent.isMobile) ? 'sp' : 'pc';
...
renderer[device].renderToStream(context)...
}](https://image.slidesharecdn.com/reveal-170527074344/85/Vue-js-2-0-SPA-SSR-35-320.jpg)
![export default {
name: 'App',
metaInfo: {
title: METAINFO.title,
titleTemplate: METAINFO.titleTemplate,
meta: [
{
vmid: 'og:title',
name: 'og:title',
content: METAINFO.title
},
{
vmid: 'description',
name: 'description',
content: METAINFO.description
}
...
]
}
}](https://image.slidesharecdn.com/reveal-170527074344/85/Vue-js-2-0-SPA-SSR-46-320.jpg)
More Related Content
What's hot (20)
Similar to Vue.js 2.0 で自社プロダクトを SPA + SSR 化した話 (20)
Recently uploaded (7)
Vue.js 2.0 で自社プロダクトを SPA + SSR 化した話
- 1. 初夏のJavaScript 祭in mixi Vue.js 2.0 で自社プロダクトを SPA + SSR 化した話
- 11. 構成 (全体)
- 12. 構成 (Web)
- 13. 前提知识
- 16. 地味に悩んだポイント集
- 18. Q: SSR は誰がやる?
- 21. Q: 404 ハンドリング
- 23. if (err && err.code === 404) { res.status(404).end('404 | Page Not Found') }
- 24. 404ページのデザイン欲しい // router.js [ { path: '/', name: 'top', component: top }, ... { path: '*', name: 'not-found', component: notFound } ]
- 25. // server.js const termRoute = (context.state.route.name === 'not-found'); if (termRoute) res.status(404);
- 26. ルータにマッチするけど404の時は? // router.js { path: '/comics/tag/:id', name: 'tag-archive', component: tagArchive },
- 27. APIリクエスト時に、メインクエリを設定 // preFetch const options = { isMainQuery: (key === mainQueryKey) }
- 28. メインクエリのAPIレスポンスが 200じゃなかったらstateにエラーをセット // action.js if (result.status === 200) { commit(mutation, { key, result: result.data }); } else if (options.isMainQuery) { commit(types.SET_STATUS, { key: type, value: {} }); commit(types.SET_STATUS, { key: 'error', value: result.status // 404 }); }
- 29. Expressサーバで、コンテキストを通じて stateのエラーからステータスを打つ // server.js const termState = (context.state.error); // 404 | 50x if (termState) res.status(context.state.error);
- 30. ちょっとイケてないけど 対象Viewコンポーネント内でnotfoundを表示させた <div :key="`tag-archives-${id}-${currentPage}`"> <div v-if="isLoading" class="l-root"> <screen-spinner></screen-spinner> </div> <content-not-found v-else-if="status === 404"></content-not-found> <template v-else="v-else"> ... </template> </div>
- 32. PC/SP用エントリーポイントをそれぞれ用意 // webpack.config.client.js entry: { 'polyfills': [path.join(..., 'app/entry/polyfills.js')], 'vendor': [path.join(..., 'app/entry/vendor.js')], 'app.pc': [path.join(..., 'app/entry/pc/client-entry.js')], 'app.sp': [path.join(..., 'app/entry/sp/client-entry.js')] }, // webpack.config.server.js entry: { 'server-bundle.pc': path.join(..., 'app/entry/pc/server-entry.js'), 'server-bundle.sp': path.join(..., 'app/entry/sp/server-entry.js') }
- 33. テンプレートも2つ // webpack.config.client.js new HTMLPlugin({ template: path.join(..., 'templates/pc.html'), filename: 'index.pc.html', excludeChunks: ['app.sp'] }), new HTMLPlugin({ template: path.join(..., 'templates/sp.html'), filename: 'index.sp.html', excludeChunks: ['app.pc'] }),
- 34. createRendererでレンダラを2つ作成 // server.js const bundle = { pc: fs.readFileSync(resolve('./dist/js/server-bundle.pc.js'), 'utf-8'), sp: fs.readFileSync(resolve('./dist/js/server-bundle.sp.js'), 'utf-8') } const template = { pc: fs.readFileSync(resolve('./dist/index.pc.html'), 'utf-8'), sp: fs.readFileSync(resolve('./dist/index.sp.html'), 'utf-8') } renderer = { pc: createRenderer(bundle.pc, template.pc), sp: createRenderer(bundle.sp, template.sp) };
- 35. ExpressでUA判定して起動するレンダラを切り替え // server.js const useragent = require('express-useragent'); ... app.use(useragent.express()); app.get('*', (req, res) => { ... const device = (req.useragent.isMobile) ? 'sp' : 'pc'; ... renderer[device].renderToStream(context)... }
- 37. 别の方法を考え中
- 39. Q: 共通処理どうする?
- 40. vuejs/vue-class-component もともとTypeScriptで書けるようにするため Classでコンポーネントを定義できる 継承は非対応だが、Decoratorと組み合わせる
- 41. import Vue from 'vue' import Component from 'vue-class-component' @Component({ props: { propMessage: String } }) export default class App extends Vue { // initial data msg = 123 // use prop values for initial data helloMsg = 'Hello, ' + this.propMessage // lifecycle hook mounted () { this.greet() } ... }
- 42. import { createDecorator } from 'vue-class-component'; export const Options = createDecorator((options) => { Object.assign(options, { ... watch: { // call again the method if the route changes '$route': 'routeUpdated' } }; });
- 43. 使い方は君しだい!
- 46. export default { name: 'App', metaInfo: { title: METAINFO.title, titleTemplate: METAINFO.titleTemplate, meta: [ { vmid: 'og:title', name: 'og:title', content: METAINFO.title }, { vmid: 'description', name: 'description', content: METAINFO.description } ... ] } }
- 51. Q: 広告
- 54. Q: メモリリーク
- 55. 起こしてた
- 57. 所感
- 64. ありがとうございました!