Serverless superpowers for frontend developers

Transcript

1. SERVERLESS FRONTEND SUPERPOWERS aka. serverless server-side rendering, and stuff Hi, I’m Arto Adam
2. We need a website Make it serverless And use React Let’s just skip server-side rendering It’s not that important
3. HOSTING IN AWS S3 • Costs you (almost) nothing • Easy to set up with Serverless Framework or Components • Custom domain, CDN and free SSL certification • No server-side rendering
4. Facebook shares are ugly! We need SSR!
5. Server-side rendering is hard. Why not make it easy! “
6. ARTO LIUKKONEN Full-stack developer Serverless (AWS) for ~4 years Live in Jyväskylä, Finland Work at Nordcloud (recruiting in 10 countries) “
7. Server sends assets to browser CLIENT-SIDE RENDERING Browser downloads assets Browser executes React Page viewable & interactable
8. Server sends assets to browser SERVER-SIDE RENDERING Browser downloads assets Browser executes React Page interactable Page viewable
10. HOSTING IN NETLIFY • Automatic build hooks from git • No changes required to your stack ◦ Automatically identifies React & similar frameworks • Generous free tier (100GB traffic/month) ◦ However gets expensive for larger teams • Provides server-side rendering out of the box ◦ However only for bots
11. That’s too simple & boring Let’s build something awesome instead!
12. Let’s do SERVERLESS SERVER-SIDE RENDERING
13. 1. Setup using create-react-app 2. Maintain create-react-app workflow 3. Make it serverless PROJECT REQUIREMENTS
14. 1. (almost) Setup using create-react-app 2. (almost) Maintain create-react-app workflow 3. Make it serverless PROJECT REQUIREMENTS
15. SERVER-SIDE RENDERING ON AWS LAMBDA • Serverless Framework + create-react-app + custom bundling • Configure separate app bundles from same code base ◦ Server handler (Lambda) ◦ Client bundle (“normal” app) • SSR for all non-authenticated users • Cache HTML in Lambda memory
16. SSR ON CLOUDFLARE WORKERS • Wrangler + create-react-app + custom bundling • Super fast results for Cloudflare edge nodes • Cache HTML in Cloudflare cache for even faster responses • Comes with caveats ◦ Handling client bundle ◦ Routing assets Hi Kas!
17. SERVER-SIDE RENDERING ON LAMBDA@EDGE • Serverless Components + Next.js • Super fast results for CloudFront edge nodes • ...if it can be done using Next.js, it can be made with CRA too
18. BONUS SECTOR • Gatsby ◦ Static site generation ◦ Like Next.js has it’s own syntax ◦ Serve through S3, Netlify, etc. • Razzle ◦ Solving same things that I’ve tried to solve
19. LINKS FOR THE FRONTEND DEVS • https://serverless.css-tricks.com • https://serverless-stack.com • https://workers.dev • https://netlify.com • https://github.com/artoliukkonen
20. THANKS! @artoliukkonen Slides: 51.fi/istanbul