Webiny Docs home page
Warning
You're browsing the documentation for an old version of Webiny. Consider upgrading your project to Webiny 5.40.x.
What you’ll learn
  • how the previously prerendered pages are statically served to actual website visitors

Diagram
anchor

Webiny Cloud Infrastructure - Website - Serving PagesWebiny Cloud Infrastructure - Website - Serving Pages
(click to enlarge)

Description
anchor

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 B, all of the static assets (CSS, JS, images, …) are still returned from the lower one C, to which the React application was uploaded during the deployment of the Website application. These static files are always located on the /static/* path (for examples /static/js/2.3ceb1741.chunk.js), so defining appropriate redirect and caching rules on the Amazon CloudFront A is not hard to do.

Check out this specific set of rules in the infrastructure codeexternal link in our GitHub repository.

This way, the static assets don’t have to be uploaded twice (to both Amazon S3 buckets B C), making the deployment process a bit faster and easier to maintain.

Learn more about the Prerendering Pages flow by selecting it in the upper diagram selector.

Steps
anchor

  1. Users visit a particular URL which leads to your website, with a web browser of their choice.
  2. 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.
  3. 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.
  4. 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.

FAQ
anchor

Are There Any Amazon CloudFront Caching Rules in Place?
anchor

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 codeexternal link.

What Is thestaticFolder Anyways?
anchor

The Website React application is actually a create-react-appexternal link application, which, upon creating a production build, places all of the static files (JS, CSS, images, …) into this folder.