Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Translate server-functions.md to Portuguese #1072

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Translate server-functions.md to Portuguese #1072

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 37 additions & 39 deletions src/content/reference/rsc/server-functions.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,50 +1,50 @@
---
title: Server Functions
title: Funções do Servidor
---

<RSC>

Server Functions are for use in [React Server Components](/learn/start-a-new-react-project#bleeding-edge-react-frameworks).
Funções do Servidor são para uso em [Componentes do Servidor React](/learn/start-a-new-react-project#bleeding-edge-react-frameworks).

**Note:** Until September 2024, we referred to all Server Functions as "Server Actions". If a Server Function is passed to an action prop or called from inside an action then it is a Server Action, but not all Server Functions are Server Actions. The naming in this documentation has been updated to reflect that Server Functions can be used for multiple purposes.
**Observação:** Até setembro de 2024, nos referíamos a todas as Funções do Servidor como "Ações do Servidor". Se uma Função do Servidor for passada para uma propriedade `action` ou chamada de dentro de uma ação, então ela é uma Ação do Servidor, mas nem todas as Funções do Servidor são Ações do Servidor. A nomenclatura nesta documentação foi atualizada para refletir que as Funções do Servidor podem ser usadas para múltiplos propósitos.

</RSC>

<Intro>

Server Functions allow Client Components to call async functions executed on the server.
As Funções do Servidor permitem que Componentes Cliente chamem funções assíncronas executadas no servidor.

</Intro>

<InlineToc />

<Note>

#### How do I build support for Server Functions? {/*how-do-i-build-support-for-server-functions*/}
#### Como eu construo suporte para as Funções do Servidor? {/*how-do-i-build-support-for-server-functions*/}

While Server Functions in React 19 are stable and will not break between minor versions, the underlying APIs used to implement Server Functions in a React Server Components bundler or framework do not follow semver and may break between minors in React 19.x.
Embora as Funções do Servidor no React 19 sejam estáveis e não quebrarão entre versões secundárias, as APIs subjacentes usadas para implementar Funções do Servidor em um bundler ou framework de Componentes do Servidor React não seguem semver e podem quebrar entre secundárias no React 19.x.

To support Server Functions as a bundler or framework, we recommend pinning to a specific React version, or using the Canary release. We will continue working with bundlers and frameworks to stabilize the APIs used to implement Server Functions in the future.
Para oferecer suporte às Funções do Servidor como um bundler ou framework, recomendamos fixar em uma versão específica do React ou usar o lançamento Canary. Continuaremos trabalhando com bundlers e frameworks para estabilizar as APIs usadas para implementar Funções do Servidor no futuro.

</Note>

When a Server Functions is defined with the [`"use server"`](/reference/rsc/use-server) directive, your framework will automatically create a reference to the server function, and pass that reference to the Client Component. When that function is called on the client, React will send a request to the server to execute the function, and return the result.
Quando uma Função do Servidor é definida com a diretiva [`"use server"`](/reference/rsc/use-server), seu framework criará automaticamente uma referência à função do servidor e passará essa referência para o Componente Cliente. Quando essa função for chamada no cliente, o React enviará uma requisição para o servidor para executar a função e retornará o resultado.

Server Functions can be created in Server Components and passed as props to Client Components, or they can be imported and used in Client Components.
As Funções do Servidor podem ser criadas em Componentes do Servidor e passadas como props para Componentes Cliente, ou podem ser importadas e usadas em Componentes Cliente.

## Usage {/*usage*/}
## Uso {/*usage*/}

### Creating a Server Function from a Server Component {/*creating-a-server-function-from-a-server-component*/}
### Criando uma Função do Servidor de um Componente do Servidor {/*creating-a-server-function-from-a-server-component*/}

Server Components can define Server Functions with the `"use server"` directive:
Componentes do Servidor podem definir Funções do Servidor com a diretiva `"use server"`:

```js [[2, 7, "'use server'"], [1, 5, "createNoteAction"], [1, 12, "createNoteAction"]]
// Server Component
// Componente do Servidor
import Button from './Button';

function EmptyNote () {
async function createNoteAction() {
// Server Function
// Função do Servidor
'use server';

await db.notes.create();
Expand All @@ -54,7 +54,7 @@ function EmptyNote () {
}
```

When React renders the `EmptyNote` Server Function, it will create a reference to the `createNoteAction` function, and pass that reference to the `Button` Client Component. When the button is clicked, React will send a request to the server to execute the `createNoteAction` function with the reference provided:
Quando o React renderiza a Função do Servidor `EmptyNote`, ele criará uma referência à função `createNoteAction` e passará essa referência para o Componente Cliente `Button`. Quando o botão for clicado, o React enviará uma requisição para o servidor para executar a função `createNoteAction` com a referência fornecida:

```js {5}
"use client";
Expand All @@ -66,12 +66,11 @@ export default function Button({onClick}) {
}
```

For more, see the docs for [`"use server"`](/reference/rsc/use-server).
Para mais informações, consulte a documentação para [`"use server"`](/reference/rsc/use-server).

### Importando Funções do Servidor de Componentes Cliente {/*importing-server-functions-from-client-components*/}

### Importing Server Functions from Client Components {/*importing-server-functions-from-client-components*/}

Client Components can import Server Functions from files that use the `"use server"` directive:
Componentes Cliente podem importar Funções do Servidor de arquivos que usam a diretiva `"use server"`:

```js [[1, 3, "createNote"]]
"use server";
Expand All @@ -82,7 +81,7 @@ export async function createNote() {

```

When the bundler builds the `EmptyNote` Client Component, it will create a reference to the `createNote` function in the bundle. When the `button` is clicked, React will send a request to the server to execute the `createNote` function using the reference provided:
Quando o bundler constrói o Componente Cliente `EmptyNote`, ele criará uma referência à função `createNote` no bundle. Quando o `button` for clicado, o React enviará uma requisição para o servidor para executar a função `createNote` usando a referência fornecida:

```js [[1, 2, "createNote"], [1, 5, "createNote"], [1, 7, "createNote"]]
"use client";
Expand All @@ -95,11 +94,11 @@ function EmptyNote() {
}
```

For more, see the docs for [`"use server"`](/reference/rsc/use-server).
Para mais informações, consulte a documentação para [`"use server"`](/reference/rsc/use-server).

### Server Functions with Actions {/*server-functions-with-actions*/}
### Funções do Servidor com Ações {/*server-functions-with-actions*/}

Server Functions can be called from Actions on the client:
Funções do Servidor podem ser chamadas de Ações no cliente:

```js [[1, 3, "updateName"]]
"use server";
Expand Down Expand Up @@ -143,16 +142,15 @@ function UpdateName() {
}
```

This allows you to access the `isPending` state of the Server Function by wrapping it in an Action on the client.

For more, see the docs for [Calling a Server Function outside of `<form>`](/reference/rsc/use-server#calling-a-server-function-outside-of-form)
Isso permite que você acesse o estado `isPending` da Função do Servidor, encapsulando-a em uma Ação no cliente.

### Server Functions with Form Actions {/*using-server-functions-with-form-actions*/}
Para mais informações, consulte a documentação para [Chamando uma Função do Servidor fora de `<form>`](/reference/rsc/use-server#calling-a-server-function-outside-of-form)

Server Functions work with the new Form features in React 19.
### Funções do Servidor com Ações de Formulário {/*using-server-functions-with-form-actions*/}

You can pass a Server Function to a Form to automatically submit the form to the server:
Funções do Servidor funcionam com os novos recursos de Formulário no React 19.

Você pode passar uma Função do Servidor para um Formulário para automaticamente enviar o formulário ao servidor:

```js [[1, 3, "updateName"], [1, 7, "updateName"]]
"use client";
Expand All @@ -168,13 +166,13 @@ function UpdateName() {
}
```

When the Form submission succeeds, React will automatically reset the form. You can add `useActionState` to access the pending state, last response, or to support progressive enhancement.
Quando a submissão do Formulário for bem-sucedida, o React redefinirá automaticamente o formulário. Você pode adicionar `useActionState` para acessar o estado pendente, a última resposta ou para oferecer suporte a aprimoramento progressivo.

For more, see the docs for [Server Functions in Forms](/reference/rsc/use-server#server-functions-in-forms).
Para mais informações, consulte a documentação para [Funções do Servidor em Formulários](/reference/rsc/use-server#server-functions-in-forms).

### Server Functions with `useActionState` {/*server-functions-with-use-action-state*/}
### Funções do Servidor com `useActionState` {/*server-functions-with-use-action-state*/}

You can call Server Functions with `useActionState` for the common case where you just need access to the action pending state and last returned response:
Você pode chamar Funções do Servidor com `useActionState` para o caso comum em que você só precisa acessar o estado pendente da ação e a última resposta retornada:

```js [[1, 3, "updateName"], [1, 6, "updateName"], [2, 6, "submitAction"], [2, 9, "submitAction"]]
"use client";
Expand All @@ -193,13 +191,13 @@ function UpdateName() {
}
```

When using `useActionState` with Server Functions, React will also automatically replay form submissions entered before hydration finishes. This means users can interact with your app even before the app has hydrated.
Ao usar `useActionState` com Funções do Servidor, o React também reproduzirá automaticamente as submissões de formulário inseridas antes que a hidratação termine. Isso significa que os usuários podem interagir com seu aplicativo mesmo antes que o aplicativo tenha hidratado.

For more, see the docs for [`useActionState`](/reference/react-dom/hooks/useFormState).
Para mais informações, consulte a documentação para [`useActionState`](/reference/react-dom/hooks/useFormState).

### Progressive enhancement with `useActionState` {/*progressive-enhancement-with-useactionstate*/}
### Aprimoramento progressivo com `useActionState` {/*progressive-enhancement-with-useactionstate*/}

Server Functions also support progressive enhancement with the third argument of `useActionState`.
Funções do Servidor também oferecem suporte a aprimoramento progressivo com o terceiro argumento de `useActionState`.

```js [[1, 3, "updateName"], [1, 6, "updateName"], [2, 6, "/name/update"], [3, 6, "submitAction"], [3, 9, "submitAction"]]
"use client";
Expand All @@ -217,6 +215,6 @@ function UpdateName() {
}
```

When the <CodeStep step={2}>permalink</CodeStep> is provided to `useActionState`, React will redirect to the provided URL if the form is submitted before the JavaScript bundle loads.
Quando o <CodeStep step={2}>permalink</CodeStep> for fornecido para `useActionState`, o React redirecionará para a URL fornecida se o formulário for enviado antes que o bundle JavaScript seja carregado.

For more, see the docs for [`useActionState`](/reference/react-dom/hooks/useFormState).
Para mais informações, consulte a documentação para [`useActionState`](/reference/react-dom/hooks/useFormState).