O Next.js sempre foi conhecido por estar a frente do desenvolvimento web moderno. Com a versão 14 do Next.js, ele eleva essa reputação através do novo recurso: Server Actions.
Neste artigo, vamos explorar juntos em detalhes esta nova funcionalidade, entendendo como ela funciona, suas aplicações no mundo real e o impacto que pode ter no desenvolvimento de aplicações mais rápidas e intuitivas.
O que são Server Actions?
Server Actions representa uma mudança na forma como nós desenvolvedores interagimos com o backend. Tradicionalmente, a comunicação entre o cliente e o servidor em aplicações web precisam da criação de API. Porém, com as Server Actions a necessidade é simplificada, permitindo que chamadas sejam definidas diretamente nos componentes.
Diferença entre Server Components e Server Actions
Server Components:
Primeiramente, imagine que você está construindo um site de comércio. O RSC pode ser usado para renderizar uma lista de produtos no lado do servidor. Isso significa que a página com a lista de produtos é montada no servidor e enviada para o cliente já como HTML estático. Isso faz com que seja reduzida a carga do cliente, pois, a busca de dados e a renderização são feitas de antemão no servidor.
Server Actions:
Continuando com o exemplo do site de comércio, digamos que um usuário queira adicionar um produto ao carrinho. O Server Action pode ser usado para lidar com esta ação. Quando o usuário clica em “Adicionar no Carrinho” Uma ação pode ser usada para lidar com a atualização no banco de dados com as informações do novo item no carrinho. Isso é feito diretamente sem a necessidade de uma API Rest ou GraphQL.
Exemplo básicos:
- ProductCard/action.ts (Lado do servidor):
- Define a função addToCart, que executa a lógica para adicionar um produto ao carrinho.
"use server"
const addToCart = (productId: number) => {
// Função executada no servidor
// Lógica para adicionar o produto ao carrinho
}
export { addToCart }
- ProductCard/index.tsx (Lado do cliente):
- Importa e utiliza a função addToCart do arquivo action.ts.
- Define um componente ProductCard para exibir um produto e um botão que, ao ser clicado, aciona a função addToCart.
"use client"
import { addToCart } from "./action"
import { FC } from "react"
type Product = {
title: string
id: number
}
type ProductCardProps = {
product: Product
}
const ProductCard: FC<ProductCardProps> = ({ product }) => {
return (
<div>
<h3>{product.title}</h3>
<button onClick={() => addToCart(product.id)}>
Adicionar ao carrinho
</button>
</div>
)
}
export { ProductCard }
Vantagens e desvantagens:
Vantagens:
- Desempenho: Reduz a quantidade de código javascript no cliente, resultando em um carregamento mais rápido
- Simplicidade: Elimina a necessidade de definir APIs separadas para ações no servidor
- Progressive Enhancement: Funciona mesmo quando o javascript está desabilitado
- Mais segurança contra vulnerabilidades
Desvantagens:
- Curva de aprendizado: Exige um entendimento de como os componentes do servidor funcionam, o que pode ser um desafio para desenvolvedores novos no Next.
Conclusão:
Em conclusão, as Server Actions marcam um avanço significativo no desenvolvimento, simplificando a interação entre cliente e servidor. Esse avanço elimina a necessidade de APIs externas, permitindo que ações sejam definidas diretamente no componente, o que traz um desempenho muito bom para o cliente, pois reduz a carga no lado dele.
Fontes:
Server Actions and Mutations