通过服务端组件、Server Actions 及定义 HTTP 接口等特性，使得网页访问或操作服务端数据变得非常容易，前后端同构，直截了当地提升效率。

服务端异步组件写法

https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating

app 路由中的组件默认是服务端组件。

服务端渲染的组件支持异步写法。这样就能很方便的进行服务端渲染数据初始化，减少了样板代码。

export default async function Page() {
  const data = await getData()
 
  return <main></main>
}

Server Actions

https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations

可以很方便地通过异步方法触发服务端操作，使用 "use server" 指令定义服务端操作，发起一个 POST 请求，完成服务端的访问。

组件默认都是服务端渲染，这个 "use server" 并不是定义服务端渲染，而是定义异步的服务端操作。

声明异步函数

可以将指令放在 async 函数的顶部以将该函数标记为服务器操作。

import { db } from "@/lib/db";

const OrganizationPage = () => {
  async function create(formData: FormData) {
    "use server"

    const title = formData.get('title') as string

    await db.board.create({
        data: {
            title
        }
    })
  }
  return (
    <div>
      <form action={create}>
        <input
          id="title"
          name="title"
          required
          className="border-black border p-1"
          placeholder="输入面板标题"
        />
      </form>
    </div>
  );
};

export default OrganizationPage;

声明异步操作文件

可提取到单独的文件中，也在文件的顶部放将该文件的所有导出标记为服务器操作（客户端渲染的组件只能用这种模式）：

"use server";

import { db } from "@/lib/db";

export async function create(formData: FormData) {
  const title = formData.get("title") as string;

  await db.board.create({
    data: {
      title,
    },
  });
}

定义 HTTP 接口

https://nextjs.org/docs/app/building-your-application/routing/route-handlers

创建 route.ts 文件，可以导出 GET、POST、PATCH 等函数，表示对应的请求方法。

import { NextResponse } from "next/server";

export function GET() {
    return NextResponse.json({
        hello: 'trello'
    })
}