AWS クラウドでは Front-end をどのように捉えてサービスを展開しているのでしょうか? 特に開発者や事業者にとって UI/UX やエッジでのクラウド利用が以前にもまして重要になってきています。本セッションでは AWS での Front-end 技術をおさらいしつつ、最新の機能にも触れてご紹介したいと思います。
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 Strategy30分で理解するKensuke ShimokawaSnr. Serverless SpecialistAmazon Web Services JapanM 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
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. 2Kensuke ShimokawaAmazon Web Services JapanSnr. Serverless SpecialistSlides https://speakerdeck.com/_kenshQiita 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 / UX4
WEB FRONT-END STRATEGY© 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. 5UI(User Interface)UX(User Experience)
WEB FRONT-END STRATEGY© 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. 6UI(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 Experience7
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 Patternhttps://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/abcJS loads最小限の HTML
WEB FRONT-END STRATEGY© 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.アプリケーションシェルとなる HTML を取得Client-side Rendering (CSR) - ProcessGET /GET /bundle.jsrender (app)NetworkRequestsMainThreadFirst 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) - ProcessGET /GET /bundle.jsrender (app)NetworkRequestsMainThreadFPFirst 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) - ProcessGET /GET /bundle.jsrender (app)NetworkRequestsMainThreadFCPFPFirst 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) - ProcessGET /GET /bundle.jsrender (app)NetworkRequestsMainThreadFCP TTIFPFirst 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) - ProcessGET /GET /bundle.jsrender (app)NetworkRequestsMainThreadFCP TTIFPFirst 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 Bytes2011 2017 2023~ 100KB ~ 300KB ~ 500KBhttps://httparchive.org/reports/state-of-javascriptWebページからリクエストされた JavaScript のサイズ(中央値)
WEB FRONT-END STRATEGY© 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.Client-side Rendering (CSR) ArchitectureAmazon S3AmazonCloudFrontBrowserコンテンツキャッシュリクエストHTML, CSS, JSRenderingOAC アクセス(Origin Access Control)API 実行データを取得Amazon API Gateway AWS LambdaorGitHub 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 S3Amazon 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. 22Client Side Routing 実装時の注意点React Router などを使用して Client Side Routing の実装をした際に、/about などでブラウザのリロードをすると、403(access denied)となるAmazon CloudFront Amazon S3/about403 ErrorOAI アクセス(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. 23CloudFront Functions による URL の書き換えCloudFront Functions でリクエスト URL を書き換えることでEdge Location のキャッシュヒット率を高めるAmazon S3Viewer RequestViewer ResponseOrigin RequestOrigin ResponseCloudFrontFunctionsCloudFront Edge LocationキャッシュキャッシュがあるCloudFront Regional Edge Locationhttps://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.jsRewrite 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) ArchitectureAWS Lambda(Render)AmazonCloudFrontBrowser API Gateway(for SSR)https://github.com/aws-samples/react-ssr-lambdaSSR(Server-side Render)AmazonDynamoDB基本的なサーバサイドレンダリングの構成AmazonAuroraor etc…
WEB FRONT-END STRATEGY© 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.Server-side Rendering(SSR) ArchitectureAWS Lambda(Render)AmazonCloudFrontBrowser function URLs(for SSR)SSR(Server-side Render)AmazonDynamoDB基本的なサーバサイドレンダリングの構成AmazonAuroraor 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 - ProcessNetworkRequestsMainThreadFIDTTIGET /bundle.jsHydrationGET /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 HTML37
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 - ProcessGET /GET /bundle.jsNetworkRequestsMainThreadFCP TTIFirst 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 - ProcessGET /GET/bundle.jsNetworkRequestsMainThreadFCP 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 streamingNext.js の Streaming HTML も動作します
WEB FRONT-END STRATEGY© 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.Server-side Response StreamingAWS Lambda(Render)AmazonCloudFrontBrowser function URLs(for SSR)SSR(Server-side Render)AmazonDynamoDB基本的なサーバサイドレンダリングの構成AmazonAuroraor etc…https://github.com/aws-samples/react-ssr-lambdaStreamresponseStreamresponse
WEB FRONT-END STRATEGY© 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.Response streamingDemoNext.js の Streaming HTML をAWS Lambda Response Streaming でhttps://github.com/awslabs/aws-lambda-web-adapter/tree/main/examples/nextjs-response-streamingHeader など、すぐに表示できるものは即座に返却しつつ動的なコンテンツはサーバサイドで準備できてから順次返却する
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 Streaming45
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/_kenshQiita https://qiita.com/_kensh“ Ask The Speaker “