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

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

Avatar for mfzy mfzy
July 15, 2020

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

Avatar for mfzy

mfzy

July 15, 2020
Tweet

More Decks by mfzy

Other Decks in Programming

Transcript

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

      ϖʔδભҠʹࡍͯ͠શମΛ࠶औಘͤͣඞཁͳ৘ใ͚ͩಡΈࠐΉ  ϒϥ΢βͰ΋ωΠςΟϒΞϓϦͷΑ͏ͳૢ࡞ײΛ 8
  2. Next.js  3FBDUΞϓϦέʔγϣϯΛ࡞ΔͨΊͷPQJOJPOBUFEͳϑϨʔϜϫʔΫ  ࣅͨ΋ͷʹDSFBUFSFBDUBQQ $3" ͕͋Δ  ओͳڧΈ 

    `next`ίϚϯυҰͭͰϓϩδΣΫτͷجૅ͕ग़དྷ্͕Δ  όϯυϥʔ 8FCQBDL ౳ͷπʔϧ͕ॳΊ͔Β૊Έࠐ·Ε͍ͯΔ  ൥ࡶͳઃఆΛඞཁͱ͠ͳ͍ڧྗͳ1SFSFOEFSJOHػߏ 9
  3. Pre-rendering ͠ͳ͍৔߹ 10 Server Server Server API Λୟ͍ͨΓ͋Δ͍͸ ੩తͳϦιʔε (JSON

    ౳) Λཁٻ͢Δ ίϯςϯπΛ͍ܽͨ ϕʔεͷ HTML ͕ฦ٫͞ΕΔ ϨεϙϯεΛղऍͯ͠Α͏΍͘ ίϯςϯπ͕ར༻Մೳʹ
  4. Pre-rendering ͷछྨ  4UBUJD(FOFSBUJPO  Ϗϧυ `next build` ࣌ʹੜ੒͓͍ͯͨ͠)5.-Λฦ͢ 

    6($ͷΑ͏ͳಈతίϯςϯπʹ͸ద͞ͳ͍  4FSWFS4JEF3FOEFSJOH 443   ϦΫΤετ͝ͱʹ)5.-Λੜ੒  ຐ๏ͷJΒΜͲͰ1SFSFOEFSJOHΛհ͢ΔՕॴ͸શͯ443 12
  5. ͳͥ Next.js ͳͷ͔  6*69ͷ࡮৽  ࡞඼ͷੑ্࣭ϖʔδભҠ͕ଟ͍ˠ41"  %FWFMPQFS&YQFSJFODF %9

      Ϟνϕʔγϣϯͱڞʹ඼࣭΋޲্  ࡞ͬͯऴΘΓͰͳ͍ɺӡ༻্ͷෛ୲ܰݮ΋ظ଴  4&0ཁ݅ˠ443  ී௨ͷ41"ͩͱΫϩʔϥʔଆ͕ղऍ͠ʹ͍͘ 13
  6. Ϋϩʔϥʔͱ JavaScript  Ϋϩʔϥʔ͸ϖʔδ಺ͷίϯςϯπΛಡΈऔͬͯΠϯσοΫεΛ࡞੒͢Δ  ૉ๿ͳ41"Ͱ͸Ϩεϙϯε )5.- ࣗମʹίϯςϯπؚ͕·Εͳ͍  +BWB4DSJQUΛղऍ͠ͳ͍ݶΓίϯςϯπ͕ར༻Ͱ͖ͳ͍

     ϞμϯͳΫϩʔϥʔ͸+BWB4DSJQUΛղऍͰ͖Δ  ҰےೄͰ͸͍͔ͳ͍Β͍͠ͷ͕ݱঢ়  (PPHMF΋ґવͱͯ͠ԿΒ͔ͷϨϯμϦϯάख๏Λ࠾ΔΑ͏קΊ͍ͯΔ  IUUQTEFWFMPQFSTHPPHMFDPNTFBSDIEPDTHVJEFTEZOBNJDSFOEFSJOH 14
  7. SEO ͱ SSR  ΫϩʔϥʔଆͷਐาʹΑͬͯ443͸ෆཁʹͳͬͨͷͰ͸  ͦ͏Ͱ΋ͳ͍ͷ͕ݱঢ় લड़  

    ୯७ͳ41"Ͱ͸ద੾ʹεςʔλείʔυΛฦ٫Ͱ͖ͳ͍ͳͲͷ໰୊΋࢒Δ  443Λ࠾༻͢Δ্Ͱ஫ҙ͢Δ͜ͱ  $MJFOU4JEF3FOEFSJOH $43 Ͱͷग़ྗͱҟͳΔͱϚζ͍ ޙड़   ϞόΠϧ୺຤ɾͦΕҎ֎Ͱͷ6*ग़͠෼͚ʹۤઓ͢Δ͜ͱʹʜ 15
  8. RWD  3FTQPOTJWF8FC%FTJHO 38%   ओʹελΠϧγʔτΛۦ࢖ͯ͠͏·͘ݟͨ໨Λௐ੔͢Δ͜ͱʹͳΔ  &UIBO.BSDPUUFࢯͷهࣄ͕ॳग़ͱ͞ΕΔ ೥

      ίϯϙʔωϯτϕʔεͷࢥ૝͕޿·Δલͷ࣌୅ͷߟ͑ํ  ίϯϙʔωϯτϕʔε͕ओྲྀͷ41"Ͱ͸Ͳ͏͔ʁ  38%Λ࣠ʹͯ͠͠·͏ͷ͸ྑ͘ͳͦ͞͏ 19
  9. SPA ͱ RWD  IUUQTTDSBQCPYJPTIPLBJ$44ϨεϙϯγϒσβΠϯΛ41"Ͱ࢖͏ͱഁ໓͢Δ  ελΠϧγʔτ͚ͩͷௐ੔Ͱࡁ·ͤΔʹ͸ແཧΛ൐͏έʔε΋ଟ͍  දݱྗ͕๛͔ʹͳͬͨ෼ঢ়ଶɾΠϯλϥΫγϣϯ΋ෳࡶʹ 

    ୺຤͝ͱͷࠩ෼͸ݟͨ໨ʹݶΒͳ͍  ͱ͸͍͑ܰඍͳݟͨ໨ͷௐ੔ʹ͸ґવͱͯ͠༗༻  38%͸ิॿతʹ࢖͏ͱͯ͠୅ΘΓʹ࣠ͱͳΔ࢓૊Έ͕ඞཁ 20
  10. SSR ͱ CSR ݁Ռʹ૬ҧ͕͋Δ৔߹ 24 Server PC ͔ΒͷϦΫΤετʹରͯ͠ ϞόΠϧ޲͚ͷ಺༰Λ SSR

    ͯ͠ฦͯ͠͠·͏ CSR Ͱ PC ޲͚ͷ಺༰ʹ ࠶ߏங͞ΕΔ͜ͱʹ SEO తʹϖφϧςΟΛ৯Β͏͜ͱ͕͋Δ (Cloaking ͱݟ၏͞ΕΔڪΕ͕͋Δ) &ɹ ը໘͕νϥ͍ͭͯମݧ͕ѱ͍
  11. UA จࣈྻ͔Βͷ൑ผ  Ͳ͏΍ͬͯ୺຤Λ൑ผ͢Δ͔  6"จࣈྻ಺ʹ`Mobile`ͱ͍͏จࣈྻ͕ଘࡏ͢Δ͔֬ೝ  େࡶ೺ʹϞόΠϧ͔ͦΕҎ֎͔ʹ෼͚Δ͜ͱ͕Ͱ͖Δ  ͦΜͳ୯७ͳϩδοΫͰ͏·͍͘͘ͷ͔

     ϝδϟʔͳϒϥ΢βͷຆͲ͕͜ͷ҉໧తͳϧʔϧʹै͍ͬͯΔ໛༷  ΋ͪΖΜ(PPHMFCPU΋  ϚΠφʔͳ΋ͷ͸ͦ΋ͦ΋αϙʔτ֎ͱ͍͏͜ͱ΋͋Δ 26
  12. ࣮૷  ΞϓϦέʔγϣϯϫΠυͳঢ়ଶͱͯ͠5JFS͕ࢀরͰ͖ΔΑ͏ʹ  4JOHMF4PVSDFPG5SVUI 4405 ͱͳΔΑ͏ߏ੒  ࣮ࡍʹ͸3FEVYͷঢ়ଶͱͯ͠؅ཧ 3FBDUͷ$POUFYUͰ΋໰୊ͳ͍

      5JFSͷࢉग़ج४͸؆୯ʹࠩ͠ସ͑ΒΕΔΑ͏ʹ  6"จࣈྻ͕ݻఆԽ͞ΕͨΒ୅ସͷ৘ใ͔Β5JFSΛಋग़͢Ε͹Α͍͚ͩ  ग़͠෼͚Λखܰʹ࣮ݱ͢ΔͨΊͷϔϧύʔ΍ίϯϙʔωϯτΛ༻ҙ 29
  13. ίϯϙʔωϯτग़͠෼͚࣮૷ྫʢ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 ͝ͱͷίϯϙʔωϯτΛ·ͱΊͯ ୯७ͳίϯϙʔωϯτͱͯ͠ѻ͑ΔΑ͏ʹ
  14. ίϯϙʔωϯτग़͠෼͚࣮૷ྫʢ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> </> ); }; એݴతΞϓϩʔνΛ׆͔͢ ίϯϙʔωϯτΛग़͠෼͚Δ·Ͱ΋ͳ͍ ܰඍͳௐ੔͸৚݅෼ذͰ