Заметки про React: “Получение данных с помощью Server Actions в Next.js В своем блоге Роби…”

Получение данных с помощью Server Actions в Next.js

В своем блоге Робин Вирух показал опыт использования Server Actions для получения данных в Next.js. В документации Next.js рекомендуют использовать Route Handlers для создания API, например:


import { getPosts } from "@/data";

export async function GET() {
  const posts = await getPosts();
  return Response.json(posts);
}


"use client";

import { Posts } from "@/posts";
import { useQuery } from "@tanstack/react-query";

const fetchPosts = async () => {
  const response = await fetch("/api/posts");
  return await response.json();
};

const Page = () => {
  const { data, isLoading } = useQuery({
    queryKey: ["posts-route-handler"],
    queryFn: fetchPosts,
  });

  /* --snip-- */
}

У этого подхода есть свои минусы: функцию fetchPosts необходимо отдельно типизировать.

В документации Next.js написано, что Server Actions предназначены только для записи (мутация), а не для чтения (запроса) данных. Однако, возможность использовать Server Actions для чтения данных есть, пример:


"use client";

import { getPosts } from "@/data";
import { Posts } from "@/posts";
import { useQuery } from "@tanstack/react-query";

const fetchPosts = async () => {
  return await getPosts();
};

const Page = () => {
  const { data, isLoading } = useQuery({
    queryKey: ["posts-server-action"],
    queryFn: fetchPosts,
  });

  /* --snip-- */
}

Плюсы такого подхода:

🔴Есть возможность переиспользовать getPosts как в серверных компонентах, так и в клиентских компонентах.

🔴Типизация запроса. Это похоже на типизированный удаленный вызов процедуры tRPC, аргументы функции и возвращаемый результат будут иметь тип.

https://www.robinwieruch.de/next-server-actions-fetch-data/