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

7 principles for rich web apps And how next.js ...

7 principles for rich web apps And how next.js achieves these principles

ジャムスタックチョットデキル 2023/09/09

Yosuke Furukawa

September 09, 2023
Tweet

More Decks by Yosuke Furukawa

Other Decks in Programming

Transcript

  1. 7 principles for rich web apps And how next.js achieves

    these principles @ δϟϜελοΫνϣοτσΩϧΧϯϑΝϨϯε in த໺ yosuke_furukawa / 2023-09-09
  2. αʔό͕ϖʔδΛϨϯμϦϯά͢Δͷ͸೚ҙͰ ͸ͳ͍ɻ •ϥ΢ϯυτϦοϓճ਺Λ஌ͬͯ·͔͢ʁ •CSRͱSSRͰൺֱ͢Δ 4FSWFS CSR ۭͷHTMLऔಘ JavaScriptऔಘ API fetch

    4FSWFS SSR HTMLऔಘ $43ճ443ճ ˞ݫີͳ਺Ͱ͸ͳ͍ɻ5$1ͷϥ΢ϯυτϦοϓͱ͍͏ҙຯͰ͸ճ਺͸ҟͳΔɻ
  3. historyΛյ͢΂͖͡Όͳ͍ɺhistoryΛ ֦ு͠Α͏ •Next.jsͩͱεΫϩʔϧҐஔΛ໭͢ͱ͍͏ҙຯͰ͸ɾɾɾ •Page router ͸εΫϩʔϧҐஔΛ֮͑ͯ͘Εͯͯɺϖʔδ͕ϨϯμϦϯά͞Ε͔ͯΒεΫϩʔϧͯ͠ ͘ΕΔ •Experimental Ͱ Scroll

    Restoration ϓϩύςΟͰͷ੍ޚ΋ͯ͘͠ΕΔɻ •App router͸ݱ࣌఺ͩͱͦͷ͋ͨΓͷ͜ͱ͸Ωϟογϡʹ೚ͤͯΔʢϒϥ΢βʹ೚ͤͯΔײ͡ʁʣ •εΫϩʔϧճؼҎ֎ͷ͜ͱ͸Կ΋ͯ͠ͳ͍ͷͰɺ࣮૷ʹ͸ؾΛ͚ͭͳ͍ͱ͍͚ͳ͍ •ࣾ಺Ͱ͸OSSͰϥΠϒϥϦ࡞ͬͯղܾ͢Δਓͨͪ΋νϥϗϥ •https://github.com/recruit-tech/location-state
  4. ৼΔ෣͍Λ༧ଌ͠Α͏ •Next.js ͸ next/link Λ࢖͏ͱϢʔβͷviewport಺ʹೖͬͨॠؒʹ prefetch͠ʹ͍͘ •େ෼౤ػత͕ͩɺͦΕ͕ Next.js Λ࢖ͬͨαʔϏε͕ߴ଎ʹݟ͑Δཧ༝ ͩͬͨΓ͢Δ

    •ҰํͰؾΛ͚ͭͳ͍ͱϢʔβͷΪΨ͸ୣͬͯͦ͏ͩ͠ɺαʔόʹ΋ෛ ՙ͸͔͔ͬͯΔɺαʔό΁ͷϦΫΤετ͕૿͑ͯͯίετ͕͔͔ͬͯ ͳ͍͔֬ೝ͓ͯ͘͠ͱྑ͍
  5. ·ͱΊ 4.σʔλมߋΛαʔόʔͱͱ΋ʹίϯτϩʔϧ͠Α͏ 
 => Next.js ͰͷରԠ͸ͳ͍͕ɺService WorkerͳͲͱ૊Έ߹ΘͤΑ͏ 5.historyΛյ͢΂͖͡Όͳ͍ɺhistoryΛ֦ு͠Α͏ 
 =>

    Page Router ͷ৔߹ɺ࠷௿ݶͷεΫϩʔϧҐஔΛ֮͑ͯΔɺ App Router ͸Ωϟογϡ͕ڧ͍ͷͰ ͦΕʹ೚ͤͯΔ 6.ίʔυͷߋ৽ΛPush͠Α͏ 
 => Next.js ͸ page router Ͱ͸૊ΈࠐΈͷσʔλϑΣονؔ਺Λ࢖͑͹ݕ஌ͯ͘͠ΕΔ͕ɺ app router ͷ৔߹͸ vercel ʹཔΔܗʹͳΔ͔΋ʢSkew Protectionʣ 7.ৼΔ෣͍Λ༧ଌ͠Α͏ 
 => next/link Ͱ౤ػతʹσʔλΛprefetchͯ͘͠ΕΔ