Loading

Running React apps on the Edge with Flareact and Cloudflare TAKETO YOSHIDA

Hi, I'm Taketo Yoshida😄

  • Software Engineer working in Bangkok🇹🇭
  • Love React.js/Next.js and Cloudflare
  • Github: tamanyan
  • Twitter: @tamanyan55

What I want to talk about

  • Cloudflare and Cloudflare Workers
  • Flareact, edge-rendered React framework powered by Cloudflare Workers

Cloudflare and Cloudflare Workers

  • Web infrastructure company, providing content delivery network, domain name server services and serverless computing
  • Cloudflare Wokers, one of the cloudflare services and serverless computing services like AWS Lambda

What is Cloudflare workers

  • Serverless execution environment that allows you to create entirely new applications without configuring or maintaining infrastructure
  • Workers functions run on Cloudflare's Edge Network, a growing global network of thousands of machines distributed across hundreds of locations
  • Workers runtime uses the V8 engine, the same engine used by Chromium and Node.js

How Cloudflare Workers works

v8 isolates

  • Represents an isolated instance of the V8 engine
  • Lightweight contexts designed to start very quickly compared to creating a virtual machine
  • Isolate's memory is completely isolated and user code is protected from from other untrusted code

Static Site Generation (SSG) and Server Side Rendering (SSR)

SSG

  • Page speed is faster than SSR. Easely cache it at the edge
  • Less cost. No need to prepare huge server computing
  • Difficult to update contents. Need to regenerate and deploy

SSR

  • Page speed is slower than SSG. Response time sometime suffer from the physical distance between browser and your server location
  • High cost. Need to prepare huge server computing depending on the number of requests
  • Easy to manage frequent updated dynamic contents

Flareact

  • The framework between a static site and a dynamic application
  • Allow you to render your React apps at the edge rather than on your server
  • Inspired by Next.js, React.js library for let you build server-side rendering and static web applications

Flareact APIs

  • https://flareact.com/
  • File-based routing
  • Dynamic page paths
  • Data fetching for page props using getEdgeProps
  • API routes
  • Universal application rendering (worker and client)

Demo

https://flareact-template.tamanyan.workers.dev/

https://github.com/tamanyan/flareact-template

Thank for your listening!!

Appreciate
Terms of Service Privacy Policy Report Abuse