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

Service Worker Side React Server Side Rendering

Service Worker Side React Server Side Rendering

2018/10/12 フューチャーアーキテクトとのLTバトルでの、竹馬(@mizchi)の講演資料になります

Recruit Technologies

October 12, 2018
Tweet

More Decks by Recruit Technologies

Other Decks in Technology

Transcript

  1. લఏ • ServiceWorker ಺Ͱ Babel Λۦ࢖ͯ͠ɺJavaScript ΛϏϧυ ͢Δ - ϩάϛʔ

    TechʢςοΫʣ • off-the-main-thread ͷ࣌୅ https://mizchi.hatenablog.com/ entry/2018/10/02/093750
  2. ΍ͬͨ͜ͱ • SSR on Express • SSR on ServiceWorker •

    React / Redux / universal-router UniversalJavaScript ͳΒ΄ͱΜͲಈ͘
  3. ServiceWorker Ͱಈ͍ͯΔίʔυ self.addEventListener("fetch", event => { event.respondWith( (async () =>

    { // ...ུ const html = ReactDOM.renderToString(<App />); return new Response(html, { headers: { "Content-Type": "text/html" } }); })() ); });
  4. ଞɺ࠷ۙΈ͚͓ͭͨ΋ͪΌ • ampproject/worker-dom: The same DOM API and Frameworks you

    know, but in a Web Worker. • ίʔυϦʔσΟϯάϝϞ worker-dom-code-reading.md • WebWorker Ͱ DOM ૢ࡞͕Ͱ͖Δ • preact ͷ࣮ݱྫ͕͋Δ
  5. Ͳ͏࣮ݱ͍ͯ͠Δ͔ • Worker Ͱ DOM API Λશ෦࣮૷ • MutationObserver Ͱ

    DOM มԽΛ؂ࢹ • MutationRecord ΛγϦΞϥΠζͯ͠ postMessage • ϝΠϯεϨουͰద༻ (preventDefault ΍ getComupetedProperty ͸ग़དྷͳ͍)