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

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

Transcript

1. View Slide

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

   View Slide

3. #ginzajs
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

10. #ginzajs
    なぜ表⽰速度？
    ‣
    
    
    ‣ index.html
    
    
    ‣ JS
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    React App
    
    
    
    
    
    
    
    You need to enable JavaScript to r
    
    
    
    
    
    <!— !! —>
    
    
    <br/><br/><script src="/static/js/main.e41c5136.chunk.js"><br/><br/><br/></body><br/><br/><br/></html><br/><br/><br/>SPA<br/>HTML表⽰後 JS実⾏後<br/>

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

20. #ginzajs
    まとめ
    ‣ SSR
    
    
    ‣ SSR
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide