Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Nuxt.js で非同期なデータを取得するときのポイント
Kosuke Ogawa
June 05, 2020
Technology
0
130
Nuxt.js で非同期なデータを取得するときのポイント
2020.6.5【増枠】Webナイト宮崎 Vol.9 ~てげオンライン LT で学びたい~ - connpass
https://tegehoge.connpass.com/event/176369/
Kosuke Ogawa
June 05, 2020
Tweet
Share
More Decks by Kosuke Ogawa
See All by Kosuke Ogawa
koogawa
1
95
koogawa
1
150
koogawa
0
820
koogawa
0
240
koogawa
1
200
koogawa
1
170
koogawa
1
130
koogawa
4
5.3k
koogawa
3
590
Other Decks in Technology
See All in Technology
nihonbuson
2
1.7k
line_developers
PRO
0
1.9k
bufferings
2
3.1k
cygames
1
360
pinboro
1
1.5k
kanaugust
PRO
0
160
kaga
0
190
comucal
PRO
0
420
kawaguti
0
110
yukitodate
2
320
oracle4engineer
1
220
mmarukaw
0
1.4k
Featured
See All Featured
reverentgeek
27
1.9k
holman
288
130k
tanoku
258
24k
pauljervisheath
196
15k
rasmusluckow
318
18k
nonsquared
81
3.3k
philhawksworth
190
17k
pedronauck
652
110k
samanthasiow
56
6.3k
andyhume
62
3.3k
chriscoyier
780
240k
sachag
446
36k
Transcript
KOSUKE OGAWA 2020 WebφΠτٶ࡚ Nuxt.js ͰඇಉظͳσʔλΛऔಘ ͢Δ ͱ͖ͷϙΠϯτ
ࣗݾհ w 0HBXB,PTVLFʢ!LPPHBXBʣ w Ξϧגࣜձࣾʢ౦ژʣ w ٶ࡚͔ΒϑϧϦϞʔτ w J04 4XJGU
"OESPJE ,PUMJO 5ZQF4DSJQU $44 7VFKT /VYUKTͳͲ w ͯ͛΄͛ॴଐ
͜ΜͳαΠτΛߟ͑ͯΈΔ
None
• asyncData - ϨϯμϦϯά͞ΕΔલʹ֎෦API͔Βͷσʔλ Λऔಘ͢Δ • mounted - ϨϯμϦϯά͞ΕͨޙʹݺΕΔ Nuxt.js
ϥΠϑαΠΫϧ
࣮ݧ1ɿ 3ඵɺ2ඵɺ5ඵ͔͔Δ ॲཧΛͯ͢ asyncData ʹॻ͍ͨ߹ɻ
None
• asyncData - ϨϯμϦϯά͞ΕΔલʹ֎෦API͔Βͷσʔλ Λऔಘ͢Δ • mounted - ϨϯμϦϯά͞ΕͨޙʹݺΕΔ Nuxt.js
ϥΠϑαΠΫϧ
࣮ݧ2ɿ 3ඵ͔͔ΔॲཧΛ asyncData ʹɺ 2ඵɺ5ඵ͔͔ΔॲཧΛ mounted ʹॻ͍ͨ߹ɻ
None
• asyncData - ϨϯμϦϯά͞ΕΔલʹ֎෦API͔Βͷσʔλ Λऔಘ͢Δ • mounted - ϨϯμϦϯά͞ΕͨޙʹݺΕΔ Nuxt.js
ϥΠϑαΠΫϧ
࣮ݧ3ɿ 3ඵ͔͔ΔॲཧΛ asyncData ʹɺ 2ඵɺ5ඵ͔͔ΔॲཧΛฒྻʹ ͯ͠ mounted ʹॻ͍ͨ߹ɻ
Promise.all Ͱฒྻॲཧ
None
࣮ݧ4ɿ 3ඵɺ2ඵɺ5ඵ͔͔Δॲ ཧΛͯ͢ฒྻͰ asyncData ʹॻ͍ͨ ߹ɻ
None
ͲΕ͕Ұ൪ྑ͍ʁ • αΠτͷཁٻ༷ʹΑΔ • 3ඵ͔͔Δॲཧ݁Ռ͚ͩઌʹදࣔͯ͠ɺΓޙճ͠Ͱྑ͚Εʮ࣮ݧ2ʯ͔ʮ࣮ݧ3ʯ • 5ඵ͔͔ͬͯྑ͍ͷͰɺը໘ભҠͨ͠ஈ֊Ͱͯ͢ͷใΛද͓͖͍ࣔͯͨ͠ͳΒʮ࣮ݧ4ʯ
• ͜ͷ··ͩͱSEOతʹ͋·Γྑ͘ͳ͍͔͠Εͳ͍ʂʁ • ࣮ݧ23ͷέʔεͰɺը໘Λදࣔͨ࣌͠Ͱද͖ࣔ͢σʔλ͕શʹऔಘͰ͖͍ͯͳ͍͔Β • SEOରࡦΛߟྀ͢ΔͳΒ5ඵ͔͔Δ͚Ͳɺ࠷ॳʹશ෦දࣔͰ͖͍ͯΔ࣮ݧ4 ͕Ұ൪ྑ͍ʁ • ࣮࣮ݧ 2or3
ͱ 4Λྑ͍ײ͡ʹΓସ͑ΒΕΔํ๏͕͋Δ ͓·͚ɿSEOରࡦ
※ଓ͖ ٶ࡚ITؔ࿈ษڧձ Slack Ͱ
͋Γ͕ͱ͏͍͟͝·ͨ͠