Tweet
Tweet

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

#ginzajs

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

#ginzajs なぜ表⽰速度？ ‣ ‣ index.html ‣ JS React App You need to enable JavaScript to r
<!— !! —> </body> </html> SPA HTML表⽰後 JS実⾏後

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

#ginzajs まとめ ‣ SSR ‣ SSR

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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