Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Nuxt.jsが掲げる"Universal Vue.js Applications"とは何者か
Search
Yosuke Ishikawa
October 04, 2017
Programming
10
2.6k
Nuxt.jsが掲げる"Universal Vue.js Applications"とは何者か
Yosuke Ishikawa
October 04, 2017
Tweet
Share
More Decks by Yosuke Ishikawa
See All by Yosuke Ishikawa
Achieving Testability in Presentation Layer
ishkawa
4
3.4k
Introducing Wire: Dependency Injection by Code Generator
ishkawa
12
1.1k
Declarative UICollectionView
ishkawa
28
7.6k
Static Dependency Injection by Code Generation
ishkawa
15
6k
実践クライアントサイドSwift
ishkawa
24
3.9k
JSON-RPC on APIKit
ishkawa
5
49k
RxSwiftは開発をどう変えたか?
ishkawa
12
3.6k
Swift + JSON-RPC
ishkawa
0
47k
アッテiOSの設計と開発フローの変遷
ishkawa
9
13k
Other Decks in Programming
See All in Programming
CSC307 Lecture 05
javiergs
PRO
0
210
ドメイン駆動設計の実践
masuda220
PRO
19
5.2k
CSC307 Lecture 11
javiergs
PRO
0
240
大規模マルチテナントを解決するYugabyteDBという選択肢
nnaka2992
1
250
小さな開発会社を作った理由
polidog
0
1.9k
スクラムマスターって孤独じゃないですか?
yoshitaroyoyo
1
140
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
100
TiDB Serverless ~理想のServerless DBを考える~
soso_15315
1
160
【Go言語】golangci-lintの使い方
tomo1227
0
280
生成AIをkintoneに連携してみた
hideg
0
230
CSC307 Lecture 09
javiergs
PRO
1
500
AWSでゲームサーバーを運用! Amazon GameLiftのお話
iriikeita
0
200
Featured
See All Featured
Happy Clients
brianwarren
94
6.6k
Navigating Team Friction
lara
181
13k
Documentation Writing (for coders)
carmenintech
63
4.2k
Large-scale JavaScript Application Architecture
addyosmani
506
110k
Rails Girls Zürich Keynote
gr2m
93
13k
10 Git Anti Patterns You Should be Aware of
lemiorhan
652
58k
It's Worth the Effort
3n
181
27k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
90
47k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
224
21k
The Power of CSS Pseudo Elements
geoffreycrofte
64
5.2k
Docker and Python
trallard
37
2.9k
Pencils Down: Stop Designing & Start Developing
hursman
118
11k
Transcript
Nuxt.js が掲げる "Universal Vue.js Applications" とは何者か
None
None
None
Universal Mode SPA Mode
Universal Mode ← こっち SPA Mode
None
None
わかるようでわからない
でも、使ってみたら理解できた
None
None
None
デベロッパーは1 つの Nuxt.js アプリ( ≒ Vue.js アプリ) を 開発するが...
SSR するサーバーも生成される
"Universal Vue.js Applications"
そういう感じか~
Vue.js のアプリと 生成されるサーバーの関係は?
例 ディレクトリ構造 → ルーティングに反映 asyncData() → サーバーサイドで実行
ルーティング
pages ├── index.vue └── items ├── _id.vue ├── create │
└── index.vue └── index.vue Nuxt.js アプリのディレクトリ構造
export function createRouter () { return new Router({ mode: 'history',
base: '/', (中略) routes: [ {path: "/", component: _d26d9516, name: " {path: "/items", component: _8ac95cea, nam {path: "/items/create", component: _4bfc3 {path: "/items/:id", component: _07563ab3 ] }) } 生成されたサーバーのルーティング
asyncData()
asyncData() 最初に取得するデータをSSR
... <script> export default { async asyncData ({ app })
{ const res = await app.axios.$get('/api/item return { items: res.items, nextCursor: res.nextCursor, } } } </script> Nuxt.js アプリの.vue ファイル
let asyncDatas = await Promise.all(Components.m let promises = [] if
(Component.options.asyncData && typeof Com let promise = promisify(Component.options.a (中略) promises.push(promise) } (中略) return Promise.all(promises) })) context.nuxt.data = asyncDatas.map(r => r[0] || で実行してdata にセット
要するに
Vue.js アプリを書いてたら SSR するサーバーが生成される
None
サーバーはNode.js
サーバーの動作はカスタマイズ可能 外れすぎない範囲で使うのが良さそう