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
280
エンジニアのキャリア論
bumptakayuki
0
190
地方カンファレンス主催のススメ
bumptakayuki
1
200
Laravelで敢えて試す脆弱性のある書き方
bumptakayuki
2
1.1k
地方でのPHPエンジニア採用って実際どうなの?
bumptakayuki
0
650
沖縄観光、名物を一挙紹介!
bumptakayuki
2
650
Laravel ShiftでLaravelのバージョンアップしてみた話
bumptakayuki
1
2.6k
flutterでイベントアプリを作ってみた
bumptakayuki
0
160
オフショア開発の辛みと学んだ事
bumptakayuki
0
390
Other Decks in Technology
See All in Technology
マルチプロダクト環境におけるSREの役割 / SRE NEXT 2025 lunch session
sugamasao
1
730
united airlines ™®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedhelp
1
470
TLSから見るSREの未来
atpons
2
310
無理しない AI 活用サービス / #jazug
koudaiii
0
100
VS CodeとGitHub Copilotで爆速開発!アップデートの波に乗るおさらい会 / Rapid Development with VS Code and GitHub Copilot: Catch the Latest Wave
yamachu
3
460
OpenTelemetryセマンティック規約の恩恵とMackerel APMにおける活用例 / SRE NEXT 2025
mackerelio
3
2k
SRE不在の開発チームが障害対応と 向き合った100日間 / 100 days dealing with issues without SREs
shin1988
2
2.1k
全部AI、全員Cursor、ドキュメント駆動開発 〜DevinやGeminiも添えて〜
rinchsan
10
5.1k
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing
tomzoh
2
120
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
Autify Company Deck
autifyhq
2
44k
ソフトウェアQAがハードウェアの人になったの
mineo_matsuya
3
200
Featured
See All Featured
Producing Creativity
orderedlist
PRO
346
40k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
970
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
A better future with KSS
kneath
238
17k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Being A Developer After 40
akosma
90
590k
Six Lessons from altMBA
skipperchong
28
3.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Making Projects Easy
brettharned
116
6.3k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Unsuck your backbone
ammeep
671
58k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
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/