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

▶
serverless server side rendering
SMART_READER_LITE
LIVE PREVIEW

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

Oct 13, 2023 27 likes •280 views

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

slide-1
SLIDE 1

1

Serverless Server-Side Rendering

Natalie Qabazard / @natqab

Senior Software Engineer

slide-2
SLIDE 2

2

slide-3
SLIDE 3

3

React, GraphQL, Typescript, AWS

@trulia

Pasta “a mano”

@home

slide-4
SLIDE 4

4

slide-5
SLIDE 5

5

53% of mobile site visits are abandoned if a page takes longer than 3 seconds to load

Fact:

https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/

slide-6
SLIDE 6

6

Client Rendering

slide-7
SLIDE 7

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

slide-8
SLIDE 8

8

Server Rendering

slide-9
SLIDE 9

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

slide-10
SLIDE 10

10 10

SEO

Pros

Improved Perceived Performance Added Complexity

Cons

TTFB slower than client rendering

slide-11
SLIDE 11

11 11

Express

slide-12
SLIDE 12

12 12

slide-13
SLIDE 13

13 13

slide-14
SLIDE 14

14 14

Next.js 6

slide-15
SLIDE 15

15

  • Framework for server-rendered

components developed by Zeit

  • Next.js 6:

○ Typescript support ○ Babel 7 ○ Flow types ○ Much more...

A Little About Next.js

slide-16
SLIDE 16

16 16

Serverless

slide-17
SLIDE 17

17

  • Function as a Service (FaaS)
  • Many options, like AWS Lambda
  • Pay for what you use
  • Supports C#, Go, Java, Python,

Node

  • Autoscaling

Why Go Serverless?

slide-18
SLIDE 18

18 18

API Gateway

slide-19
SLIDE 19

19

  • Endpoints
  • Methods
  • Event Object
  • Proxy to Lambda

Why API Gateway?

slide-20
SLIDE 20

20 20

How To:

slide-21
SLIDE 21

21 21

1

Web App

1

Serverless Function

1

API Endpoint

slide-22
SLIDE 22

22

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

Steps

slide-23
SLIDE 23

23

slide-24
SLIDE 24

24

  • Serverless could save you a ton of money
  • SSR improves user experience
  • Next.js

○ SSR ○ Typescript

  • Terraform: “infrastructure as code”

Takeaways

slide-25
SLIDE 25

25

Thank you!

Natalie Qabazard / @natqab

Senior Software Engineer