Flareact

该介绍目前仅提供英文版本。

Flareact: Edge-Rendered React Framework

Flareact is a powerful React framework designed specifically for Cloudflare Workers, bringing edge-rendered React applications to the Cloudflare ecosystem. Inspired by Next.js, it provides familiar APIs and patterns while leveraging the speed and global distribution of Cloudflare’s edge network.

Core Features

• Edge-Side Rendering: Render React components at the edge for improved SEO and performance
• File-Based Routing: Automatic routing based on your /pages directory structure
• Dynamic Routes: Support for dynamic path segments with bracket syntax
• Data Fetching: Edge-side data fetching with getEdgeProps API
• API Routes: Create serverless API endpoints within your application
• Universal Rendering: Seamless rendering between the worker and client
• CSS Support: Built-in support for CSS/SCSS modules and global styles
• Fast Refresh: Development experience with quick feedback cycles
• TypeScript Support: Full TypeScript integration for type safety

Why Choose Flareact?

Flareact offers several compelling advantages for modern web applications:

• Ultra-Fast Performance: By rendering at the edge, your content is delivered within milliseconds
• Cloudflare Integration: Deploy directly to the same network that likely already handles your DNS
• Infinite Scalability: Leverage Cloudflare’s global network without worrying about server scaling
• Predictable Pricing: Cloudflare Workers offers transparent, usage-based pricing
• Familiar Developer Experience: If you know Next.js, you’ll feel right at home with Flareact
• No Cold Starts: Cloudflare eliminates cold starts using the TLS handshake period

Getting Started

Deploying a Flareact application is straightforward:

1. Create a new project:

   npx create-flareact-app my-app
   cd my-app

2. Develop locally:

   npm run dev

3. Deploy to Cloudflare Workers:

   npm run deploy

You can also use the one-click deploy button to quickly spin up a new Flareact project:

Code Example

Creating pages in Flareact is simple and intuitive:

// pages/index.js
export default function Home() {
  return (
    <div>
      <h1>Welcome to Flareact!</h1>
      <p>Edge-rendered React for everyone.</p>
    </div>
  );
}

// With data fetching
export async function getEdgeProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      data
    },
    // Optional: Cache this page for 60 seconds
    revalidate: 60
  };
}

Comparison to Next.js

While Flareact is inspired by Next.js and shares many of its APIs, there are some key differences:

Flareact is an excellent choice for developers who want the benefits of edge rendering with a familiar React framework, especially if they’re already using Cloudflare for their infrastructure.