- how the previously prerendered pages are statically served to actual website visitors
For brevity, the diagram doesn’t include network-level cloud infrastructure resources, like region, VPC, availability zones, and so on. Check out the Deployment Modes section if you’re interested in that aspect of the deployed cloud infrastructure.
The diagram shows how pages, prerendered as part of the Prerendering Pages flow, are served to actual website visitors.It’s important to point out that, although the initial HTML and page metadata are always returned from the upper Amazon S3 bucket
The flow consists of the following four steps:
- Users visit a particular URL which leads to your website, with a web browser of their choice.
- The HTTP request, issued by the web browser, reaches the Amazon CloudFront
A, which forwards it to the Amazon S3 bucket B. This is where the prerendered content was previously stored.
- The page HTML, located in the S3 bucket
B, is returned to the Amazon CloudFront A, which caches it first, and then returns it back to the user’s browser. Note that if the page for given URL wasn’t found, a default not found page is returned instead.
- User’s browser receives the HTML and starts to fetch the linked static assets (JS, CSS, images, …). As mentioned in the description section, these assets are always located on the
/static/*path, and the HTTP requests for these are always redirected to the lower Amazon S3 bucket
C, on the Amazon CloudFront A.
By default, all of the files that are served via the
/static/* path are cached for 30 days. The rest is cached for 30 seconds. If need be, this can be additionally adjusted via code.
The Website React application is actually a create-react-app application, which, upon creating a production build, places all of the static files (JS, CSS, images, …) into this folder.