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.7k
Nuxt.jsが掲げる"Universal Vue.js Applications"とは何者か
Yosuke Ishikawa
October 04, 2017
Tweet
Share
More Decks by Yosuke Ishikawa
See All by Yosuke Ishikawa
アプリを起動せずにアプリを開発して品質と生産性を上げる
ishkawa
0
4k
Achieving Testability in Presentation Layer
ishkawa
4
3.7k
Introducing Wire: Dependency Injection by Code Generator
ishkawa
12
1.3k
Declarative UICollectionView
ishkawa
28
8k
Static Dependency Injection by Code Generation
ishkawa
15
6.4k
実践クライアントサイドSwift
ishkawa
24
4.2k
JSON-RPC on APIKit
ishkawa
5
58k
RxSwiftは開発をどう変えたか?
ishkawa
12
3.9k
Swift + JSON-RPC
ishkawa
0
54k
Other Decks in Programming
See All in Programming
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
200
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
Team operations that are not burdened by SRE
kazatohiei
1
230
Result型で“失敗”を型にするPHPコードの書き方
kajitack
4
440
GoのGenericsによるslice操作との付き合い方
syumai
3
690
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
420
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
140
A2A プロトコルを試してみる
azukiazusa1
2
1.2k
Enterprise Web App. Development (2): Version Control Tool Training Ver. 5.1
knakagawa
1
120
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
110
Bytecode Manipulation 으로 생산성 높이기
bigstark
2
380
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
100
Featured
See All Featured
It's Worth the Effort
3n
185
28k
Practical Orchestrator
shlominoach
188
11k
Docker and Python
trallard
44
3.4k
Designing Experiences People Love
moore
142
24k
Agile that works and the tools we love
rasmusluckow
329
21k
Why You Should Never Use an ORM
jnunemaker
PRO
57
9.4k
Writing Fast Ruby
sferik
628
61k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
A designer walks into a library…
pauljervisheath
207
24k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
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
サーバーの動作はカスタマイズ可能 外れすぎない範囲で使うのが良さそう