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.5k
Introducing Wire: Dependency Injection by Code Generator
ishkawa
12
1.2k
Declarative UICollectionView
ishkawa
28
7.6k
Static Dependency Injection by Code Generation
ishkawa
15
6k
実践クライアントサイドSwift
ishkawa
24
4k
JSON-RPC on APIKit
ishkawa
5
50k
RxSwiftは開発をどう変えたか?
ishkawa
12
3.6k
Swift + JSON-RPC
ishkawa
0
47k
アッテiOSの設計と開発フローの変遷
ishkawa
9
13k
Other Decks in Programming
See All in Programming
Architecture Decision Record (ADR)
nearme_tech
PRO
1
690
The Shape of a Service Object
inem
0
520
Hono・Prisma・AWSでGeoなAPI開発
nokonoko1203
5
680
LangChainの現在とv0.3にむけて
os1ma
4
920
The Sequel to a Dream of Ruby Parser's Grammar
ydah
1
220
Go1.23で入った errorsパッケージの小さなアプデ
kuro_kurorrr
2
390
Perl 5 OOP機構30年史 - Perl 5's OOP Mechanism over the past 30 years
moznion
0
250
いつか使える ObjectSpace / Maybe useful ObjectSpace
euglena1215
2
140
事業フェーズの変化に対応する 開発生産性向上のゼロイチ
masaygggg
0
200
Jakarta EE meets AI
ivargrimstad
1
500
実践!難読化ガイド
mitchan
0
200
Prolog入門
qnighy
4
1k
Featured
See All Featured
Navigating Team Friction
lara
183
13k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
43
2k
Large-scale JavaScript Application Architecture
addyosmani
508
110k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
401
65k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
41
6.5k
Optimizing for Happiness
mojombo
375
69k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
123
18k
Become a Pro
speakerdeck
PRO
22
4.9k
Code Review Best Practice
trishagee
62
16k
The Invisible Customer
myddelton
119
13k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
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
サーバーの動作はカスタマイズ可能 外れすぎない範囲で使うのが良さそう