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.3k
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
220
開発チームのリーダーとしてどうあるべきか?
sshono1210
3
1.2k
Nuxt.js のディレクトリ
sshono1210
0
2.9k
array_merge と array_push の違いについて
sshono1210
0
530
全くデザインを勉強したことのないエンジニアが「なるほどデザイン」を読んで少しだけ勉強した話
sshono1210
0
230
Vue.js の methods と computed
sshono1210
0
110
すぐに使える ES2015 の基本構文3つ
sshono1210
0
77
肌で感じたディレクションとマネジメント
sshono1210
0
69
Vue.jsで遊んでみよう
sshono1210
0
85
Other Decks in Programming
See All in Programming
Cache Me If You Can
ryunen344
1
370
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
0
360
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
500
Design Foundational Data Engineering Observability
sucitw
3
190
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
170
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
160
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
100
TDD 実践ミニトーク
contour_gara
1
290
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.4k
ソフトウェアテスト徹底指南書の紹介
goyoki
1
150
個人軟體時代
ethanhuang13
0
320
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
takahashiikki
1
100
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Navigating Team Friction
lara
189
15k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Faster Mobile Websites
deanohume
309
31k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
520
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Speed Design
sergeychernyshev
32
1.1k
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]