30分で理解する、AWS の WEB Front-end Strategy / Serverless Front-end Strategy

WEB FRONT-END STRATEGY
© 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

View Slide

© 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に共有されています

View Slide

アジェンダ
• UI/UX
• User Experience
• Client-side Rendering (CSR)
• Server-side Rendering (SSR)
• Streaming HTML
• まとめ
3

View Slide

UI / UX
4

View Slide

UI
(User Interface)
UX
(User Experience)

View Slide

UI
(User Interface)
UX
(User Experience)
ウェブサイトやアプリにおける
ボタンや画像など⽬に⾒えているすべての情報
製品やサービスを利⽤する中で得られる
ユーザ体験

View Slide

User Experience
7

View Slide

・なかなか表示されず真っ白な画面のまま
・ボタンをタップしても反応しない・・・
・初回ロードやページ遷移時にガタガタとコンテンツが読み込まれる
・ブラウザバックでスクロール位置が変わってしまった
ウェブサイトにおけるユーザ体験の悪い例

View Slide

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 にしようとする動きもあります。

View Slide

アプリケーションやビジネスの特性に応じて
ユーザ体験・開発者体験を最適化するレンダリング手法を採用する
Rendering Pattern
https://web.dev/rendering-on-the-web/#rehydration-issues
・・・

View Slide

Client-side Rendering
(CSR)
11

View Slide

最小限の HTML のみがサーバによって返却される
ページを表示するロジック、データフェッチ、ルーティングは
ブラウザで実行される JavaScript によって処理する
Client-side Rendering (CSR)
geeawa.io/blog/abc geeawa.io/blog/abc
JS loads
最小限の HTML

View Slide

アプリケーションシェルとなる 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) ユーザの操作をインタラクティブに受け付けることができるタイミング

View Slide

部分的なコンテンツのみを表示（空白ページ or Loading Indicator）
GET /
GET /bundle.js
render (app)
Network
Requests
Main
Thread
FP

View Slide

意味のあるコンテンツがレンダリングされる
GET /
GET /bundle.js
render (app)
Network
Requests
Main
Thread
FCP
FP

View Slide

ユーザのインタラクティブな操作に応答できる
GET /
GET /bundle.js
render (app)
Network
Requests
Main
Thread
FCP TTI
FP

View Slide

ページの表示までの時間は JavaScript のバンドルサイズに依存
GET /
GET /bundle.js
render (app)
Network
Requests
Main
Thread
FCP TTI
FP

View Slide

Report: State of JavaScript Bytes
2011 2017 2023
~ 100KB ~ 300KB ~ 500KB
https://httparchive.org/reports/state-of-javascript
Webページからリクエストされた JavaScript のサイズ（中央値）

View Slide

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
デプロイ
ソース管理ビルド

View Slide

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のみ）

View Slide

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

デプロイ
Cache !!
Cache !!

View Slide

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 で返却することもできるが、
実はキャッシュ最適化の観点ではバッドプラクティス

View Slide

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 の書き換え機能があります

View Slide

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

View Slide

Server-side Rendering
(SSR)
25

View Slide

Server-side Rendering (SSR) 自体は、
昔からあった技術なのになぜ再注目されている？

View Slide

ユーザ体験を向上するためには JavaScript が必要
一方で、JavaScript のコード量が多くなるとユーザ体験が悪化
ユーザ体験と JavaScript のジレンマ

View Slide

Server-side Rendering (SSR)
with Hydration

View Slide

Typical client-side rendering with React

View Slide

Server-side rendering with React

View Slide

Typical client-side hydration with React

View Slide

What is the Hydration?
renderToString() hydrate(HTML)
SSR された文字列 HTML をクライアントで
イベントを受け取れるよう生きた仮想DOMとして再開させること
HTML
(String)
イベントハンドラーの「⽔」で「乾いた」 HTML に⽔を注ぐ

View Slide

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…

View Slide

Server-side Rendering(SSR) Architecture
AWS Lambda
(Render)
Amazon
CloudFront
Browser function URLs
(for SSR)
SSR
Amazon
DynamoDB
Amazon
Aurora
or etc…

View Slide

FCPは短縮できるが、TTI は何も変わらない
むしろ、First Input Delay (FID) を誘発しやすくなることも
SSR with Hydration - Process
Network
Requests
Main
Thread
FID
TTI
GET /bundle.js
Hydration
GET /
FCP
サーバでのデータフェッチ
レンダリング

View Slide

・サーバでデータフェッチが完了しないと、HTMLが返却できない
・全ての JavaScript がロードされるまで Hydration が始まらない
・Hydration が終了するまで interactive にならない
SSR with Hydration の課題

View Slide

Streaming HTML
37

View Slide

Server
ユーザがクリックした箇所やビューポートを優先して Stream で返却
サーバサイドでデータフェッチが終わった部分から順番に表示できる
Streaming HTML

View Slide

SSR + Hydration では CSR と比べて TTI に変わりがなかった問題を克服
Streaming HTML - Process
GET /
GET /bundle.js
Network
Requests
Main
Thread
FCP TTI

View Slide

SSR + Hydration では CSR と比べて TTI に変わりがなかった問題を克服
Streaming HTML - Process
GET /
GET
/bundle.js
Network
Requests
Main
Thread
FCP TTI
必要に応じて
Stream 読み込み

View Slide

AWS Lambda Response Streaming
レスポンスデータが利用可能になった時点で返却することで TTFB を改善する
最大 20MB のレスポンスペイロードをサポート
Response streaming
Next.js の Streaming HTML も動作します

View Slide

Server-side Response Streaming
AWS Lambda
(Render)
Amazon
CloudFront
Browser function URLs
(for SSR)
SSR
Amazon
DynamoDB
Amazon
Aurora
or etc…
Stream
response
Stream
response

View Slide

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 など、すぐに表示できるものは即座に返却しつつ
動的なコンテンツはサーバサイドで準備できてから順次返却する

View Slide

まとめ
44

View Slide

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

View Slide

Thank you!
Slides https://speakerdeck.com/_kensh
Qiita https://qiita.com/_kensh
“ Ask The Speaker “

View Slide

30分で理解する、AWS の WEB Front-end Strategy / Serverless Front-end Strategy

30分で理解する、AWS の WEB Front-end Strategy / Serverless Front-end Strategy

kensh

More Decks by kensh

Other Decks in Technology

Featured

Transcript