Hatena Engineer Seminar #14 Next.js 編 / hatena-engineer-seminar-14-nextjs

Transcript

1. id:mfzy 2020/7/15 Next.js ฤ ~ ϢʔβʔͱΫϩʔϥʔΛڞʹ΋ͯͳٕ͢ज़ ~ Hatena Engineer Seminar

   #14

2. ൃදͷྲྀΕ  ຐ๏ͷJΒΜͲ
    /FYUKT
    ϞόΠϧϑΝʔετ
    ίϯϙʔωϯτग़͠෼͚
   

   ·ͱΊ 2

3. ຐ๏ͷiΒΜͲ

4.  ϑΟʔνϟʔϑΥϯ࣌୅͔Βͷ௕͍ྺ࢙
    ϞόΠϧ୺຤͔ΒͷΞΫηε͕໿
   
   ׂ
    εϚʔτϑΥϯ΁ͷγϑτ͸͋Γͭͭ΋ґવϞόΠϧ͕ࢧ഑త
    ৢ੒͞ΕͨจԽ
    ࡞඼ͷ
   
   ϖʔδ͝ͱͷจྔ͸গͳΊ͕ͩϖʔδ਺͕ଟ͍

   ಛ௃ 4

5. ϦχϡʔΞϧ  ࣌୅ͷҠΓมΘΓͱڞʹϢʔβʔͷ໨͸ං͖͑ͯͨ
    چγεςϜͷϨΨγʔͳٕज़ελοΫ
    ϞμϯͳମݧΛ࣮ݱ͢Δʹ͸ແཧ͕͋Δ
    ٕज़ελοΫͷ࡮৽
   

   ϑϩϯτΤϯυΛࢧ͑Δٕज़ͱͯ͠αʔϏεͷಛ௃ʹ߹ͬͨ
   /FYUKT
   Λબఆ 5

6. Next.js

7. ٕज़ελοΫ Next.js Server (BFF) GraphQL API DB 7 Feather is

   licensed under the MIT License. SPA

8. React  6*
   ߏஙϥΠϒϥϦ
    ίϯϙʔωϯτϕʔε
    ΧϓηϧԽ͞Εͨ෦඼Λ૊Έ߹Θͤͯ
   6*
   Λߏங
    4JOHMF
   1BHF
   "QQMJDBUJPO
   41"

   
    ϖʔδભҠʹࡍͯ͠શମΛ࠶औಘͤͣඞཁͳ৘ใ͚ͩಡΈࠐΉ
    ϒϥ΢βͰ΋ωΠςΟϒΞϓϦͷΑ͏ͳૢ࡞ײΛ 8

9. Next.js  3FBDU
   ΞϓϦέʔγϣϯΛ࡞ΔͨΊͷ
   PQJOJPOBUFE
   ͳϑϨʔϜϫʔΫ
    ࣅͨ΋ͷʹ
   DSFBUFSFBDUBQQ
   $3"
   ͕͋Δ
    ओͳڧΈ
   

   `next`
   ίϚϯυҰͭͰϓϩδΣΫτͷجૅ͕ग़དྷ্͕Δ
    όϯυϥʔ
   8FCQBDL
   ౳ͷπʔϧ͕ॳΊ͔Β૊Έࠐ·Ε͍ͯΔ
    ൥ࡶͳઃఆΛඞཁͱ͠ͳ͍ڧྗͳ
   1SFSFOEFSJOH
   ػߏ 9

10. Pre-rendering ͠ͳ͍৔߹ 10 Server Server Server API Λୟ͍ͨΓ͋Δ͍͸ ੩తͳϦιʔε (JSON

    ౳) Λཁٻ͢Δ ίϯςϯπΛ͍ܽͨ ϕʔεͷ HTML ͕ฦ٫͞ΕΔ ϨεϙϯεΛղऍͯ͠Α͏΍͘ ίϯςϯπ͕ར༻Մೳʹ

11. Pre-rendering ͢Δ৔߹ 11 Server (BFF) API / Storage ॳΊ͔Β HTML

    ʹ ίϯςϯπ͕ຒΊࠐ·Ε͍ͯΔ

12. Pre-rendering ͷछྨ  4UBUJD
    (FOFSBUJPO
     Ϗϧυ
    `next build`
    ࣌ʹੜ੒͓͍ͯͨ͠
    )5.-
    Λฦ͢
    

    6($
    ͷΑ͏ͳಈతίϯςϯπʹ͸ద͞ͳ͍
     4FSWFS4JEF
    3FOEFSJOH
    443
     ϦΫΤετ͝ͱʹ
    )5.-
    Λੜ੒
     ຐ๏ͷJΒΜͲͰ
    1SFSFOEFSJOH
    Λհ͢ΔՕॴ͸શͯ
    443 12

13. ͳͥ Next.js ͳͷ͔  6*69
    ͷ࡮৽
     ࡞඼ͷੑ্࣭ϖʔδભҠ͕ଟ͍
    ˠ
    41"
     %FWFMPQFS
    &YQFSJFODF
    %9

    
     Ϟνϕʔγϣϯͱڞʹ඼࣭΋޲্
     ࡞ͬͯऴΘΓͰͳ͍ɺӡ༻্ͷෛ୲ܰݮ΋ظ଴
     4&0
    ཁ݅
    ˠ
    443
     ී௨ͷ
    41"
    ͩͱΫϩʔϥʔଆ͕ղऍ͠ʹ͍͘ 13

14. Ϋϩʔϥʔͱ JavaScript  Ϋϩʔϥʔ͸ϖʔδ಺ͷίϯςϯπΛಡΈऔͬͯΠϯσοΫεΛ࡞੒͢Δ
     ૉ๿ͳ
    41"
    Ͱ͸Ϩεϙϯε
    )5.-
    ࣗମʹίϯςϯπؚ͕·Εͳ͍
     +BWB4DSJQU
    Λղऍ͠ͳ͍ݶΓίϯςϯπ͕ར༻Ͱ͖ͳ͍
    

     ϞμϯͳΫϩʔϥʔ͸
    +BWB4DSJQU
    ΛղऍͰ͖Δ
     ҰےೄͰ͸͍͔ͳ͍Β͍͠ͷ͕ݱঢ়
     (PPHMF
    ΋ґવͱͯ͠ԿΒ͔ͷϨϯμϦϯάख๏Λ࠾ΔΑ͏קΊ͍ͯΔ
     IUUQTEFWFMPQFSTHPPHMFDPNTFBSDIEPDTHVJEFTEZOBNJDSFOEFSJOH 14

15. SEO ͱ SSR  ΫϩʔϥʔଆͷਐาʹΑͬͯ
    443
    ͸ෆཁʹͳͬͨͷͰ͸
     ͦ͏Ͱ΋ͳ͍ͷ͕ݱঢ়
    લड़
    

    ୯७ͳ
    41"
    Ͱ͸ద੾ʹεςʔλείʔυΛฦ٫Ͱ͖ͳ͍ͳͲͷ໰୊΋࢒Δ
     443
    Λ࠾༻͢Δ্Ͱ஫ҙ͢Δ͜ͱ
     $MJFOU4JEF
    3FOEFSJOH
    $43
    Ͱͷग़ྗͱҟͳΔͱϚζ͍
    ޙड़
     ϞόΠϧ୺຤ɾͦΕҎ֎Ͱͷ
    6*
    ग़͠෼͚ʹۤઓ͢Δ͜ͱʹʜ 15

16. ϞόΠϧϑΝʔετ

17. ϞόΠϧϑΝʔετ  ࠶ܝ
    ϞόΠϧ୺຤͔ΒͷΞΫηε͕ࢧ഑త
     ϞόΠϧ୺຤ͰͷϢʔβʔମݧ͕ॏཁʹ
     ຐ๏ͷJΒΜͲʹݶΒͣੈؒతʹ΋ϞόΠϧ͕େ൒
     ݕࡧΤϯδϯͰ͸ϞόΠϧϑϨϯυϦʔͳ΢ΣϒαΠτ͕༏۰͞ΕΔ܏޲ 17

18. ։ൃͷྲྀΕ  ඞવతʹϞόΠϧ͔Β։ൃ͕ਐΉ
     ͱ͸͍͑౰વϞόΠϧҎ֎ͷ୺຤޲͚ͷରԠ΋ඞཁ
     ϞόΠϧϑΝʔετ͔ͩΒͱ͍ͬͯ㚽Ζʹ͸͠ͳ͍
     Ͳ͏΍ͬͯ
    1$
    ରԠΛਐΊ͍͔ͯ͘ 18

19. RWD  3FTQPOTJWF
    8FC
    %FTJHO
    38%
     ओʹελΠϧγʔτΛۦ࢖ͯ͠͏·͘ݟͨ໨Λௐ੔͢Δ͜ͱʹͳΔ
     &UIBO
    .BSDPUUF
    ࢯͷهࣄ͕ॳग़ͱ͞ΕΔ
    
    ೥

    
     ίϯϙʔωϯτϕʔεͷࢥ૝͕޿·Δલͷ࣌୅ͷߟ͑ํ
     ίϯϙʔωϯτϕʔε͕ओྲྀͷ
    41"
    Ͱ͸Ͳ͏͔ʁ
     38%
    Λ࣠ʹͯ͠͠·͏ͷ͸ྑ͘ͳͦ͞͏ 19

20. SPA ͱ RWD  IUUQTTDSBQCPYJPTIPLBJ$44ϨεϙϯγϒσβΠϯΛ41"Ͱ࢖͏ͱഁ໓͢Δ
    
     ελΠϧγʔτ͚ͩͷௐ੔Ͱࡁ·ͤΔʹ͸ແཧΛ൐͏έʔε΋ଟ͍
     දݱྗ͕๛͔ʹͳͬͨ෼ঢ়ଶɾΠϯλϥΫγϣϯ΋ෳࡶʹ
    

    ୺຤͝ͱͷࠩ෼͸ݟͨ໨ʹݶΒͳ͍
     ͱ͸͍͑ܰඍͳݟͨ໨ͷௐ੔ʹ͸ґવͱͯ͠༗༻
     38%
    ͸ิॿతʹ࢖͏ͱͯ͠୅ΘΓʹ࣠ͱͳΔ࢓૊Έ͕ඞཁ 20

21. ίϯϙʔωϯτग़͠෼͚

22. جຊతͳΞΠσΞ  ελΠϧγʔτͰͷௐ੔Ͱ͸Ͳ͏ʹ΋ͳΒͳ͍ݟͨ໨Ҏ֎ͷࠩ෼Λѻ͍͍ͨ
     ελΠϧγʔτͰͳ͘ϓϩάϥϜ
    +BWB4DSJQU
    ͷੈքʹ࣠ΛҠ͢
     ҰͭͷίϯϙʔωϯτͰແཧʹࠩ෼Λѻ͓͏ͱ͢ΔͱόάΛຒΊࠐΈ͔Ͷͳ͍
    

    ୺຤͝ͱʹผͷίϯϙʔωϯτΛ༻ҙ͢Δ
     ͦΕͧΕʹඞཁͳϩδοΫͷΈʹूதͰ͖ਖ਼ؾ͕อͯΔ
     Ͳ͏࣮ݱ͢Δʁ 22

23. ੍໿  ͜͜Ͱ
    4&0
    ཁ͕݅ἝΛṞ͘
     ૉ௚ʹ
    $44
    ͷ
    .FEJB
    2VFSZ
    Λ฿ͬͯϏϡʔϙʔτΛཔΓʹͨ͘͠ͳΔ
     ࠶ܝ
    443
    ͱ
    $43
    ͷ݁Ռ͸Ұக͠ͳͯ͘͸ͳΒͳ͍
     ϓϩάϥϜʹ࣠ΛҠ͢ͱ͍͏͜ͱ͸
    %0.
    ʹ΋࡞༻Ͱ͖Δͱ͍͏͜ͱ
    

    ΫϥΠΞϯτଆͰ͔͠ར༻Ͱ͖ͳ͍৘ใΛ͋ͯʹ͸Ͱ͖ͳ͍ʂ 23

24. SSR ͱ CSR ݁Ռʹ૬ҧ͕͋Δ৔߹ 24 Server PC ͔ΒͷϦΫΤετʹରͯ͠ ϞόΠϧ޲͚ͷ಺༰Λ SSR

    ͯ͠ฦͯ͠͠·͏ CSR Ͱ PC ޲͚ͷ಺༰ʹ ࠶ߏங͞ΕΔ͜ͱʹ SEO తʹϖφϧςΟΛ৯Β͏͜ͱ͕͋Δ (Cloaking ͱݟ၏͞ΕΔڪΕ͕͋Δ) &ɹ ը໘͕νϥ͍ͭͯମݧ͕ѱ͍

25. Ұ؏ੑ  αʔόʔଆͰ΋ΫϥΠΞϯτଆͰ΋Ұ؏ɾ҆ఆͯ͠ར༻Ͱ͖Δ৘ใͱ͍͑͹
     6TFS"HFOU
    ͘Β͍͔͠ͳ͍
     6"
    จࣈྻ͸ݻఆԽ͞ΕΔͱ͍͏࿩΋
     $MJFOU
    )JOUT
    ͕࣮༻Խ͞ΕΕ͹ͦͪΒΛ࢖͏͜ͱʹͳΔͩΖ͏
    

    ͦΕ·Ͱ͸
    6"
    จࣈྻΛݟΔ͔͠ͳ͍ 25

26. UA จࣈྻ͔Βͷ൑ผ  Ͳ͏΍ͬͯ୺຤Λ൑ผ͢Δ͔
     6"
    จࣈྻ಺ʹ
    `Mobile`
    ͱ͍͏จࣈྻ͕ଘࡏ͢Δ͔֬ೝ
     େࡶ೺ʹϞόΠϧ͔ͦΕҎ֎͔ʹ෼͚Δ͜ͱ͕Ͱ͖Δ
     ͦΜͳ୯७ͳϩδοΫͰ͏·͍͘͘ͷ͔
    

     ϝδϟʔͳϒϥ΢βͷຆͲ͕͜ͷ҉໧తͳϧʔϧʹै͍ͬͯΔ໛༷
     ΋ͪΖΜ
    (PPHMFCPU
    ΋
     ϚΠφʔͳ΋ͷ͸ͦ΋ͦ΋αϙʔτ֎ͱ͍͏͜ͱ΋͋Δ 26

27. Tier  `Mobile`
    ͕ଘࡏ͢Ε͹
    `compact`ɺͦ͏Ͱͳ͚Ε͹
    `regular`
     ͜ΕΛ
    5JFS
    ͱݺͿ͜ͱʹ͢Δ
     ϫʔυνϣΠε͸
    #PPUTUSBQ
    ͷ
    (SJE
    5JFS
    ΍
    J04
    ͷ
    4J[F
    $MBTTFT
    Λࢀߟʹ
     ϢϏΩλεݴޠͱͷ݉Ͷ߹͍΋ߟྀͭͭ͠୯७Ͱ໌ྎͳ໋໊Λ৺͕͚ͨ 27

28. ྫ: iPad (Split View) 28 `compact` `regular`

29. ࣮૷  ΞϓϦέʔγϣϯϫΠυͳঢ়ଶͱͯ͠
    5JFS
    ͕ࢀরͰ͖ΔΑ͏ʹ
     4JOHMF
    4PVSDF
    PG
    5SVUI
    4405
    ͱͳΔΑ͏ߏ੒
     ࣮ࡍʹ͸
    3FEVY
    ͷঢ়ଶͱͯ͠؅ཧ
    3FBDU
    ͷ
    $POUFYU
    Ͱ΋໰୊ͳ͍

    
     5JFS
    ͷࢉग़ج४͸؆୯ʹࠩ͠ସ͑ΒΕΔΑ͏ʹ
     6"
    จࣈྻ͕ݻఆԽ͞ΕͨΒ୅ସͷ৘ใ͔Β
    5JFS
    Λಋग़͢Ε͹Α͍͚ͩ
     ग़͠෼͚Λखܰʹ࣮ݱ͢ΔͨΊͷϔϧύʔ΍ίϯϙʔωϯτΛ༻ҙ 29

30. ίϯϙʔωϯτग़͠෼͚࣮૷ྫʢ1ʣ // ڞ௨Ͱར༻͢Δ props ͷܕΛఆ͓ٛͯ͘͠ interface CommonFooProps { bar: string;

    } const CompactFoo: React.FC<CommonFooProps> = () => {/* ... */}; const RegularFoo: React.FC<CommonFooProps> = () => {/* ... */}; export const Foo = switched({ compact: CompactFoo, regular: RegularFoo, }); export const Page: NextPage = () => ( <SomeContainer> <Foo bar="baz" /> {/* ΤʔδΣϯτʹԠͯ͡উखʹ੾ΓସΘΔ */} </SomeContainer> ); Tier ͝ͱͷίϯϙʔωϯτΛ·ͱΊͯ ୯७ͳίϯϙʔωϯτͱͯ͠ѻ͑ΔΑ͏ʹ

31. ίϯϙʔωϯτग़͠෼͚࣮૷ྫʢ2ʣ export const Foo: React.FC<{}> = () => { const

    { isCompact } = useTier(); return ( <> <RegularOnly> {/* regular ͷ৔߹ͷΈݱΕΔ */} </RegularOnly> <div className="bar"></div> <style jsx>{` .bar { width: ${isCompact ? '100px' : '300px'}; } `}</style> </> ); }; એݴతΞϓϩʔνΛ׆͔͢ ίϯϙʔωϯτΛग़͠෼͚Δ·Ͱ΋ͳ͍ ܰඍͳௐ੔͸৚݅෼ذͰ

32. ·ͱΊ

33. ·ͱΊ  ͳͥ
    /FYUKT
    ͳͷ͔
     6*69
    ͱ
    4&0
    ཁ݅Λຬ্ͨͨ͠Ͱ
    %9
    ͷ޲্·Ͱ΋͕ݟࠐΊ͔ͨΒ
     5JFS
    ʹΑΔίϯϙʔωϯτग़͠෼͚Ͱ͓΋ͯͳ͠
     Ϣʔβʔʹ͸σόΠεʹదͨ͠ϞμϯͰϦονͳମݧΛ
    

    Ϋϩʔϥʔʹ͸
    6"
    ʹదͨ͠Ұ؏ੑͷ͋Δग़ྗΛ 33