Webiny Docs home page
Warning
You're browsing the documentation for an old version of Webiny. Consider upgrading your project to Webiny 5.41.x.
What you’ll learn
  • how the Prerendering Service (located in the API project application) utilizes Website’s cloud infrastructure resources in order to prerender your public website’s pages and store their HTML and relevant metadata

Diagram
anchor

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.

Note that the Amazon DynamoDB and Amazon OpenSearch databases are deployed as part of the Core project application. Also, the GraphQL Handler AWS Lambda function is deployed as part of the API project application

These are still included in the diagram, just so it’s more clear to the reader.

Webiny Cloud Infrastructure - Website - PrerenderingWebiny Cloud Infrastructure - Website - Prerendering
(click to enlarge)

Description
anchor

The diagram shows the process of prerendering pages published with the Page Builder application. Note the process also involves Core and API project applications.

To learn more about the Core and API project applications’ cloud infrastructure, check out the Core and API sections.

The flow consists of the following seven steps:

  1. A user first publishes a page from the Admin Area. This is a simple GraphQL request, issued by the browser, to the GraphQL API that’s deployed as part of the API project application I.
  2. In the process, an Amazon EventBridge H event is emitted, which will be handled by the Subscribe E3 AWS Lambda function.
  3. The Subscribe E3 AWS Lambda function creates one or more Amazon SQS messages.
  4. Messages will be picked up by the Render E2 AWS Lambda function, which is responsible for actual prerendering of pages. The process starts by issuing an HTTP request to the Amazon CloudFront distribution D.
  5. The request is forwarded to the Amazon S3 bucket C. This is where the actual React application is hosted, with all of its code and static assets.
  6. The mentioned Subscribe E3 AWS Lambda function waits until the React application, served back via the Amazon CloudFront distribution D, has been completely rendered.
  7. Finally, the function stores the generated HTML and related metadata in the Amazon S3 bucket B. Additional metadata also gets stored in the Amazon DynamoDB G that’s part of the Core project application.

With these steps completed, the page is ready to be served to actual website visitors. Continue reading the Serving Pages section to learn more.