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
片田舎のおっさん、 Swift Buildのダイアモンド問題解決の不具合修正PRを出すが、解決方法がキャッシュをしないようにすることであり、ビルド時間が伸びると言われてマージされないので高速化もする/swiftbuild
Avatar for yimajo yimajo
0
340
XHTMLが残したもの
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
1
380
コンパウンドプロダクト開発のためのローカルプロセスマネージャー再発明 #layerxgo
Avatar for izumin5210 izumin5210
0
620
AIに既存システムを理解させる技術　～レガシーを見捨てないハーネスエンジニアリング入門～
Avatar for Ochtum ochtum
0
200
PHPプロジェクトの結合バランスを可視化する #php_night
Avatar for Takuma Kajikawa kajitack
0
200
Press start. Python's next generation.
Avatar for Carol Willing willingc
PRO
3
300
AWS Transform Custom による Spring Boot 2.xから4.xへのVerUp
Avatar for Satoshi Kaneyasu satoshi256kbyte
2
130
go-spidermonkeyでAIエージェントのCode Modeを実装する
Avatar for syumai syumai
3
1.5k
高専キャリア LT 発表内容
Avatar for Crysta1221 crysta1221
6
5.5k
Vibes Containers 〜AIで変わるコンテナ設計と運用〜
Avatar for Tetsuya Kikuchi tkikuc
1
430
iOS開発×AI駆動開発 〜最近使って便利だったスキルの話〜
Avatar for nogu nogu66
0
140
PyO3 で既存 Python 評価器を Rust core 化する ー wasm-bindgen でブラウザにも配るための設計
Avatar for 𝕂' kdash
1
340

Featured

See All Featured
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
490
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
500
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
400
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.8k
It's Worth the Effort
Avatar for 3n 3n
188
29k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.4k
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
470
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
274
21k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.3k
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
760
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.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