React 元框架对比与选择

// app/routes/posts.$id.tsx
import type { LoaderFunctionArgs, ActionFunctionArgs } from '@remix-run/node';
import { json, redirect } from '@remix-run/node';
import { useLoaderData, Form } from '@remix-run/react';

// loader：服务端读数据。这里可以直接访问数据库、读 cookie、校验会话
export async function loader({ params }: LoaderFunctionArgs) {
  const post = await db.post.findUnique({ where: { id: params.id } });
  if (!post) throw new Response('Not Found', { status: 404 });
  return json({ post });
}

// action：处理表单提交。Remix 用标准 FormData，天然支持渐进增强
export async function action({ request, params }: ActionFunctionArgs) {
  const formData = await request.formData();
  const intent = formData.get('intent');

  if (intent === 'delete') {
    await db.post.delete({ where: { id: params.id } });
    return redirect('/posts');
  }

  await db.post.update({
    where: { id: params.id },
    data: { title: formData.get('title') as string },
  });
  return json({ ok: true });
}

export default function PostRoute() {
  const { post } = useLoaderData<typeof loader>();
  return (
    <div>
      <h1>{post.title}</h1>
      <Form method="post">
        <input name="title" defaultValue={post.title} />
        <button name="intent" value="update">保存</button>
      </Form>
      <Form method="post">
        <button name="intent" value="delete">删除</button>
      </Form>
    </div>
  );
}

// app/routes/dashboard.tsx —— 父路由，渲染布局 + <Outlet />
import { Outlet, useLoaderData } from '@remix-run/react';
import { json } from '@remix-run/node';

export async function loader() {
  const user = await getCurrentUser();
  return json({ user });
}

export default function DashboardLayout() {
  const { user } = useLoaderData<typeof loader>();
  return (
    <div className="dashboard">
      <aside>欢迎，{user.name}</aside>
      <main>
        {/* 子路由在这里渲染，其 loader 与父 loader 并行执行 */}
        <Outlet />
      </main>
    </div>
  );
}

---
// src/pages/blog/[slug].astro
// 这段前置脚本只在构建时运行，不会进入浏览器
import Layout from '../../layouts/Layout.astro';
import Counter from '../../components/Counter.tsx'; // 一个 React 组件

export async function getStaticPaths() {
  const posts = await fetch('https://api.example.com/posts').then((r) => r.json());
  return posts.map((post) => ({
    params: { slug: post.slug },
    props: { post },
  }));
}

const { post } = Astro.props;
---

<Layout title={post.title}>
  <article set:html={post.contentHtml} />

  <!-- 默认这个 React 组件只输出静态 HTML，零 JS -->
  <Counter />

  <!-- 加上 client:visible，只有滚动到可见时才加载 JS 并激活交互 -->
  <Counter client:visible />
</Layout>

<Widget client:load />     <!-- 页面加载即水合，适合首屏关键交互 -->
<Widget client:idle />     <!-- 浏览器空闲时水合 -->
<Widget client:visible />  <!-- 进入视口时水合，适合首屏之下的组件 -->
<Widget client:media="(max-width: 600px)" /> <!-- 匹配媒体查询才水合 -->
<Widget client:only="react" />  <!-- 完全跳过 SSR，仅客户端渲染 -->

// src/pages/blog.js
import * as React from 'react';
import { graphql, Link } from 'gatsby';

// 页面级查询：构建时执行，结果通过 data prop 传入组件
export const query = graphql`
  query BlogIndex {
    allMarkdownRemark(sort: { frontmatter: { date: DESC } }) {
      nodes {
        id
        frontmatter {
          title
          slug
          date(formatString: "YYYY-MM-DD")
        }
      }
    }
  }
`;

export default function BlogIndex({ data }) {
  const posts = data.allMarkdownRemark.nodes;
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <Link to={`/blog/${post.frontmatter.slug}`}>
            {post.frontmatter.title} —— {post.frontmatter.date}
          </Link>
        </li>
      ))}
    </ul>
  );
}

// app/products/[sku]/page.tsx —— 电商 ISR 示例
export const revalidate = 60; // 每 60 秒后台再生成

export async function generateStaticParams() {
  // 只预生成 Top 1000 热门商品，其余走按需生成
  const hot = await fetch('https://api.shop.com/products/top?limit=1000').then((r) => r.json());
  return hot.map((p: { sku: string }) => ({ sku: p.sku }));
}

export default async function ProductPage({ params }: { params: { sku: string } }) {
  const product = await fetch(`https://api.shop.com/products/${params.sku}`, {
    next: { revalidate: 60 },
  }).then((r) => r.json());

  return (
    <div>
      <h1>{product.name}</h1>
      <p>价格：¥{product.price}</p>
      <p>{product.stock > 0 ? '有货' : '缺货'}</p>
    </div>
  );
}