https://github.com/threepointone/react-ppr-workers

Partial Prerendering with React and Cloudflare Workers
https://github.com/threepointone/react-ppr-workers

cloudflare-workers ppr react ssr

Last synced: 2 days ago
JSON representation

Partial Prerendering with React and Cloudflare Workers

• Host: GitHub
• URL: https://github.com/threepointone/react-ppr-workers
• Owner: threepointone
• Created: 2024-09-23T15:25:21.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2024-10-28T01:58:56.000Z (about 2 months ago)
• Last Synced: 2024-11-23T13:12:40.244Z (29 days ago)
• Topics: cloudflare-workers, ppr, react, ssr
• Language: TypeScript
• Homepage: https://react-ppr-workers.threepointone.workers.dev/
• Size: 185 KB
• Stars: 49
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Partial Prerendering with React and Cloudflare Workers

This is a demo of a React app that implements partial prerendering with React and Cloudflare Workers. It's meant to accompany [this blog post](https://sunilpai-dev.pages.dev/posts/ppr-for-everyone/). Live demo at [https://react-ppr-workers.threepointone.workers.dev/](https://react-ppr-workers.threepointone.workers.dev/)

### Here's the timeline of what happens when you visit the site:

- A response stream is started from the eyeball worker

- It immediately streams a prerendered html app "shell"

- The request is passed on to the a smart placed worker near the database

- React kicks in and starts rendering

- The app renders and generates html / script tags with out-of-order streaming

- This is streamed back to the user through the eyeball

## Setup

- `npm install`

- Setup a "pokemon" database on [Cloudflare D1](https://developers.cloudflare.com/d1/get-started/) with [`init.sql`](./init.sql)

- `npm start` to run the dev server(s)

- `npm run deploy` to deploy to Cloudflare Workers

### Credit

Original repo by [@rauchg](https://github.com/rauchg/how-is-this-not-illegal)