React Router

npm install @edgeone/react-router

import { reactRouter } from "@react-router/dev/vite";
import { defineConfig } from "vite";
import { edgeoneAdapter } from "@edgeone/react-router";

export default defineConfig({
  plugins: [
    reactRouter(), 
    edgeoneAdapter()  // add EdgeOne adapter
  ],
});


// routes/post.tsx
import type { Route } from "./+types/post";

export async function loader({ params }: Route.LoaderArgs) {
  const post = await fetchPost(params.id);
  return { post };
}

export default function Post({ loaderData }: Route.ComponentProps) {
  return (
    <article>
      <h1>{loaderData.post.title}</h1>
      <div>{loaderData.post.content}</div>
    </article>
  );
}

import type { Config } from "@react-router/dev/config";

export default {
  async prerender() {
    return [
      "/",
      "/about",
      "/blog/post-1",
      "/blog/post-2",
    ];
  },
} satisfies Config;

export default {
  async prerender() {
    const posts = await fetchAllPosts();
    return [
      "/",
      ...posts.map(post => `/blog/${post.slug}`)
    ];
  },
} satisfies Config;

import type { Config } from "@react-router/dev/config";

export default {
  ssr: false,
} satisfies Config;

import { Suspense } from "react";
import { Await } from "react-router";

export async function loader() {
  // Return a Promise without waiting
  const postsPromise = fetchPosts();
  const weatherPromise = fetchWeather();
  
  return {
    posts: postsPromise,
    weather: weatherPromise,
  };
}

export default function Dashboard({ loaderData }) {
  return (
    <div>
      <Suspense fallback={<p>Loading posts...</p>}>
        <Await resolve={loaderData.posts}>
          {(posts) => <PostList posts={posts} />}
        </Await>
      </Suspense>
      
      <Suspense fallback={<p>Loading weather...</p>}>
        <Await resolve={loaderData.weather}>
          {(weather) => <Weather data={weather} />}
        </Await>
      </Suspense>
    </div>
  );
}