From 916d64fb188251fbf4d46eb1774bc8c7312e9d56 Mon Sep 17 00:00:00 2001 From: Nivaldo Farias Date: Thu, 20 Mar 2025 12:06:28 -0300 Subject: [PATCH] Translate `server-functions.md` to Portuguese --- src/content/reference/rsc/server-functions.md | 76 +++++++++---------- 1 file changed, 37 insertions(+), 39 deletions(-) diff --git a/src/content/reference/rsc/server-functions.md b/src/content/reference/rsc/server-functions.md index b079e322e..5a9d5427e 100644 --- a/src/content/reference/rsc/server-functions.md +++ b/src/content/reference/rsc/server-functions.md @@ -1,18 +1,18 @@ --- -title: Server Functions +title: Funções do Servidor --- -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. -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. @@ -20,31 +20,31 @@ Server Functions allow Client Components to call async functions executed on the -#### 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. -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(); @@ -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"; @@ -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"; @@ -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"; @@ -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"; @@ -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 `
`](/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 ``](/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"; @@ -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"; @@ -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"; @@ -217,6 +215,6 @@ function UpdateName() { } ``` -When the permalink is provided to `useActionState`, React will redirect to the provided URL if the form is submitted before the JavaScript bundle loads. +Quando o permalink 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). \ No newline at end of file