Introdução: Aprimorando Next.js com componentes do React Server

Next.js evoluiu para incluir recursos poderosos como React Server Components e Server Actions, que oferecem uma nova maneira de lidar com renderização e lógica do lado do servidor. Esses recursos fornecem uma abordagem mais eficiente e simplificada para a construção de aplicações web, permitindo que você busque dados e renderize componentes no servidor sem comprometer o desempenho.

Nesta postagem do blog, exploraremos como usar componentes do React Server e ações do servidor em Next.js com exemplos práticos e trechos de código.

O que são componentes do servidor React?

React Server Components (RSC) são um novo tipo de componente introduzido pelo React que permite renderizar componentes no servidor. Essa abordagem ajuda a reduzir a quantidade de JavaScript enviada ao cliente e melhora o desempenho ao descarregar o trabalho de renderização para o servidor.

Benefícios dos componentes do React Server

• Melhor desempenho: Ao renderizar no servidor, você reduz a quantidade de JavaScript do lado do cliente e melhora o tempo de carregamento.
• Experiência do usuário aprimorada: carregamentos iniciais de página mais rápidos e interações mais suaves.
• Busca de dados simplificada: busque dados no servidor e passe-os diretamente para os componentes.

Exemplo: Criando um Componente de Servidor

Aqui está um exemplo básico de um componente React Server em um aplicativo Next.js:

// app/components/UserProfile.server.js
import { getUserData } from "../lib/api";

export default async function UserProfile() {
  const user = await getUserData();

  return (
    

      
{user.name}
      
{user.email}
    
  );
}

Neste exemplo, UserProfile é um componente de servidor que busca dados do usuário no servidor e os renderiza.

O que são ações do servidor?

Ações do servidor são funções executadas no servidor em resposta a interações do usuário ou outros eventos. Eles permitem que você lide com a lógica do lado do servidor, como envios de formulários ou solicitações de API, diretamente de seus componentes React.

Benefícios das ações do servidor

• Lógica de servidor simplificada: Escreva código do lado do servidor diretamente em seus componentes.
• Segurança aprimorada: Lide com operações confidenciais no servidor e não no cliente.
• Melhor desempenho: Reduza o JavaScript do lado do cliente e transfira tarefas para o servidor.

Exemplo: usando ações do servidor

Veja como você pode usar ações do servidor em um aplicativo Next.js para lidar com envios de formulários:

// app/actions/submitForm.js
import { saveFormData } from "../lib/api";

export async function submitForm(data) {
  await saveFormData(data);
  return { success: true };
}

// app/components/ContactForm.js
"use client";

import { submitForm } from "../actions/submitForm";

export default function ContactForm() {
  const handleSubmit = async (event) => {
    event.preventDefault();
    const formData = new FormData(event.target);
    const result = await submitForm(Object.fromEntries(formData));
    if (result.success) {
      alert("Form submitted successfully!");
    }
  };

  return (
    

Neste exemplo, submitForm é uma ação do servidor que processa dados de formulário no servidor, e ContactForm é um componente cliente que usa essa ação para lidar com envios de formulários.

Conclusão: aproveitando recursos modernos para melhores aplicativos da web

Os componentes do servidor React e as ações do servidor em Next.js fornecem ferramentas poderosas para a construção de aplicativos da web modernos e eficientes. Ao aproveitar esses recursos, você pode melhorar o desempenho, simplificar a lógica do servidor e criar uma experiência de usuário mais responsiva.

Ao construir seus aplicativos Next.js, considere incorporar componentes do React Server e ações do servidor para aproveitar ao máximo os avanços mais recentes no desenvolvimento web.

Boa codificação!

?✨