WEB FRONT-END STRATEGY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS の WEB Front-end Strategy 30分で理解する Kensuke Shimokawa Snr. Serverless Specialist Amazon Web Services Japan M O V A B L E T Y P E D E V E L O P E R S & D E S I G N E R S C O N F E R E N C E

WEB FRONT-END STRATEGY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. 2 Kensuke Shimokawa Amazon Web Services Japan Snr. Serverless Specialist Slides https://speakerdeck.com/_kensh Qiita https://qiita.com/_kensh 本日の資料もspeakerdeckに共有されています

WEB FRONT-END STRATEGY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. アジェンダ • UI/UX • User Experience • Client-side Rendering (CSR) • Server-side Rendering (SSR) • Streaming HTML • まとめ 3

WEB FRONT-END STRATEGY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. UI / UX 4

WEB FRONT-END STRATEGY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. 5 UI (User Interface) UX (User Experience)

WEB FRONT-END STRATEGY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. 6 UI (User Interface) UX (User Experience) ウェブサイトやアプリにおける ボタンや画像など⽬に⾒えているすべての情報 製品やサービスを利⽤する中で得られる ユーザ体験

WEB FRONT-END STRATEGY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. User Experience 7

WEB FRONT-END STRATEGY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. ・なかなか表示されず真っ白な画面のまま ・ボタンをタップしても反応しない・・・ ・初回ロードやページ遷移時にガタガタとコンテンツが読み込まれる ・ブラウザバックでスクロール位置が変わってしまった ウェブサイトにおけるユーザ体験の悪い例

WEB FRONT-END STRATEGY © 2023, Amazon Web Services, Inc. or 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 にしようとする動きもあります。

WEB FRONT-END STRATEGY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. アプリケーションやビジネスの特性に応じて ユーザ体験・開発者体験を最適化するレンダリング手法を採用する Rendering Pattern https://web.dev/rendering-on-the-web/#rehydration-issues ・・・

WEB FRONT-END STRATEGY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Client-side Rendering (CSR) 11

WEB FRONT-END STRATEGY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. 最小限の HTML のみがサーバによって返却される ページを表示するロジック、データフェッチ、ルーティングは ブラウザで実行される JavaScript によって処理する Client-side Rendering (CSR) geeawa.io/blog/abc geeawa.io/blog/abc JS loads 最小限の HTML

WEB FRONT-END STRATEGY © 2023, Amazon Web Services, Inc. or 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) ユーザの操作をインタラクティブに受け付けることができるタイミング

WEB FRONT-END STRATEGY © 2023, Amazon Web Services, Inc. or 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) ユーザの操作をインタラクティブに受け付けることができるタイミング

WEB FRONT-END STRATEGY © 2023, Amazon Web Services, Inc. or 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) ユーザの操作をインタラクティブに受け付けることができるタイミング

WEB FRONT-END STRATEGY © 2023, Amazon Web Services, Inc. or 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) ユーザの操作をインタラクティブに受け付けることができるタイミング

WEB FRONT-END STRATEGY © 2023, Amazon Web Services, Inc. or 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) ユーザの操作をインタラクティブに受け付けることができるタイミング

WEB FRONT-END STRATEGY © 2023, Amazon Web Services, Inc. or 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 のサイズ（中央値）

WEB FRONT-END STRATEGY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Client-side Rendering (CSR) Architecture Amazon S3 Amazon CloudFront Browser コンテンツ キャッシュ リクエスト HTML, CSS, JS Rendering OAC アクセス (Origin Access Control) API 実行 データを取得 Amazon API Gateway AWS Lambda or GitHub AWS CodeCommit AWS CodeBuild デプロイ ソース管理 ビルド

WEB FRONT-END STRATEGY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Cache-Control: max-age などのディレクティブヘッダにより ブラウザの Private Cache や CDN の Public Cache が利用できます Private Cache vs Public Cache （オリジンサーバ） Cache !! Cache !! Private Cache Public Cache キャッシュサイズに制限がある点には注意！ Amazon S3 Amazon CloudFront （CDN） ブラウザ オブジェクトメタデータの例 Cache-Control: max-age=60（ブラウザ・CDN両方） Cache-Control: s-maxage=60 （CDNのみ）

WEB FRONT-END STRATEGY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. 全てのコンテンツは CDN でキャッシュしつつ、 ハッシュ付きファイルは、ブラウザのキャッシュも有効にする。 Client Side Routing するアプリのキャッシュ戦略 index.html には、ハッシュ付きの静的コンテンツのパスを記載する（Cache Busting） デプロイ時には、CDN にキャッシュしているファイルの invalidate （キャッシュのクリア）を行う。 デプロイ毎にハッシュは変わるため、ブラウザキャッシュに Hit しない場合は CDN のコンテンツを参照することができる。 デプロイ Cache !! Cache !!

WEB FRONT-END STRATEGY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. 22 Client Side Routing 実装時の注意点 React Router などを使用して Client Side Routing の実装をした際に、 /about などでブラウザのリロードをすると、403(access denied)となる Amazon CloudFront Amazon S3 /about 403 Error OAI アクセス (Origin Access Identiy) / 200 OK /index.html （Default root object） カスタムエラーレスポンスで 403 Error だった場合は index.html を 200 OK で返却することもできるが、 実はキャッシュ最適化の観点ではバッドプラクティス

WEB FRONT-END STRATEGY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. 23 CloudFront Functions による URL の書き換え CloudFront Functions でリクエスト URL を書き換えることで Edge Location のキャッシュヒット率を高める Amazon S3 Viewer Request Viewer Response Origin Request Origin Response CloudFront Functions CloudFront Edge Location キャッシュ キャッシュがある CloudFront Regional Edge Location https://aws.amazon.com/jp/blogs/news/introducing-cloudfront-functions-run-your-code-at-the-edge-with-low-latency-at-any-scale/ https://aws.amazon.com/jp/blogs/news/implementing-default-directory-indexes-in-amazon-s3-backed-amazon-cloudfront-origins-using-cloudfront-functions/ キャッシュ Lambda @Edge キャッシュがない Lambda @Edge /about /index.html / /index.html /static/js/main.123.js /static/js/main.123.js Rewrite URL!! ※ Amplify の場合はマネージドで URL の書き換え機能があります

WEB FRONT-END STRATEGY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Client-side Rendering - まとめ ・アプリケーションシェルとなる /index.html に紐づく 全ての Static Assets をクライアントにロードしてからレンダリング ・全ての Static Assets が読み込まれるまで表示できない。 ・CDN, Browser におけるキャッシュも有効

WEB FRONT-END STRATEGY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Server-side Rendering (SSR) 25

WEB FRONT-END STRATEGY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Server-side Rendering (SSR) 自体は、 昔からあった技術なのになぜ再注目されている？

WEB FRONT-END STRATEGY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. ユーザ体験を向上するためには JavaScript が必要 一方で、JavaScript のコード量が多くなるとユーザ体験が悪化 ユーザ体験と JavaScript のジレンマ

WEB FRONT-END STRATEGY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Server-side Rendering (SSR) with Hydration

WEB FRONT-END STRATEGY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Typical client-side rendering with React

WEB FRONT-END STRATEGY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Server-side rendering with React

WEB FRONT-END STRATEGY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Typical client-side hydration with React

WEB FRONT-END STRATEGY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. What is the Hydration? renderToString() hydrate(HTML) SSR された文字列 HTML をクライアントで イベントを受け取れるよう生きた仮想DOMとして再開させること HTML (String) イベントハンドラーの 「⽔」 で 「乾いた」 HTML に⽔を注ぐ

WEB FRONT-END STRATEGY © 2023, Amazon Web Services, Inc. or 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…

WEB FRONT-END STRATEGY © 2023, Amazon Web Services, Inc. or 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

WEB FRONT-END STRATEGY © 2023, Amazon Web Services, Inc. or 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) ユーザの操作をインタラクティブに受け付けることができるタイミング

WEB FRONT-END STRATEGY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. ・サーバでデータフェッチが完了しないと、HTMLが返却できない ・全ての JavaScript がロードされるまで Hydration が始まらない ・Hydration が終了するまで interactive にならない SSR with Hydration の課題

WEB FRONT-END STRATEGY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Streaming HTML 37

WEB FRONT-END STRATEGY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Server ユーザがクリックした箇所やビューポートを優先して Stream で返却 サーバサイドでデータフェッチが終わった部分から順番に表示できる Streaming HTML

WEB FRONT-END STRATEGY © 2023, Amazon Web Services, Inc. or 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) ユーザの操作をインタラクティブに受け付けることができるタイミング

WEB FRONT-END STRATEGY © 2023, Amazon Web Services, Inc. or 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) ユーザの操作をインタラクティブに受け付けることができるタイミング

WEB FRONT-END STRATEGY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS Lambda Response Streaming レスポンスデータが利用可能になった時点で返却することで TTFB を改善する 最大 20MB のレスポンスペイロードをサポート Response streaming Next.js の Streaming HTML も動作します

WEB FRONT-END STRATEGY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Server-side Response Streaming 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 Stream response Stream response

WEB FRONT-END STRATEGY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Response streaming Demo Next.js の Streaming HTML を AWS Lambda Response Streaming で https://github.com/awslabs/aws-lambda-web-adapter/tree/main/examples/nextjs-response-streaming Header など、すぐに表示できるものは即座に返却しつつ 動的なコンテンツはサーバサイドで準備できてから順次返却する

WEB FRONT-END STRATEGY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. まとめ 44

WEB FRONT-END STRATEGY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. まとめ • 様々なフロントエンドのレンダリング手法を理解する • CSR, SSR など • ユーザ体験（UX）を最適化するための手段として把握する • Streaming HTML • on AWS での実装ポイントを知る • CDN としての Amazon CloudFront / Cache • サーバーサイド処理のための AWS Lambda と function URLs • 徐々に画面を描画するための AWS Lambda Response Streaming 45

WEB FRONT-END STRATEGY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Thank you! © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Slides https://speakerdeck.com/_kensh Qiita https://qiita.com/_kensh “ Ask The Speaker “