Nuxt.js で非同期なデータを取得するときのポイント

2020.6.5【増枠】Webナイト宮崎 Vol.9　～てげオンライン LT で学びたい～ - connpass https://tegehoge.connpass.com/event/176369/

Transcript

1. KOSUKE OGAWA 2020 WebφΠτٶ࡚ Nuxt.js ͰඇಉظͳσʔλΛऔಘ ͢Δ ͱ͖ͷϙΠϯτ
2. ࣗݾ঺հ w 0HBXB
   ,PTVLFʢ!LPPHBXBʣ
   w Ξϧגࣜձࣾʢ౦ژʣ
   w ٶ࡚͔ΒϑϧϦϞʔτ
   w J04 4XJGU
   "OESPJE ,PUMJO
   5ZQF4DSJQU
   $44
   7VFKT
   /VYUKT
   ͳͲ
   w ͯ͛΄͛ॴଐ
3. ͜ΜͳαΠτΛߟ͑ͯΈΔ
5. • asyncData - ϨϯμϦϯά͞ΕΔલʹ֎෦API͔Βͷσʔλ Λऔಘ͢Δ • mounted - ϨϯμϦϯά͞Εͨ௚ޙʹݺ͹ΕΔ Nuxt.js ϥΠϑαΠΫϧ
6. ࣮ݧ1ɿ 3ඵɺ2ඵɺ5ඵ͔͔Δ ॲཧΛ͢΂ͯ asyncData ʹॻ͍ͨ৔߹ɻ
8. • asyncData - ϨϯμϦϯά͞ΕΔલʹ֎෦API͔Βͷσʔλ Λऔಘ͢Δ • mounted - ϨϯμϦϯά͞Εͨ௚ޙʹݺ͹ΕΔ Nuxt.js ϥΠϑαΠΫϧ
9. ࣮ݧ2ɿ 3ඵ͔͔ΔॲཧΛ asyncData ʹɺ 2ඵɺ5ඵ͔͔ΔॲཧΛ mounted ʹॻ͍ͨ৔߹ɻ
11. • asyncData - ϨϯμϦϯά͞ΕΔલʹ֎෦API͔Βͷσʔλ Λऔಘ͢Δ • mounted - ϨϯμϦϯά͞Εͨ௚ޙʹݺ͹ΕΔ Nuxt.js ϥΠϑαΠΫϧ
12. ࣮ݧ3ɿ 3ඵ͔͔ΔॲཧΛ asyncData ʹɺ 2ඵɺ5ඵ͔͔ΔॲཧΛฒྻʹ ͯ͠ mounted ʹॻ͍ͨ৔߹ɻ
13. Promise.all Ͱฒྻॲཧ
15. ࣮ݧ4ɿ 3ඵɺ2ඵɺ5ඵ͔͔Δॲ ཧΛ͢΂ͯฒྻͰ asyncData ʹॻ͍ͨ৔ ߹ɻ
17. ͲΕ͕Ұ൪ྑ͍ʁ • αΠτͷཁٻ࢓༷ʹΑΔ • 3ඵ͔͔Δॲཧ݁Ռ͚ͩઌʹදࣔͯ͠ɺ࢒Γ͸ޙճ͠Ͱ΋ྑ͚Ε͹ʮ࣮ݧ2ʯ͔ʮ࣮ݧ3ʯ • 5ඵ͔͔ͬͯ΋ྑ͍ͷͰɺը໘ભҠͨ͠ஈ֊Ͱ͢΂ͯͷ৘ใΛද͓͖͍ࣔͯͨ͠ͳΒʮ࣮ݧ4ʯ
18. • ͜ͷ··ͩͱSEOతʹ͋·Γྑ͘ͳ͍͔΋͠Εͳ͍ʂʁ • ࣮ݧ2΍3ͷέʔεͰ͸ɺը໘Λදࣔͨ࣌͠఺Ͱදࣔ͢΂͖σʔλ͕׬શʹऔಘͰ͖͍ͯͳ͍͔Β • SEOରࡦΛߟྀ͢ΔͳΒ5ඵ͔͔Δ͚Ͳɺ࠷ॳʹશ෦දࣔͰ͖͍ͯΔ࣮ݧ4 ͕Ұ൪ྑ͍ʁ • ࣮͸࣮ݧ 2or3 ͱ 4Λྑ͍ײ͡ʹ੾Γସ͑ΒΕΔํ๏͕͋Δ ͓·͚ɿSEOରࡦ
19. ※ଓ͖͸ ٶ࡚ITؔ࿈ษڧձ Slack Ͱ
20. ͋Γ͕ͱ͏͍͟͝·ͨ͠