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 で SSR 対応する
Search
ショウノシオリ
January 19, 2019
Programming
1
2.2k
Nuxt.js で SSR 対応する
2019/1/19 v-kansai での発表スライドです。
Nuxt でSSRするのはそんなに難しくなかったよ〜というお話。
ショウノシオリ
January 19, 2019
Tweet
Share
More Decks by ショウノシオリ
See All by ショウノシオリ
Nuxt / Vue 開発でやりがちな 「読みづらい」「わかりづらい」コード
sshono1210
0
210
開発チームのリーダーとしてどうあるべきか?
sshono1210
3
1.2k
Nuxt.js のディレクトリ
sshono1210
0
2.9k
array_merge と array_push の違いについて
sshono1210
0
510
全くデザインを勉強したことのないエンジニアが「なるほどデザイン」を読んで少しだけ勉強した話
sshono1210
0
220
Vue.js の methods と computed
sshono1210
0
100
すぐに使える ES2015 の基本構文3つ
sshono1210
0
72
肌で感じたディレクションとマネジメント
sshono1210
0
64
Vue.jsで遊んでみよう
sshono1210
0
81
Other Decks in Programming
See All in Programming
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
2
200
GPUを計算資源として使おう!
primenumber
1
250
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
200
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
180
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
13k
Porting a visionOS App to Android XR
akkeylab
0
680
テスト駆動Kaggle
isax1015
1
620
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
680
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
2
15k
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
530
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
A better future with KSS
kneath
238
17k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Unsuck your backbone
ammeep
671
58k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
282
13k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
340
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
990
Raft: Consensus for Rubyists
vanstee
140
7k
Agile that works and the tools we love
rasmusluckow
329
21k
Building Applications with DynamoDB
mza
95
6.5k
Transcript
Nuxt.js で SSR 対応をする 2019.1.19 v-kansai Vue.js/Nuxt.js meetup #2
ショウノシオリ @shosho_egg 株式会社 chatbox (Web制作、IT系イベントの運営・支援 etc) フロント&バックエンドエンジニア Vue.js・Nuxt.js / PHP(Laravel)
PHPカンファレンス関西 2017&2018 実行委員長
Nuxt.js で SSR 対応をすることになったきっかけ
「Laravel JP Conference のスポンサー詳細ページ を SSR対応にしてください」 (Nuxt.js で作ったサイト)
“ 「SSRって聞いたことあるけど、何?」 「なぜするの?」 「どうやってするの?」
と私が実際に疑問に思ったことを中心に 学んだことなどを紹介しようと思います
「SSRって何?」 「なぜするの?」
SSRとは? ▷ サーバーサイドでレンダリングすること ◦ サーバー上で Vue.js を HTML にする、とか ▷
メリット ◦ ブラウザ以外の場所(サーバー)で HTML を生成することができ る ◦ ブラウザに表示される前にHTMLにデータを埋め込むことができ るため、SEO的に強かったりする ▷ デメリット ◦ 実装が面倒 ▪ ブラウザで使える関数がサーバー上では使えなかったりする ので、その辺を考慮しなければならない
Nuxt.js の SSR 対応 ▷ Nuxt.js には SSR の機能が備わっている ◦
Nuxt.js は SSR機能、vuex、vue-router などアプリケーション構築 に便利なツールが備わった Vue.js の FW (Vue.js で SSR するには vue-server-render を入れる必要有) ◦ 今回試したのは generate の SSR
「どうやってするの?」
今回 SSR 対応 するページ ◦ pages/sponsor/_name.vue ◦ コーディングのみ完了 ◦ スポンサー情報は
API で取得 ◦ SSR 対応するとスポンサー情報がSEO的に◎
やることは2つ 1. 動的URLページを静的ページ化する 2. ページコンポーネントで SSR する
1. 動的URLページを静的ページ化する ▷ Nuxt.js はファイル名を _ 始まりにすると、複数のURLで同じ コンポーネントを表示させることができる ◦ 今回のファイルは
pages/sponsor/_name.vue ◦ _ name.vue のパラメータは $route.param.name でとれる ▷ ただし、_ 始まりのファイルは generate 時に書き出されない ◦ generate は実際に HTML ファイルに変換して書き出す作業を行う ◦ _ で始まるファイルを HTML に書き出したい場合は設定が必要
▷ nuxt.config.js の generate プロパティ下にある routes オプ ションに配列で設定 設定方法 //nuxt.config.js
module.exports = { generate: { routes: [ ‘/sponsor/株式会社A’, ‘/sponsor/株式会社B’, ‘/sponsor/株式会社C’, ] } }
▷ 動的なパラメータが必要な場合は Promise を返す関数を使う ことができる ◦ callback + 関数 でもOK
import axios from “axios” module.exports = { generate: { async routes() { const path = [] const request = axios.create({ baseURL: ‘https://...’ }) const {data} = await request(“/sponsors”) for (let plan of data.sponsor_plans { for (let sponsor of plan.sponsors) { path.push(`/sponsor/${sponsor.name}`) } } return path } } }
2. ページコンポーネントで SSR する ▷ SSR せず、mounted() や created() でデータをとってくると、
ブラウザで読み込まれた段階でデータは空っぽになってし まっている ▷ ページコンポーネント内で SSR するには asyncData / fetch が使える ◦ 両者ができることは同じだが、readability の観点から使い分けるの がよい ◦ vuex にデータを入れるときは fetch、ページコンポーネントでデータ を使うときは asyncData
▷ ページコンポーネントで SSR しない場合 ◦ generate した場合、mounted() は呼び出されないので data() がその
まま出力される
▷ ページコンポーネントで asyncData を使って SSR する場合 ◦ generate時に asyncData が呼び出されるので、data()
は上書きされる
asyncData / fetch ▷ ページコンポーネントがロードされる前に呼び出される ▷ SSRやページ遷移前にも呼び出される ▷ 第一引数に context
オブジェクトを受け取ることができる ▷ ページコンポーネントが初期化される前に呼び出されるた め、asyncData/fetch の中で this は使えない
実際に使ってみる //sponsor/_name.vue <script> export default { name: ‘sponsor’, async asyncData({store,
route}) { const [sponsor] = await Promise.all([ store.dispatch(“fetchSponsorData”, route.params.name), ]) return {sponsor} } } </script> ▷ 今回はページコンポーネント内でデータを使うため asyncData を使用 ◦ context オブジェクトからは store、route などが取れる
完成!! スポンサー詳細画面の SSR 対応が完了しました
「Nuxt.js で SSR 対応してみた」感想 ▷ Nuxt.js で作ったサイトであれば SSR 対応をするハードル はあまり高くない
◦ 作ったサイトやサービスをより良くしていくためにも、必要であれば 取り入れるのが良さそう ▷ ただし、面倒くささは確かにある ◦ 必要なページコンポーネントでだけ実装するのが良さそう
参考 ▷ https://speakerdeck.com/bumptakayuki/nuxt-dot-js dehazimeru-sabasaidorendaringu?slide=8 ▷ https://zen-web.net/blog/nuxtjs-asyncdata-fetch/ ▷ https://ja.nuxtjs.org/api/configuration-generate/#ge nerate-%E3%83%97%E3%83%AD%E3%83%91%E3 %83%86%E3%82%A3
Thanks! Any questions? You can find me at: @username
[email protected]