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

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. ͜ΜͳαΠτΛߟ͑ͯΈΔ

4. None

5. • asyncData - ϨϯμϦϯά͞ΕΔલʹ֎෦API͔Βͷσʔλ Λऔಘ͢Δ • mounted - ϨϯμϦϯά͞Εͨ௚ޙʹݺ͹ΕΔ Nuxt.js

   ϥΠϑαΠΫϧ

6. ࣮ݧ1ɿ 3ඵɺ2ඵɺ5ඵ͔͔Δ ॲཧΛ͢΂ͯ asyncData ʹॻ͍ͨ৔߹ɻ

7. None

8. • asyncData - ϨϯμϦϯά͞ΕΔલʹ֎෦API͔Βͷσʔλ Λऔಘ͢Δ • mounted - ϨϯμϦϯά͞Εͨ௚ޙʹݺ͹ΕΔ Nuxt.js

   ϥΠϑαΠΫϧ

9. ࣮ݧ2ɿ 3ඵ͔͔ΔॲཧΛ asyncData ʹɺ 2ඵɺ5ඵ͔͔ΔॲཧΛ mounted ʹॻ͍ͨ৔߹ɻ

10. None

11. • asyncData - ϨϯμϦϯά͞ΕΔલʹ֎෦API͔Βͷσʔλ Λऔಘ͢Δ • mounted - ϨϯμϦϯά͞Εͨ௚ޙʹݺ͹ΕΔ Nuxt.js

    ϥΠϑαΠΫϧ

12. ࣮ݧ3ɿ 3ඵ͔͔ΔॲཧΛ asyncData ʹɺ 2ඵɺ5ඵ͔͔ΔॲཧΛฒྻʹ ͯ͠ mounted ʹॻ͍ͨ৔߹ɻ

13. Promise.all Ͱฒྻॲཧ

14. None

15. ࣮ݧ4ɿ 3ඵɺ2ඵɺ5ඵ͔͔Δॲ ཧΛ͢΂ͯฒྻͰ asyncData ʹॻ͍ͨ৔ ߹ɻ

16. None

17. ͲΕ͕Ұ൪ྑ͍ʁ • αΠτͷཁٻ࢓༷ʹΑΔ • 3ඵ͔͔Δॲཧ݁Ռ͚ͩઌʹදࣔͯ͠ɺ࢒Γ͸ޙճ͠Ͱ΋ྑ͚Ε͹ʮ࣮ݧ2ʯ͔ʮ࣮ݧ3ʯ • 5ඵ͔͔ͬͯ΋ྑ͍ͷͰɺը໘ભҠͨ͠ஈ֊Ͱ͢΂ͯͷ৘ใΛද͓͖͍ࣔͯͨ͠ͳΒʮ࣮ݧ4ʯ

18. • ͜ͷ··ͩͱSEOతʹ͋·Γྑ͘ͳ͍͔΋͠Εͳ͍ʂʁ • ࣮ݧ2΍3ͷέʔεͰ͸ɺը໘Λදࣔͨ࣌͠఺Ͱදࣔ͢΂͖σʔλ͕׬શʹऔಘͰ͖͍ͯͳ͍͔Β • SEOରࡦΛߟྀ͢ΔͳΒ5ඵ͔͔Δ͚Ͳɺ࠷ॳʹશ෦දࣔͰ͖͍ͯΔ࣮ݧ4 ͕Ұ൪ྑ͍ʁ • ࣮͸࣮ݧ 2or3

    ͱ 4Λྑ͍ײ͡ʹ੾Γସ͑ΒΕΔํ๏͕͋Δ ͓·͚ɿSEOରࡦ

19. ※ଓ͖͸ ٶ࡚ITؔ࿈ษڧձ Slack Ͱ

20. ͋Γ͕ͱ͏͍͟͝·ͨ͠