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
CSC509 Lecture 08
javiergs
PRO
0
110
PagerDuty を軸にした On-Call 構築と運用課題の解決 / PagerDuty Japan Community Meetup 4
horimislime
1
110
CSC509 Lecture 09
javiergs
PRO
0
110
CPython 인터프리터 구조 파헤치기 - PyCon Korea 24
kennethanceyer
0
240
JaSST 24 九州:ワークショップ(は除く)実践!マインドマップを活用したソフトウェアテスト+活用事例
satohiroyuki
0
260
EventSourcingの理想と現実
wenas
6
2.1k
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
210
Honoの来た道とこれから
yusukebe
19
3k
Outline View in SwiftUI
1024jp
1
120
Progressive Web Apps für Desktop und Mobile mit Angular (Hands-on)
christianliebel
PRO
0
110
ECSのサービス間通信 4つの方法を比較する 〜Canary,Blue/Greenも添えて〜
tkikuc
11
2.3k
Vue3の一歩踏み込んだパフォーマンスチューニング2024
hal_spidernight
3
3.1k
Featured
See All Featured
KATA
mclloyd
29
13k
Adopting Sorbet at Scale
ufuk
73
9k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Statistics for Hackers
jakevdp
796
220k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
Rails Girls Zürich Keynote
gr2m
93
13k
Testing 201, or: Great Expectations
jmmastey
38
7k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Bash Introduction
62gerente
608
210k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
Side Projects
sachag
452
42k
Why Our Code Smells
bkeepers
PRO
334
57k
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
サーバーの動作はカスタマイズ可能 外れすぎない範囲で使うのが良さそう