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
360
エンジニアのキャリア論
bumptakayuki
0
200
地方カンファレンス主催のススメ
bumptakayuki
1
220
Laravelで敢えて試す脆弱性のある書き方
bumptakayuki
2
1.1k
地方でのPHPエンジニア採用って実際どうなの?
bumptakayuki
0
680
沖縄観光、名物を一挙紹介!
bumptakayuki
2
680
Laravel ShiftでLaravelのバージョンアップしてみた話
bumptakayuki
1
2.8k
flutterでイベントアプリを作ってみた
bumptakayuki
0
160
オフショア開発の辛みと学んだ事
bumptakayuki
0
400
Other Decks in Technology
See All in Technology
GA technologiesでのAI-Readyの取り組み@DataOps Night
yuto16
0
270
Oracle Cloud Infrastructure:2025年9月度サービス・アップデート
oracle4engineer
PRO
0
460
Flaky Testへの現実解をGoのプロポーザルから考える | Go Conference 2025
upamune
1
430
実装で解き明かす並行処理の歴史
zozotech
PRO
1
460
AWS 잘하는 개발자 되기 - AWS 시작하기: 클라우드 개념부터 IAM까지
kimjaewook
0
110
【Oracle Cloud ウェビナー】クラウド導入に「専用クラウド」という選択肢、Oracle AlloyとOCI Dedicated Region とは
oracle4engineer
PRO
3
110
Where will it converge?
ibknadedeji
0
190
『OCI で学ぶクラウドネイティブ 実践 × 理論ガイド』 書籍概要
oracle4engineer
PRO
1
110
[2025-09-30] Databricks Genie を利用した分析基盤とデータモデリングの IVRy の現在地
wxyzzz
0
490
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
findy_eventslides
1
500
関係性が駆動するアジャイル──GPTに人格を与えたら、対話を通してふりかえりを習慣化できた話
mhlyc
0
130
自作LLM Native GORM Pluginで実現する AI Agentバックテスト基盤構築
po3rin
2
270
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Thoughts on Productivity
jonyablonski
70
4.9k
BBQ
matthewcrist
89
9.8k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Side Projects
sachag
455
43k
How to train your dragon (web standard)
notwaldorf
96
6.3k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
How GitHub (no longer) Works
holman
315
140k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
How STYLIGHT went responsive
nonsquared
100
5.8k
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/