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ではじめる サーバサイドレンダリング
Search
Takayuki
April 28, 2018
Technology
2
990
Nuxt.jsではじめる サーバサイドレンダリング
Takayuki
April 28, 2018
Tweet
Share
More Decks by Takayuki
See All by Takayuki
Laravel × Clean Architecture
bumptakayuki
0
330
エンジニアのキャリア論
bumptakayuki
0
200
地方カンファレンス主催のススメ
bumptakayuki
1
210
Laravelで敢えて試す脆弱性のある書き方
bumptakayuki
2
1.1k
地方でのPHPエンジニア採用って実際どうなの?
bumptakayuki
0
680
沖縄観光、名物を一挙紹介!
bumptakayuki
2
670
Laravel ShiftでLaravelのバージョンアップしてみた話
bumptakayuki
1
2.8k
flutterでイベントアプリを作ってみた
bumptakayuki
0
160
オフショア開発の辛みと学んだ事
bumptakayuki
0
400
Other Decks in Technology
See All in Technology
現場で効くClaude Code ─ 最新動向と企業導入
takaakikakei
1
240
ハードウェアとソフトウェアをつなぐ全てを内製している企業の E2E テストの作り方 / How to create E2E tests for a company that builds everything connecting hardware and software in-house
bitkey
PRO
1
130
DroidKaigi 2025 Androidエンジニアとしてのキャリア
mhidaka
2
130
roppongirb_20250911
igaiga
1
220
2025年夏 コーディングエージェントを統べる者
nwiizo
0
160
なぜSaaSがMCPサーバーをサービス提供するのか?
sansantech
PRO
8
2.8k
Agile PBL at New Grads Trainings
kawaguti
PRO
1
430
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
aoto
PRO
1
460
TS-S205_昨年対比2倍以上の機能追加を実現するデータ基盤プロジェクトでのAI活用について
kaz3284
1
130
ZOZOマッチのアーキテクチャと技術構成
zozotech
PRO
4
1.5k
Generative AI Japan 第一回生成AI実践研究会「AI駆動開発の現在地──ブレイクスルーの鍵を握るのはデータ領域」
shisyu_gaku
0
170
【初心者向け】ローカルLLMの色々な動かし方まとめ
aratako
7
3.4k
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
We Have a Design System, Now What?
morganepeng
53
7.8k
Site-Speed That Sticks
csswizardry
10
810
A designer walks into a library…
pauljervisheath
207
24k
A better future with KSS
kneath
239
17k
Transcript
Nuxt.jsではじめる サʔバサイドレンダリング 鈴木孝之 2018/04/27
"HFOEB ࣗݾհ αʔόαΠυϨϯμϦϯά͕ॏཁͳཧ༝ %&.0 /VYUKTͱ
0.ࣗݾհ ◆໊લ ླ ೭(Suzuki Takayuki) ◆ࣗݾհ ɾ1990ɺਆಸݝੜ·Εɻ ɾࣾձਓʹͳ͔ͬͯΒɺϓϩάϥϛϯάΛ࢝ΊΔɻ ɾ2015ʹϑϧεϐʔυʹೖࣾ͠ɺ2017ʹϑϦʔϥϯεΛͬͨޙʹ201711݄ʹԭೄͰىۀɻ ◆झຯ
ίεϓϨɺԻָϥΠϒɺϚϥιϯେձʹग़Δɺٿ؍ઓ ◆εΩϧ ɾPHP, Symfony2,CakePHP3,Laravel5, ɾJavaScript, backbone.js,Angular4
0.ձࣾհ ◆ձ໊ࣾ גࣜձࣾRe:Build ◆ॅॴ ԭೄݝԭೄࢢதԝ̍ஸ̍̒−̕ ◆ࣄۀ༰ ɾۀʹ͓͍ͯͷϑʔυϩεΛແ͘͢ ࣗࣾWEBαʔϏεͷاըɾ։ൃɻ ɾडୗ։ൃ ◆ΤϯδχΞͷಇ͖ํ
ϦϞʔτϫʔΫՄೳͳࣗ༝ͳಇ͖ํΛਪͯ͠·͢ʂ
0.ࣗݾհ ΪʔΫϋεͱɺओʹΤϯδχΞϓϩάϥ ϚʔΛ৬छͱ͢ΔਓɺWeb͕͖ͳਓͳͲ͕ ڞʹॅΉίϯηϓτܕγΣΞϋεͰ͢ʂ ΤϯδχΞͳͲ͕ଟ͍͜ͱ͔Βॅຽಉ࢜Ͱϓϩ άϥϛϯάΛڭ͑߹ͬͨΓ͠·͢ʂ
αʔόαΠυϨϯμϦϯά͕ॏཁͳཧ༝
ॳظԽʹཁ͢Δ࣌ؒ ɾॳظԽHTMLJSʹΑͬͯߏங͞ΕͨDOM͕ ϨϯμϦϯά͞ΕΔ͜ͱ ϨϯμϦϯάʹཁ͢Δ࣌ؒ ॳظԽྃʂ
Single Page Application(SPA)ॳظԽʹ͕͔͔࣌ؒΔ ɾJSͷϑΝΠϧαΠζ͕େ͖͍ͨΊ ɾJSͰDOMΛߏங͢ΔͨΊ ɹɾJSͷॲཧ͕ྃ͠ͳ͍ͱԿදࣔ͞Εͳ͍
ϨϯμϦϯάͷྫ ϨϯμϦϯάதϖʔδͷίϯςϯπ͕දࣔ͞Εͳ͍ɻ
ϨϯμϦϯάʹ͕͔͔࣌ؒΔͱɺͲ͏ͳΔ͔ʁ ɾ 3ඵҎ্͔͔Δϖʔδ͔Β͢Δɻ ɾ ύϑΥʔϚϯεʹෆຬΛ࣋ͬͨαΠτ࠶ͼར༻͠ͳ͍ɻ ɾ αΠτͷϩΠϠϦςΟʹ͓͍ͯදࣔΛॏཁࢹɻ ɾ ̍ඵͷΕͰ16%ͷސ٬ຬΛԼͤ͞Δɻ ࢀߟ:
https://blog.kissmetrics.com/loading-time/?wide=1
SEOʹ͓͚Δ՝ ɾSSRͰ͋ΕΫϩʔϥ͕શͳHTMLΛΔ͜ͱ͕Ͱ͖Δɻ·ͨɺSNSͷ OGPऔಘ͕͏·͍͔͘ͳ͍ɻ ɾGoogleͷΫϩʔϥͰ͢ΒɺΫϥΠΞϯταΠυͰมߋ͞ΕͨޙͷDOMΛ શʹัଊ͢Δ͜ͱͰ͖ͳ͍ɻ ɾ·ͨɺಉ༷ͷཧ༝ʹΑΓɺSNSͰΞϓϦέʔγϣϯͷϓϨϏϡʔͰϦ ϯΫ͢ΔέʔεͰɺSSRͰ͋ΕશͳHTMLΛϓϨϏϡʔͰ͖·͢ɻ ࢀߟ: https://www.youtube.com/watch?v=JlP5rBynK3E&feature=youtu.be
SPAͰSEOؔແ͍ྫ Pairs ϩάΠϯޙͷը໘͕SPA ཧը໘ͳͲ
WWW.SITE2MAX.PRO Free PowerPoint & KeyNote Templates DEMO DEMO
/VYUKTͱ
Nuxt.jsͱ Nuxt.js ͱϢχόʔαϧͳ Vue.js Ξϓ ϦέʔγϣϯΛߏங͢ΔͨΊͷϑϨʔ ϜϫʔΫͰ͢ɻ Nuxt.js αʔόʔαΠυϨϯμϦϯά
͢Δ Vue.js ΞϓϦέʔγϣϯͷ։ൃΛ ͬͱָ͘͢͠ΔͨΊʹඞཁͳઃఆΛɺ ͋Β͔͡Ίηοτ͍ͯ͠·͢ɻ
ओͳػೳ ɾVue ϑΝΠϧͰهड़Ͱ͖Δ͜ͱ ɾίʔυΛࣗಈతʹׂ͢Δ͜ͱ ɾαʔόʔαΠυϨϯμϦϯά ɾඇಉظσʔλΛϋϯυϦϯά͢ΔύϫϑϧͳϧʔςΟϯά ɾ੩తϑΝΠϧͷ৴ ɾES6/ES7 ͷτϥϯεύΠϨʔγϣϯ ɾJS
ͱ CSS ͷόϯυϧٴͼϛχϑΝΠ ɾHead ཁૉͷཧ ɾ։ൃϞʔυʹ͓͚ΔϗοτϦϩʔσΟϯά ɾSASS, LESS, Stylus ͳͲͷϓϦϓϩηοαͷαϙʔτ ɾHTTP/2 push headers ready ɾϞδϡʔϧߏͰ֦ுͰ͖Δ͜ͱ
routingͷઃఆͰ·ͳͯ͘ ࡁΉɻ componentͳͲͷओཁͳϩ δοΫͷ෦ͷ࣮ʹूத Ͱ͖Δ ͚ͬ͜͏ɺwebpackͷઃఆͱ ͔ཧʹ͕͔͔࣌ؒΓ͕ͪͩ ͕ɺͦ͜ΛলུͰ͖Δɻ PWAʹରԠ͢Δ͜ͱͰɺओʹ ࣍ͷΑ͏ͳϝϦοτ͕ੜ·Ε
·͢ɻ ɾΦϑϥΠϯͰӾཡՄೳ ɾϓογϡ௨ ɾΠϯετʔϧՄೳ pagesσΟϨΫτϦ ʹϑΝΠϧՃ͢Δ ͱࣗಈϧʔςΟϯά PWAಋೖ͕؆୯ʹͰ͖Δ 2.ϝϦοτɾಛ Webpack/Babelͷઃ ఆॻ͘ඞཁͳ͠ 2 ʙϝϦοτʙ 1 3
ॲཧͷྲྀΕ
Πϯετʔϧํ๏
ॻ͖ํ
Ϗϧυͷઃఆ
ॻ͖ํ
ॻ͖ํ
ॻ͖ํ ࣗಈͰroutingͯ͘͠ΕΔͷͰɺ componentͳͲͷओཁͳϩδοΫ ͷ෦ͷ࣮ʹूதͰ͖Δ
ॻ͖ํ
·ͱΊ
ᶃαʔόαΠυϨϯμϦϯάɺSPAͷॳظԽ ࣌ͷύϑΥʔϚϯεɺSEOͱ͍ͬͨ՝Λղܾ ͢Δɻ ᶄNuxt.jsΛ͏ͱ։ൃޮ্͕͕Δʂ ·ͱΊ
ࢀߟ ɾhttps://qiita.com/massa142/items/7de17b214cefb5b9a1d6 ɾhttps://inside.dmm.com/entry/2018/04/10/nuxt-firebase ɾhttps://www.webprofessional.jp/nuxt-js-universal-vue-js/