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
0
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
130
開発チームのリーダーとしてどうあるべきか?
sshono1210
2
1k
Nuxt.js のディレクトリ
sshono1210
0
2.7k
array_merge と array_push の違いについて
sshono1210
0
300
全くデザインを勉強したことのないエンジニアが「なるほどデザイン」を読んで少しだけ勉強した話
sshono1210
0
170
Vue.js の methods と computed
sshono1210
0
78
すぐに使える ES2015 の基本構文3つ
sshono1210
0
41
肌で感じたディレクションとマネジメント
sshono1210
0
32
Vue.jsで遊んでみよう
sshono1210
0
38
Other Decks in Programming
See All in Programming
Go1.22からの疑似乱数生成器について/go-122-pseudo-random-generator
convto
1
160
incrementalモデルの理解を深める
ikkimiyazaki
2
640
WinUI 3デモ - "CommunityToolkit.Mvvm"NuGetパッケージ編
andrewkeepcoding
0
130
Open Source Swiftc Workshop
kitasuke
1
180
Cloud RunとCloud PubSubでサーバレスなデータ基盤2024 with Terraform / Cloud Run and PubSub with Terraform
shinyorke
7
1.9k
phpunit/php-code-coverageって何をしてるんだ #phperkaigi
o0h
PRO
2
220
object-oriented-conference-2024
fuwasegu
6
1.8k
品質が高いコードって何?Rev2.1
ickx
1
490
IntelliJ IDEA を知らなかった 自分に教えたい小ネタ集 / IntelliJ IDEA Hints for My Past Self
mackey0225
3
170
Material 3で Material 2ぽい見た目にする
numeroanddev
2
250
Dockerで始めるAWS Lambda開発
stutkhd0709
13
2.5k
品質とスピードを両立: TypeScriptの柔軟な型システムをバックエンドで活用する
kosui
4
870
Featured
See All Featured
KATA
mclloyd
14
11k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
67
38k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
57
14k
The Art of Programming - Codeland 2020
erikaheidi
40
12k
Producing Creativity
orderedlist
PRO
335
39k
Infographics Made Easy
chrislema
237
18k
Principles of Awesome APIs and How to Build Them.
keavy
119
16k
What’s in a name? Adding method to the madness
productmarketing
PRO
14
2.6k
Rails Girls Zürich Keynote
gr2m
91
13k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
355
22k
Faster Mobile Websites
deanohume
296
30k
Side Projects
sachag
451
41k
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]