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.8k
Nuxt.jsが掲げる"Universal Vue.js Applications"とは何者か
Yosuke Ishikawa
October 04, 2017
Tweet
Share
More Decks by Yosuke Ishikawa
See All by Yosuke Ishikawa
効率的な開発手段として VRTを活用する
ishkawa
1
200
アプリを起動せずにアプリを開発して品質と生産性を上げる
ishkawa
0
4.3k
Achieving Testability in Presentation Layer
ishkawa
4
3.8k
Introducing Wire: Dependency Injection by Code Generator
ishkawa
12
1.3k
Declarative UICollectionView
ishkawa
28
8.2k
Static Dependency Injection by Code Generation
ishkawa
15
6.4k
実践クライアントサイドSwift
ishkawa
24
4.3k
JSON-RPC on APIKit
ishkawa
5
61k
RxSwiftは開発をどう変えたか?
ishkawa
12
4k
Other Decks in Programming
See All in Programming
メモリ不足との戦い〜大量データを扱うアプリでの実践例〜
kwzr
1
780
止められない医療アプリ、そっと Swift 6 へ
medley
1
110
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
160
AIで開発生産性を上げる個人とチームの取り組み
taniigo
0
130
WebエンジニアがSwiftをブラウザで動かすプレイグラウンドを作ってみた
ohmori_yusuke
0
170
CSC305 Lecture 03
javiergs
PRO
0
230
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
120
Pythonスレッドとは結局何なのか? CPython実装から見るNoGIL時代の変化
curekoshimizu
4
1.2k
PostgreSQLで手軽にDuckDBを使う!DuckDB&pg_duckdb入門/osk2025-duckdb
takahashiikki
1
240
開発者への寄付をアプリ内課金として実装する時の気の使いどころ
ski
0
340
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
170
フロントエンド開発に役立つクライアントプログラム共通のノウハウ / Universal client-side programming best practices for frontend development
nrslib
7
3.9k
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
185
22k
Writing Fast Ruby
sferik
629
62k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
A Tale of Four Properties
chriscoyier
160
23k
Balancing Empowerment & Direction
lara
4
680
Unsuck your backbone
ammeep
671
58k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
How to train your dragon (web standard)
notwaldorf
96
6.3k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
What's in a price? How to price your products and services
michaelherold
246
12k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
How to Think Like a Performance Engineer
csswizardry
27
2k
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
サーバーの動作はカスタマイズ可能 外れすぎない範囲で使うのが良さそう