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

Gatsby, Gridsome, Next.js, etc … JSX pptx お仕事 Watching mottox2
@ ؿٔ٦ٓٝأ8FCؒٝآص، ⾃⼰紹介ひとこと

#ginzajs

#ginzajs 最近のお気もち SSRやりたくない ‣ ‣ Hosting Function ⾒ ‣ TTFB
‣ ‣ ‣

#ginzajs SSR/SPA ‣ SSR SPA hydration ‣ Next.js Nuxt.js

#ginzajs そもそもなぜSSR/SPAだったのか？ ‣ SSR Consumer ‣ ‣ SPA ‣ DX
‣ SEO SNS ‣ SSR ‣ SPA ‣ SSR

#ginzajs SPA+SSRは開発者体験‧開発速度に寄与するか？ ‣ SSR ‣ DX SPA SSR ‣ Laravel
Rails ‣ pjax Rails Turbolinks DXが良い DXが悪い SPAによるDX SSRによるDX 全体としてDXはよくなっているのか？

#ginzajs じゃあ、どうするか？ ‣ SSR DX ‣ SSR ‣

#ginzajs 解決するべき課題 1 . SEO 2 . SNS OGP 3
. Lambda@Edge Prerendering Google

#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実⾏後

#ginzajs なぜ表⽰速度？ ‣ Twitter ‣ ‣ B ‣ ‣ ‣
2 ‣ C ‣ ServiceWorker 2 ‣ ‣ SSR

#ginzajs 改善の⽅針 1 . JS Code Splitting 2 .

#ginzajs バンドルサイズの削減 1 ‣ SPA JS jQuery ‣ JS ‣
‣ CodeSplitting ‣ Next.js Nuxt.js JS ‣ Lighthouse ‣

#ginzajs HTMLのプリレンダリング 2 ‣ Lighthouse PageSpeed Insight ‣ HTML ‣
JS HTML

#ginzajs HTMLのプリレンダリング 2 ‣ SPA HTML ‣ react-snapshot create-react-app ‣
Static HTML export Next.js ‣ Gatsby

#ginzajs HTMLのプリレンダリング - 戦略 2 ‣ ‣ `/posts` `/posts/:id` ‣

#ginzajs HTMLのプリレンダリング - 応⽤ 2 ‣ Skeleton ‣ ‣

#ginzajs ありそうな質問 ‣ ‣ Next.js (without SSR) ‣ CDN Lighthouse
Performance 90 ‣ SEO ‣ ‣

#ginzajs まとめ ‣ SSR ‣ SSR

#ginzajs フレームワークに乗りたい ‣ Next.js Nuxt.js ‣ ‣ ‣ SSR ‣
‣ webpack.con fi g.js ‣ ‣ Appendix

#ginzajs Next.jsの最適化に注⽬ ‣ ‣ Next.js Chrome ‣ ‣ async/await Poly
fi ll ‣ Code Splitting ‣ ⾒ commons chunk ‣ Static HTML Export話 Appendix

Thank you! 201 9 . 1 2 . 9 Ginza.js
# 7 / @mottox 2

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

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

mottox2

More Decks by mottox2

Other Decks in Programming

Featured

Transcript

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

#ginzajs

#ginzajs 最近のお気もち SSRやりたくない ‣ ‣ Hosting Function ⾒ ‣ TTFB

#ginzajs SSR/SPA ‣ SSR SPA hydration ‣ Next.js Nuxt.js

#ginzajs そもそもなぜSSR/SPAだったのか？ ‣ SSR Consumer ‣ ‣ SPA ‣ DX

#ginzajs SPA+SSRは開発者体験‧開発速度に寄与するか？ ‣ SSR ‣ DX SPA SSR ‣ Laravel

#ginzajs じゃあ、どうするか？ ‣ SSR DX ‣ SSR ‣

#ginzajs 解決するべき課題 1 . SEO 2 . SNS OGP 3

#ginzajs なぜ表⽰速度？ ‣ ‣ index.html ‣ JS <!doctype html> <html

#ginzajs なぜ表⽰速度？ ‣ Twitter ‣ ‣ B ‣ ‣ ‣

#ginzajs 改善の⽅針 1 . JS Code Splitting 2 .

#ginzajs バンドルサイズの削減 1 ‣ SPA JS jQuery ‣ JS ‣

#ginzajs HTMLのプリレンダリング 2 ‣ Lighthouse PageSpeed Insight ‣ HTML ‣

#ginzajs HTMLのプリレンダリング 2 ‣ SPA HTML ‣ react-snapshot create-react-app ‣

#ginzajs HTMLのプリレンダリング - 戦略 2 ‣ ‣ `/posts` `/posts/:id` ‣

#ginzajs HTMLのプリレンダリング - 応⽤ 2 ‣ Skeleton ‣ ‣

#ginzajs ありそうな質問 ‣ ‣ Next.js (without SSR) ‣ CDN Lighthouse

#ginzajs ありそうな質問 ‣ ‣ Next.js (without SSR) ‣ CDN Lighthouse

#ginzajs まとめ ‣ SSR ‣ SSR

#ginzajs フレームワークに乗りたい ‣ Next.js Nuxt.js ‣ ‣ ‣ SSR ‣

#ginzajs Next.jsの最適化に注⽬ ‣ ‣ Next.js Chrome ‣ ‣ async/await Poly

Thank you! 201 9 . 1 2 . 9 Ginza.js