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

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

Transcript

1. KOSUKE OGAWA 2020
   WebφΠτٶ࡚
   Nuxt.js ͰඇಉظͳσʔλΛऔಘ
   ͢Δ
   ͱ͖ͷϙΠϯτ
   

   View Slide

2. ࣗݾ঺հ
   w 0HBXB,PTVLFʢ!LPPHBXBʣ
   w Ξϧגࣜձࣾʢ౦ژʣ
   w ٶ࡚͔ΒϑϧϦϞʔτ
   w J04 4XJGU
   "OESPJE ,PUMJO
   5ZQF4DSJQU $44 7VFKT /VYUKTͳͲ
   w ͯ͛΄͛ॴଐ
   

   View Slide

3. ͜ΜͳαΠτΛߟ͑ͯΈΔ
   

   View Slide

4. View Slide

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

   View Slide

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

   View Slide

7. View Slide

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

   View Slide

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

   View Slide

10. View Slide

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

    View Slide

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

    View Slide

13. Promise.all Ͱฒྻॲཧ
    

    View Slide

14. View Slide

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

    View Slide

16. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide