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

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

Avatar for mottox2 mottox2
December 09, 2019
Programming
3.3k
9

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

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

Avatar for mottox2

mottox2

December 09, 2019

More Decks by mottox2

See All by mottox2
つくり方を変えていく | change-how-we-build
Avatar for mottox2 mottox2
2
1.4k
もう一歩進めたい OG画像の動的生成
Avatar for mottox2 mottox2
7
2.9k
なぜコピペで使うコンポーネント集を利用するのか？
Avatar for mottox2 mottox2
8
7.6k
UIコンポーネントライブラリをうまく使うためにできること / components-with-designer
Avatar for mottox2 mottox2
7
4.1k
Figma Plugin公開までの壁を乗り越える
Avatar for mottox2 mottox2
3
4.2k
Puppeteerでつくる画像と動画 / images and videos made with puppeteer
Avatar for mottox2 mottox2
0
790
手触りのよいウェブを考える / better-mobile-web
Avatar for mottox2 mottox2
3
2.1k
組織と権限とSlack App / slack-app-with-roles
Avatar for mottox2 mottox2
1
740
JSXでつくる宣言的UIなプレゼンテーション / jsx-presentation
Avatar for mottox2 mottox2
7
34k

Other Decks in Programming

See All in Programming
【デモ】Kiroで体験する仕様駆動開発｜設計からコーディングまでAIと進める開発フロー
Avatar for 工藤皓夢 cmkudo
0
500
Pythonの実行はどこまで賢くなったのか？ CPythonとPyPyから見る最適化のしくみ
Avatar for curekoshimizu curekoshimizu
4
2.3k
AIに既存システムを理解させる技術　～レガシーを見捨てないハーネスエンジニアリング入門～
Avatar for Ochtum ochtum
0
170
ハーネス設計入門 〜プロンプト、コンテキストの次〜
Avatar for kinopee kinopeee
36
22k
Introducing Stack Pull Request in GitHub
Avatar for KAMEGAWA Kazushi kkamegawa
0
110
How I Won Prize Money at a Hackathon Using Codex and Symphony Alpha
Avatar for yasei no otoko yasei_no_otoko
0
130
コンパウンドプロダクト開発のためのローカルプロセスマネージャー再発明 #layerxgo
Avatar for izumin5210 izumin5210
0
460
AI Readyの正体はデータマネジメントだ メダリオン2.0の最前線
Avatar for freee freee
PRO
0
420
komatsuna「分散システムにおけるバグ分析手法」
Avatar for こまつな komatsunaqa
0
290
AI Engineeringは、AIプロダクトだけのものか？ 〜AIがソフトウェアを作る時代の新しい当たり前〜 / No AI in your product. AI Engineering in your development.
Avatar for r-kagaya rkaga
5
550
AWS Transform Custom による Spring Boot 2.xから4.xへのVerUp
Avatar for Satoshi Kaneyasu satoshi256kbyte
2
110
S3 を使うアプリケーションをローカル完結で動かすことに全力を注いでみた / Running S3 Apps Offline
Avatar for Daisuke Garaike contour_gara
0
670

Featured

See All Featured
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
2
530
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
450
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
8
36k
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
420
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
1
510
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.3k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
82
6.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
56
3.4k
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon Słowik szymonslowik
1
400
Design in an AI World
Avatar for tapps tapps
1
290
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
480
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.4k

Transcript

  1. None

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

    @ ؿٔ٦ٓٝأ8FCؒٝآص، ⾃⼰紹介 ひとこと

  3. #ginzajs

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

    ‣ ‣ ‣

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

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

    ‣ SEO SNS ‣ SSR ‣ SPA ‣ SSR

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

    Rails ‣ pjax Rails Turbolinks DXが良い DXが悪い SPAによるDX SSRによるDX 全体としてDXはよくなっているのか？

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

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

    . Lambda@Edge Prerendering Google

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

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

    2 ‣ C ‣ ServiceWorker 2 ‣ ‣ SSR

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

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

    ‣ CodeSplitting ‣ Next.js Nuxt.js JS ‣ Lighthouse ‣

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

    JS HTML

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

    Static HTML export Next.js ‣ Gatsby

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

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

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

    Performance 90 ‣ SEO ‣ ‣

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

    Performance 90 ‣ SEO ‣ ‣

  20. #ginzajs まとめ ‣ SSR ‣ SSR

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

    ‣ webpack.con fi g.js ‣ ‣ Appendix

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

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

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

    # 7 / @mottox 2