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.7k
Static Dependency Injection by Code Generation
ishkawa
15
6.1k
実践クライアントサイドSwift
ishkawa
24
4k
JSON-RPC on APIKit
ishkawa
5
51k
RxSwiftは開発をどう変えたか?
ishkawa
12
3.7k
Swift + JSON-RPC
ishkawa
0
48k
アッテiOSの設計と開発フローの変遷
ishkawa
9
13k
Other Decks in Programming
See All in Programming
Jakarta EE meets AI
ivargrimstad
0
600
Less waste, more joy, and a lot more green: How Quarkus makes Java better
hollycummins
0
100
macOS でできる リアルタイム動画像処理
biacco42
9
2.4k
AI時代におけるSRE、 あるいはエンジニアの生存戦略
pyama86
6
1.2k
よくできたテンプレート言語として TypeScript + JSX を利用する試み / Using TypeScript + JSX outside of Web Frontend #TSKaigiKansai
izumin5210
6
1.7k
Jakarta EE meets AI
ivargrimstad
0
130
GitHub Actionsのキャッシュと手を挙げることの大切さとそれに必要なこと
satoshi256kbyte
5
430
初めてDefinitelyTypedにPRを出した話
syumai
0
420
みんなでプロポーザルを書いてみた
yuriko1211
0
280
「今のプロジェクトいろいろ大変なんですよ、app/services とかもあって……」/After Kaigi on Rails 2024 LT Night
junk0612
5
2.2k
Jakarta EE meets AI
ivargrimstad
0
670
Realtime API 入門
riofujimon
0
150
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
44
2.2k
Code Review Best Practice
trishagee
64
17k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
A designer walks into a library…
pauljervisheath
204
24k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
0
100
Producing Creativity
orderedlist
PRO
341
39k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
16
2.1k
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
サーバーの動作はカスタマイズ可能 外れすぎない範囲で使うのが良さそう