Заметки про React
Ссылка
нажмите — покажем
нажмите — покажем
Получение данных с помощью 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/
28 · 3.1K ·