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
640
Laravel ShiftでLaravelのバージョンアップしてみた話
bumptakayuki
1
2.6k
flutterでイベントアプリを作ってみた
bumptakayuki
0
160
オフショア開発の辛みと学んだ事
bumptakayuki
0
390
Other Decks in Technology
See All in Technology
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
210
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
bengo4com
0
2k
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
2
7.9k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
50
20k
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.8k
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
130
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
flyamerican
1
170
Lazy application authentication with Tailscale
bluehatbrit
0
220
Operating Operator
shhnjk
1
590
OPENLOGI Company Profile
hr01
0
67k
関数型プログラミングで 「脳がバグる」を乗り越える
manabeai
1
190
Claude Code に プロジェクト管理やらせたみた
unson
6
4.2k
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Designing for humans not robots
tammielis
253
25k
4 Signs Your Business is Dying
shpigford
184
22k
Bash Introduction
62gerente
613
210k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Why Our Code Smells
bkeepers
PRO
336
57k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
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/