Что такое действия сервера Next.js 13.4?

В этой статье объясняются действия сервера и способы их использования. Действия сервера, альфа-функция в Next.js, построены поверх действий React. Он предоставляет возможность для изменения данных на стороне сервера, сокращения JavaScript на стороне клиента и постепенного улучшения форм.

Включение действий сервера

Чтобы включить действия сервера в вашем проекте Next.js, вам необходимо включить экспериментальный файл. serverActions в файле next.config.js.

const nextConfig = {
  experimental: {
    serverActions: true,
  },
};

Создание действий сервера

Действия сервера создаются путем определения асинхронной функции с директивой "use server" в верхней части тела функции. Эти функции должны иметь сериализуемые аргументы и сериализуемое возвращаемое значение на основе протокола React Server Components.

async function myNewAction() {
  "use server";
  ...
}

Вы также можете использовать директиву "use server" верхнего уровня поверх файла, что полезно, если у вас есть один файл, который экспортирует несколько действий сервера, или если вы импортируете действие сервера в клиентский компонент.

"use server";
 
export async function myAction() {
 ...
}

Вызов действий сервера

Существует три метода вызова действий сервера.

1. действие: используйте свойство действия React, чтобы вызвать действие сервера для элемента ‹form›.

export default function AddToCart({ productId }) {
  async function addItem(data) {
    'use server';
 
    const cartId = cookies().get('cartId')?.value;
    await saveToDb({ cartId, data });
  }
 
  return (
    <form action={addItem}>
      <button type="submit">Add to Cart</button>
    </form>
  );
}

2. formAction: используйте свойство React formAction для обработки таких элементов, как ‹button›, ‹input type="submit"› и ‹input type="image"› в ‹form›.

export default function Form() {
  async function handleSubmit() {
    "use server";
    ...
  }
 
  async function submitImage() {
    "use server";
    ...
  }
 
  return (
    <form action={handleSubmit}>
      <input type="text" name="name" />
      <input type="image" formAction={submitImage} />
      <button type="submit">Submit</button>
    </form>
  );
}

3. Пользовательский вызов с помощью startTransition: вызов действий сервера без использования действия или formAction с помощью startTransition. Этот метод отключает прогрессивное улучшение.

app/_components/client-component.js

'use client';
 
import { useTransition } from 'react';
import { addItem } from '../_actions';
 
function ClientComponent({ id }) {
  let [isPending, startTransition] = useTransition();
 
  return <div onClick={() => startTransition(addItem(id))}>Add To Cart</div>;
}




app/_actions.js

'use server';
 
async function addItem(id) {
  await addItemToDb(id);
  revalidatePath(`/product/${id}`);
}

4. Пользовательский вызов без startTransition: Если вы не выполняете мутации сервера, вы можете напрямую передать функцию как реквизит, как и любую другую функцию.

app/posts/[id]/page.js

import LikeButton from './like-button';
 
export default function Page({ params }) {
  async function increment() {
    'use server';
    await updatingDatabase(`post:id:${params.id}`);
  }
 
  return <LikeButton increment={increment} />;
}
app/post/[id]/like-button.jsx

'use client';
 
export default function LikeButton({ increment }) {
  return (
    <button
      onClick={async () => {
        await increment();
      }}
    >
      Like
    </button>
  );
}

Действия сервера в Next.js предоставляют мощный способ обработки мутаций данных на стороне сервера, сокращения количества JavaScript на стороне клиента и постепенного улучшения форм. Понимая и используя действия сервера, вы можете создавать более эффективные и интерактивные веб-приложения.

Если вам нравятся мои работы и вы хотите купить мне кофе

Что такое действия сервера Next.js 13.4?

Похожие вопросы