Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

797d5998ec494edb7ade9ffe8783d105?s=128

Kosuke Ogawa

June 05, 2020
Tweet

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. ͋Γ͕ͱ͏͍͟͝·ͨ͠