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

SSRを避けるためにやっていること / ssr-alternative

mottox2
December 09, 2019

SSRを避けるためにやっていること / ssr-alternative

Ginza.js #7の発表資料です

mottox2

December 09, 2019
Tweet

More Decks by mottox2

Other Decks in Programming

Transcript

  1. Gatsby, Gridsome, Next.js, etc … JSX pptx お仕事 Watching mottox2

    @ ؿٔ٦ٓٝأ8FCؒٝآص، ⾃⼰紹介 ひとこと
  2. #ginzajs SPA+SSRは開発者体験‧開発速度に寄与するか? ‣ SSR ‣ DX SPA SSR ‣ Laravel

    Rails ‣ pjax Rails Turbolinks DXが良い DXが悪い SPAによるDX SSRによるDX 全体としてDXはよくなっているのか?
  3. #ginzajs なぜ表⽰速度? ‣ ‣ index.html ‣ JS <!doctype html> <html

    lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="/favicon.ico" /> <meta name="viewport" content="width=device-widt <meta name="theme-color" content="#000000" /> <meta name="description" content="Web site creat <link rel="apple-touch-icon" href="/logo192.png" <link rel="manifest" href="/manifest.json" /> <title>React App</title> <link href="/static/css/main.d1b05096.chunk.css" </head> <body><noscript>You need to enable JavaScript to r <div id="root"></div> <script><!— !! —></script> <script src="/static/js/2.6c6eb89e.chunk.js"></s <script src="/static/js/main.e41c5136.chunk.js"> </body> </html> SPA HTML表⽰後 JS実⾏後
  4. #ginzajs バンドルサイズの削減 1 ‣ SPA JS jQuery ‣ JS ‣

    ‣ CodeSplitting ‣ Next.js Nuxt.js JS ‣ Lighthouse ‣
  5. #ginzajs Next.jsの最適化に注⽬ ‣ ‣ Next.js Chrome ‣ ‣ async/await Poly

    fi ll ‣ Code Splitting ‣ ⾒ commons chunk ‣ Static HTML Export話 Appendix