Go Server less with React and AWS lambda
Roman Boiko, a solutions architect at AWS, published a blog displaying three scenarios to deploy a React application in the cloud or at the edge with the help of Amazon Web Services. The scenarios used are Amazon S3, Amazon CloudFront, Amazon API Gateway, AWS Lambda, and Lambda@Edge for a fully serverless implementation.
In the first of the given three scenarios, a static React app is hosted in an Amazon S3 bucket and distributed to the browser client by the Amazon CloudFront CDN. The React application’s backend is running behind an API Gateway, implemented as a Lambda function.
The application is fully downloaded to the client and rendered in a web browser while sending requests to the backend.
The second scenarios involve server-side rendering with a Lambda function. Here the React application is rendered with a Lambda function. Routes to be rendered server-side are forwarded to the SSR API gateway, which calls the rendering Lambda function. To render a page, the Lambda function may as usual request data from a backend API gateway. It returns a static HTML page with all the data. This page may be cached in CloudFront to optimize subsequent requests.
The third scenario is quite similar to the second but here the rendering happens at the edge, with a Lambda@Edge function: The requests to /edgessr are handled by the Lambda@Edge function. This sends requests to the backend and returns a static HTML page.
The preceding scenarios are implemented with the AWS CDK. This solution requires:
This solution deploys a Lambda@Edge function so it must be provisioned in the US East (N. Virginia) Region.
To get started, download and configure the sample: Just follow the AWS official walkthrough sample code at github. link: https://github.com/aws-samples/react-ssr-lambda
Serverless architectures provide distributed points of failure, increased scalability, and may exhibit a better cost profile as a result of their pay-per-use model.
React is a popular front-end framework used to create single-page applications (SPAs). It is rendered and run on the client-side in the browser. However, for SEO or performance reasons, you may need to render parts of a React application on the server. This is where the server-side rendering (SSR) is useful.
Now a days we’re witnessing a shift towards serverless platforms, in which you as the app author don’t need to think about the server your code is running on, with all the attendant complexity
Finally, perhaps the most crucial reason why serverless architectures are not going to replace traditional models anytime soon: you (generally) can’t run entire applications on serverless systems.
Or rather, you could, but it would not be cost-efficient to do so. Your successful monolithic app probably shouldn’t become a series of four dozen functions connected to eight gateways, forty queues, and a dozen database instances. For this reason, serverless suits greenfield development. Virtually no existing application (architecture) ports over.
Reference:
AWS Blog: https://aws.amazon.com/blogs/compute/building-server-side-rendering-for-react-in-aws-lambda/
