its affiliates. All rights reserved. アジェンダ • UI/UX • User Experience • Client-side Rendering (CSR) • Server-side Rendering (SSR) • Streaming HTML • まとめ 3
its affiliates. All rights reserved. ・なかなか表示されず真っ白な画面のまま ・ボタンをタップしても反応しない・・・ ・初回ロードやページ遷移時にガタガタとコンテンツが読み込まれる ・ブラウザバックでスクロール位置が変わってしまった ウェブサイトにおけるユーザ体験の悪い例
its affiliates. All rights reserved. Core Web Vitals ウェブサイトにおけるユーザ体験の指標 TTFB Time To First Byte ブラウザが最初のバイトを 受信するまでの時間 FCP First Contentful Paint ブラウザが最初の要素を 表示するまでの時間 LCP Largest Contentful Paint ブラウザが最も大きい要素を 表示するまでの時間 TTI Time To Interactive ユーザの入力を即座に応答できる ようになるまでの時間 CLS Cumulative Layout Shift ページレイアウトのズレを 定量的に数値化 FID First Input Delay ユーザが入力をしてから ブラウザが応答するまでの時間 ※ 2024年に FID ではなく、INP (Interaction to Next Paint) を Core web vitals の metric にしようとする動きもあります。
its affiliates. All rights reserved. アプリケーションやビジネスの特性に応じて ユーザ体験・開発者体験を最適化するレンダリング手法を採用する Rendering Pattern https://web.dev/rendering-on-the-web/#rehydration-issues ・・・
its affiliates. All rights reserved. 最小限の HTML のみがサーバによって返却される ページを表示するロジック、データフェッチ、ルーティングは ブラウザで実行される JavaScript によって処理する Client-side Rendering (CSR) geeawa.io/blog/abc geeawa.io/blog/abc JS loads 最小限の HTML
its affiliates. All rights reserved. アプリケーションシェルとなる HTML を取得 Client-side Rendering (CSR) - Process GET / GET /bundle.js render (app) Network Requests Main Thread First Paint (FP) 背景色やヘッダーなど視覚的に何かが表示されたタイミング First Contentful Paint (FCP) 何らかユーザにとって意味のある DOM 要素が表示されたタイミング Time to Interactive (TTI) ユーザの操作をインタラクティブに受け付けることができるタイミング
its affiliates. All rights reserved. 部分的なコンテンツのみを表示（空白ページ or Loading Indicator） Client-side Rendering (CSR) - Process GET / GET /bundle.js render (app) Network Requests Main Thread FP First Paint (FP) 背景色やヘッダーなど視覚的に何かが表示されたタイミング First Contentful Paint (FCP) 何らかユーザにとって意味のある DOM 要素が表示されたタイミング Time to Interactive (TTI) ユーザの操作をインタラクティブに受け付けることができるタイミング
its affiliates. All rights reserved. 意味のあるコンテンツがレンダリングされる Client-side Rendering (CSR) - Process GET / GET /bundle.js render (app) Network Requests Main Thread FCP FP First Paint (FP) 背景色やヘッダーなど視覚的に何かが表示されたタイミング First Contentful Paint (FCP) 何らかユーザにとって意味のある DOM 要素が表示されたタイミング Time to Interactive (TTI) ユーザの操作をインタラクティブに受け付けることができるタイミング
its affiliates. All rights reserved. ユーザのインタラクティブな操作に応答できる Client-side Rendering (CSR) - Process GET / GET /bundle.js render (app) Network Requests Main Thread FCP TTI FP First Paint (FP) 背景色やヘッダーなど視覚的に何かが表示されたタイミング First Contentful Paint (FCP) 何らかユーザにとって意味のある DOM 要素が表示されたタイミング Time to Interactive (TTI) ユーザの操作をインタラクティブに受け付けることができるタイミング
its affiliates. All rights reserved. ページの表示までの時間は JavaScript のバンドルサイズに依存 Client-side Rendering (CSR) - Process GET / GET /bundle.js render (app) Network Requests Main Thread FCP TTI FP First Paint (FP) 背景色やヘッダーなど視覚的に何かが表示されたタイミング First Contentful Paint (FCP) 何らかユーザにとって意味のある DOM 要素が表示されたタイミング Time to Interactive (TTI) ユーザの操作をインタラクティブに受け付けることができるタイミング
its affiliates. All rights reserved. Report: State of JavaScript Bytes 2011 2017 2023 ~ 100KB ~ 300KB ~ 500KB https://httparchive.org/reports/state-of-javascript Webページからリクエストされた JavaScript のサイズ（中央値）
its affiliates. All rights reserved. What is the Hydration? renderToString(<App/>) hydrate(HTML) SSR された文字列 HTML をクライアントで イベントを受け取れるよう生きた仮想DOMとして再開させること HTML (String) イベントハンドラーの 「⽔」 で 「乾いた」 HTML に⽔を注ぐ
its affiliates. All rights reserved. Server-side Rendering(SSR) Architecture AWS Lambda (Render) Amazon CloudFront Browser API Gateway (for SSR) https://github.com/aws-samples/react-ssr-lambda SSR (Server-side Render) Amazon DynamoDB 基本的なサーバサイドレンダリングの構成 Amazon Aurora or etc…
its affiliates. All rights reserved. Server-side Rendering(SSR) Architecture AWS Lambda (Render) Amazon CloudFront Browser function URLs (for SSR) SSR (Server-side Render) Amazon DynamoDB 基本的なサーバサイドレンダリングの構成 Amazon Aurora or etc… https://github.com/aws-samples/react-ssr-lambda
its affiliates. All rights reserved. FCPは短縮できるが、TTI は何も変わらない むしろ、First Input Delay (FID) を誘発しやすくなることも SSR with Hydration - Process Network Requests Main Thread FID TTI GET /bundle.js Hydration GET / FCP サーバでのデータフェッチ レンダリング First Paint (FP) 背景色やヘッダーなど視覚的に何かが表示されたタイミング First Contentful Paint (FCP) 何らかユーザにとって意味のある DOM 要素が表示されたタイミング Time to Interactive (TTI) ユーザの操作をインタラクティブに受け付けることができるタイミング
its affiliates. All rights reserved. ・サーバでデータフェッチが完了しないと、HTMLが返却できない ・全ての JavaScript がロードされるまで Hydration が始まらない ・Hydration が終了するまで interactive にならない SSR with Hydration の課題
its affiliates. All rights reserved. SSR + Hydration では CSR と比べて TTI に変わりがなかった問題を克服 Streaming HTML - Process GET / GET /bundle.js Network Requests Main Thread FCP TTI First Paint (FP) 背景色やヘッダーなど視覚的に何かが表示されたタイミング First Contentful Paint (FCP) 何らかユーザにとって意味のある DOM 要素が表示されたタイミング Time to Interactive (TTI) ユーザの操作をインタラクティブに受け付けることができるタイミング
its affiliates. All rights reserved. SSR + Hydration では CSR と比べて TTI に変わりがなかった問題を克服 Streaming HTML - Process GET / GET /bundle.js Network Requests Main Thread FCP TTI 必要に応じて Stream 読み込み First Paint (FP) 背景色やヘッダーなど視覚的に何かが表示されたタイミング First Contentful Paint (FCP) 何らかユーザにとって意味のある DOM 要素が表示されたタイミング Time to Interactive (TTI) ユーザの操作をインタラクティブに受け付けることができるタイミング
_kensh
kgmyshin
.png){kind=avatar}
tomodo_ysys
nikkei_engineer_recruiting
kaminashi
faithandbrave
kyohmizu
kenichirokimura
mappie_kochi
iselegant
alchemy1115
masapyon1212
nnstt1
thekraken
shlominoach
panda_program
keavy
sstephenson
tenderlove
maggiecrowley
ufuk
jonrohan
notwaldorf
yeseniaperezcruz
csswizardry
