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
370
エンジニアのキャリア論
bumptakayuki
1
210
地方カンファレンス主催のススメ
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
20251014_Pythonを実務で徹底的に使いこなした話
ippei0923
0
190
Claude Code Subagents 再入門 ~cc-sddの実装で学んだこと~
gotalab555
3
750
技育祭2025【秋】 企業ピッチ/登壇資料(高橋 悟生)
hacobu
PRO
0
100
AWS IoT 超入門 2025
hattori
0
340
プロポーザルのコツ ~ Kaigi on Rails 2025 初参加で3名の登壇を実現 ~
naro143
1
240
綺麗なデータマートをつくろう_データ整備を前向きに考える会 / Let's create clean data mart
brainpadpr
3
510
能登半島地震において デジタルができたこと・できなかったこと
ditccsugii
0
190
HR Force における DWH の併用事例 ~ サービス基盤としての BigQuery / 分析基盤としての Snowflake ~@Cross Data Platforms Meetup #2「BigQueryと愉快な仲間たち」
ryo_suzuki
0
210
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing Hiroshima 2025 Edition
tomzoh
0
140
20251010_HCCJP_AdaptiveCloudUpdates
sdosamut
0
120
フレームワークを意識させないワークショップづくり
keigosuda
0
180
React19.2のuseEffectEventを追う
maguroalternative
0
200
Featured
See All Featured
Done Done
chrislema
185
16k
Raft: Consensus for Rubyists
vanstee
140
7.1k
RailsConf 2023
tenderlove
30
1.2k
Mobile First: as difficult as doing things right
swwweet
224
10k
Designing Experiences People Love
moore
142
24k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Speed Design
sergeychernyshev
32
1.2k
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/