Serverless Server-Side Rendering Natalie Qabazard / @natqab Senior - PowerPoint PPT Presentation

Serverless Server-Side Rendering Natalie Qabazard / @natqab Senior Software Engineer 1

2

@trulia React, GraphQL, Typescript, AWS @home Pasta “a mano” 3

4

Fact: 53% of mobile site visits are abandoned if a page takes longer than 3 seconds to load https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/ 5

Client Rendering 6

Source: https://medium.com/walmartlabs/the-benefits-of-server-side-renderin g-over-client-side-rendering-5d07ff2cefe8 7

Server Rendering 8

Source: https://medium.com/walmartlabs/the-benefits-of-server-side-renderin g-over-client-side-rendering-5d07ff2cefe8 9

Pros Cons SEO Added Complexity Improved Perceived TTFB slower than Performance client rendering 10 10

Express 11 11

12 12

13 13

Next.js 6 14 14

Framework for server-rendered ● components developed by Zeit A Little Next.js 6: ● Typescript support ○ About Next.js Babel 7 ○ Flow types ○ Much more... ○ 15

Serverless 16 16

Function as a Service (FaaS) ● Many options, like AWS Lambda ● Why Go Pay for what you use ● Serverless? Supports C#, Go, Java, Python, ● Node Autoscaling ● 17

API Gateway 18 18

Endpoints ● Why API Methods ● Gateway? Event Object ● Proxy to Lambda ● 19

How To: 20 20

1 1 1 Serverless API Endpoint Web App Function 21 21

1. Create Lambda 2. Upload .zip to Lambda 3. Create API using API Gateway a. Tip: enable Lambda proxy integration Steps 4. Create endpoint with GET method 5. Deploy API 6. Invoke URL 22

23

Serverless could save you a ton of money ● SSR improves user experience ● Next.js ● Takeaways SSR ○ Typescript ○ Terraform: “infrastructure as code” ● 24

Thank you! Natalie Qabazard / @natqab Senior Software Engineer 25