page The same content is delivered each time a user views it, without changing the displayed content. Common LP and personal blogs are also treated as static content, ex, HTML files, images, etc…. • Dynamic content delivery web page Deliver content that changes based on user-specific factors such as timing of access to a page, page location, device, etc… ex, Services where a lot of users publish/view articles, such as technical article platforms. 2023/8/24 yoshii0110 3
response to requests. • JavaScript, virtual DOM etc... are also used on the server side. • The disadvantage is that the server side is heavy. if API communication, etc... is used, response time is long. 2023/8/24 yoshii0110 5
response to a request. • SSG generates HTML at build time. • Delivery is very fast, but page content cannot be changed dynamically after deployment. 2023/8/24 yoshii0110 6
response to requests. • When the expiration date is exceeded, the static page is regenerated asynchronously by SSR. • While utilizing the cache, static pages can be automatically updated, and if a request is made again after a certain period of time, the content of the next and subsequent pages will be built and updated. 2023/8/24 yoshii0110 7
to consider when you want to shorten the response time to return static content such as HTML, CSS, and JS images created by SSG is to use a CDN (content delivery network). • CDN is an image that prevents the concentration of access to the origin server and directs them to geographically close edge locations (edge servers). • Edge locations are located around the world and are more distributed than data centers in public cloud regions. 2023/8/24 yoshii0110 8
accessed by a user, it refers to the origin server and caches the content for the next and subsequent accesses. • On subsequent accesses, the cached content is delivered to the user. 2023/8/24 yoshii0110 9
the many page rendering mechanisms introduced earlier, the work done by javascript on the browser side has increased, and the size of js files has also grown. • Even if SSG is used, CDN is important when delivering HTML and javascript, which have grown in size, to the user more quickly. • Recently, there are services that can be used without the need to be aware of CDN. • Vercel • AWS Amplify 2023/8/24 yoshii0110 10
as SSR/ISR where the content changes each time it is accessed, or where the content on a web application is changed and generated by some script or trigger. • For dynamic content delivery, in order to reduce response time to the user, it would be nice if scripts could be executed on the CDN, rather than having to access a more distant origin server each time the user accesses the site, wouldn't it? • This speeds up web applications that handle dynamic content because dynamic content is "cached" and thus response time to client requests is reduced. 2023/8/24 yoshii0110 11
services that allow javascript and other applications to run on the edge of a CDN have become popular. • The reason we are talking about this is that the ability to run applications on the edge affects the caching of dynamic content. • It is possible to generate dynamic content based on user-initiated events, web server-initiated events, etc., and serve it to the client, modify static content, and manipulate the cache. • Cloudflare Workers • Vercel Edge Functions • AWS CloudFront Functions • AWS Lambda@Edge 2023/8/24 yoshii0110 12 引用: https://blog.cloudflare.com/eliminating-cold-starts-with-cloudflare-workers/
"Dynamic Content Storing" inspired by Stale-While- Revalidate • Implement this using hono, Cloudflare Workers, and momento cache 2023/8/24 yoshii0110 13 https://yusukebe.com/posts/2022/dcs/ https://datatracker.ietf.org/doc/html/rfc5861
control caching to control browsers and proxies. • Stale-While-Revalidate is a specification for cache control using such headers. • We often use Cache-Control, Expires, Etag, Last-Modified, and so on in cache specification. • When Stale-While-Revalidate is used, the movement is such that the content is displayed from the cache, but the cache is updated asynchronously behind the scenes. 2023/8/24 yoshii0110 14 https://docs.fastly.com/ja/guides/serving-stale-content https://datatracker.ietf.org/doc/html/rfc5861
Cloudflare's Serverless Services • Runs code on CDN edge servers, unlike AWS Lambda, Google Cloud Functions, etc. • Provides an independent execution environment for each request using isolate, a V8 engine • hono • A small, simple, and super-fast web framework developed for the edge • repo: https://github.com/honojs/hono • docs: https://hono.dev/ 2023/8/24 yoshii0110 16
creates a comfortable world for application engineers and provides a mechanism for faster, more secure, and more stable delivery of the services created by them. • Three functions are currently available. ①: momento Cache ②: momento Topics (Pub/Sub) ③: momento Vector Index (AI / ML) 2023/8/24 yoshii0110 17 https://www.gomomento.com/
diagram 2023/8/24 yoshii0110 20 1): When a user views a web page, Cloudflare workers retrieve dynamic content from momento cache, not origin. 2): If there is no content cache in the momento cache, fetch to origin.
cache fine flow 2023/8/24 yoshii0110 21 The assumption is that two identical dynamic contents are cached in the momento cache. Cache the same response with keys prefixed "fresh" and "stale" Set the ttl for the "stale" one longer 1): First, return cached value with "fresh" prefix key 2): When the TTL of the "fresh" cache expires, return the "stale" cache and replace the fresh cache with the fetched one.