Translate server-components.md to Portuguese

Author: NivaldoFarias

src/content/reference/rsc/server-components.md

@@ -1,37 +1,37 @@
 ---
-title: Server Components
+title: Componentes de Servidor
 ---
 
 <RSC>
 
-Server Components are for use in [React Server Components](/learn/start-a-new-react-project#bleeding-edge-react-frameworks).
+Componentes de Servidor são para uso em [Componentes de Servidor React](/learn/start-a-new-react-project#bleeding-edge-react-frameworks).
 
 </RSC>
 
 <Intro>
 
-Server Components are a new type of Component that renders ahead of time, before bundling, in an environment separate from your client app or SSR server.
+Componentes de Servidor são um novo tipo de Componente que renderiza com antecedência, antes do bundling, em um ambiente separado do seu aplicativo cliente ou servidor SSR.
 
 </Intro>
 
-This separate environment is the "server" in React Server Components. Server Components can run once at build time on your CI server, or they can be run for each request using a web server.
+Este ambiente separado é o "servidor" em Componentes de Servidor React. Componentes de Servidor podem rodar uma vez no tempo de build em seu servidor CI, ou eles podem ser executados para cada requisição usando um servidor web.
 
 <InlineToc />
 
 <Note>
 
-#### How do I build support for Server Components? {/*how-do-i-build-support-for-server-components*/}
+#### Como eu construo suporte para Componentes de Servidor? {/*how-do-i-build-support-for-server-components*/}
 
-While React Server Components in React 19 are stable and will not break between minor versions, the underlying APIs used to implement a React Server Components bundler or framework do not follow semver and may break between minors in React 19.x. 
+Enquanto Componentes de Servidor React no React 19 são estáveis e não quebrarão entre versões minor, as APIs por baixo utilizadas para implementar um bundler ou framework de Componentes de Servidor React não seguem semver e podem quebrar entre minors no React 19.x.
 
-To support React Server Components 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 React Server Components in the future.
+Para dar suporte a Componentes de Servidor React como um bundler ou framework, nós recomendamos fixar em uma versão especifica do React, ou utilizar a versão Canary. Nós continuaremos trabalhando com bundlers e frameworks para estabilizar as APIs utilizadas para implementar Componentes de Servidor React no futuro.
 
 </Note>
 
-### Server Components without a Server {/*server-components-without-a-server*/}
-Server components can run at build time to read from the filesystem or fetch static content, so a web server is not required. For example, you may want to read static data from a content management system.
+### Componentes de Servidor sem um Servidor {/*server-components-without-a-server*/}
+Componentes de Servidor podem executar em tempo de build para ler do sistema de arquivos ou buscar conteúdo estático, então um servidor web não é necessário. Por exemplo, você pode querer ler dados estáticos de um sistema de gerenciamento de conteúdo.
 
-Without Server Components, it's common to fetch static data on the client with an Effect:
+Sem Componentes de Servidor, é comum buscar dados estáticos no cliente com um Effect:
 ```js
 // bundle.js
 import marked from 'marked'; // 35.9K (11.2K gzipped)
@@ -58,9 +58,9 @@ app.get(`/api/content/:page`, async (req, res) => {
 });
 ```
 
-This pattern means users need to download and parse an additional 75K (gzipped) of libraries, and wait for a second request to fetch the data after the page loads, just to render static content that will not change for the lifetime of the page.
+Este padrão significa que os usuários precisam baixar e analisar 75KB (gzipped) de bibliotecas adicionais, e esperar por uma segunda requisição para buscar os dados após a página carregar, apenas para renderizar conteúdo estático que não irá mudar durante o tempo de vida da página.
 
-With Server Components, you can render these components once at build time:
+Com Componentes de Servidor, você pode renderizar esses componentes uma vez em tempo de build:
 
 ```js
 import marked from 'marked'; // Not included in bundle
@@ -74,34 +74,34 @@ async function Page({page}) {
 }
 ```
 
-The rendered output can then be server-side rendered (SSR) to HTML and uploaded to a CDN. When the app loads, the client will not see the original `Page` component, or the expensive libraries for rendering the markdown. The client will only see the rendered output:
+A saída renderizada pode então ser renderizada no lado do servidor (SSR) para HTML e carregada em uma CDN. Quando o app carrega, o cliente não verá o componente `Page` original, ou as bibliotecas caras para renderizar o markdown. O cliente irá apenas ver a saída renderizada:
 
 ```js
 <div><!-- html for markdown --></div>
 ```
 
-This means the content is visible during first page load, and the bundle does not include the expensive libraries needed to render the static content.
+Isso significa que o conteúdo é visível durante o primeiro carregamento da página, e o bundle não inclui as bibliotecas custosas necessárias para renderizar o conteúdo estático.
 
 <Note>
 
-You may notice that the Server Component above is an async function:
+Você pode notar que o Componente de Servidor acima é uma função assíncrona:
 
 ```js
 async function Page({page}) {
   //...
 }
 ```
 
-Async Components are a new feature of Server Components that allow you to `await` in render.
+Componentes Assíncronos são uma nova funcionalidade dos Componentes de Servidor que permitem que você use `await` no render.
 
-See [Async components with Server Components](#async-components-with-server-components) below.
+Veja [Componentes assíncronos com Componentes de Servidor](#async-components-with-server-components) abaixo.
 
 </Note>
 
-### Server Components with a Server {/*server-components-with-a-server*/}
-Server Components can also run on a web server during a request for a page, letting you access your data layer without having to build an API. They are rendered before your application is bundled, and can pass data and JSX as props to Client Components.
+### Componentes de Servidor com um Servidor {/*server-components-with-a-server*/}
+Componentes de Servidor podem também executar em um servidor web durante uma requisição para uma página, permitindo que você acesse sua camada de dados sem ter que construir uma API. Eles são renderizados antes que sua aplicação seja empacotada e podem passar dados e JSX como props para Componentes Cliente.
 
-Without Server Components, it's common to fetch dynamic data on the client in an Effect:
+Sem Componentes de Servidor, é comum buscar dados dinâmicos no cliente em um Effect:
 
 ```js
 // bundle.js
@@ -150,7 +150,7 @@ app.get(`/api/authors/:id`, async (req, res) => {
 });
 ```
 
-With Server Components, you can read the data and render it in the component:
+Com Componentes de Servidor, você pode ler os dados e renderizá-los no componente:
 
 ```js
 import db from './database';
@@ -174,7 +174,7 @@ async function Author({id}) {
 }
 ```
 
-The bundler then combines the data, rendered Server Components and dynamic Client Components into a bundle. Optionally, that bundle can then be server-side rendered (SSR) to create the initial HTML for the page. When the page loads, the browser does not see the original `Note` and `Author` components; only the rendered output is sent to the client:
+O bundler então combina os dados, Componentes de Servidor renderizados e Componentes Cliente dinâmicos em um bundle. Opcionalmente, esse bundle pode então ser renderizado no lado do servidor (SSR) para criar o HTML inicial para a página. Quando a página carrega, o navegador não vê os componentes `Note` e `Author` originais; apenas a saída renderizada é enviada para o cliente:
 
 ```js
 <div>
@@ -183,26 +183,25 @@ The bundler then combines the data, rendered Server Components and dynamic Clien
 </div>
 ```
 
-Server Components can be made dynamic by re-fetching them from a server, where they can access the data and render again. This new application architecture combines the simple “request/response” mental model of server-centric Multi-Page Apps with the seamless interactivity of client-centric Single-Page Apps, giving you the best of both worlds.
+Componentes de Servidor podem ser feitos dinâmicos re-buscando-os de um servidor, onde eles podem acessar os dados e renderizar novamente. Essa nova arquitetura de aplicação combina o modelo mental simples de “requisição/resposta” de Apps Multi-Página server-centric com a interatividade contínua de Apps Single-Page client-centric, dando a você o melhor dos dois mundos.
 
-### Adding interactivity to Server Components {/*adding-interactivity-to-server-components*/}
+### Adicionando interatividade aos Componentes de Servidor {/*adding-interactivity-to-server-components*/}
 
-Server Components are not sent to the browser, so they cannot use interactive APIs like `useState`. To add interactivity to Server Components, you can compose them with Client Component using the `"use client"` directive.
+Componentes de Servidor não são enviados para o navegador, então eles não podem usar APIs interativas como `useState`. Para adicionar interatividade aos Componentes de Servidor, você pode compô-los com Componentes Cliente usando a diretiva `"use client"`.
 
 <Note>
 
-#### There is no directive for Server Components. {/*there-is-no-directive-for-server-components*/}
+#### Não existe diretiva para Componentes de Servidor. {/*there-is-no-directive-for-server-components*/}
 
-A common misunderstanding is that Server Components are denoted by `"use server"`, but there is no directive for Server Components. The `"use server"` directive is used for Server Functions.
+Um mal-entendido comum é que Componentes de Servidor são denotados por `"use server"`, mas não existe diretiva para Componentes de Servidor. A diretiva `"use server"` é usada para Funções de Servidor.
 
-For more info, see the docs for [Directives](/reference/rsc/directives).
+Para mais informações, veja a documentação para [Diretivas](/reference/rsc/directives).
 
 </Note>
 
-
-In the following example, the `Notes` Server Component imports an `Expandable` Client Component that uses state to toggle its `expanded` state:
+No exemplo a seguir, o Componente de Servidor `Notes` importa um Componente Cliente `Expandable` que usa state para alternar seu estado `expanded`:
 ```js
-// Server Component
+// Componente de Servidor
 import Expandable from './Expandable';
 
 async function Notes() {
@@ -219,7 +218,7 @@ async function Notes() {
 }
 ```
 ```js
-// Client Component
+// Componente Cliente
 "use client"
 
 export default function Expandable({children}) {
@@ -229,15 +228,15 @@ export default function Expandable({children}) {
       <button
         onClick={() => setExpanded(!expanded)}
       >
-        Toggle
+        Alternar
       </button>
       {expanded && children}
     </div>
   )
 }
 ```
 
-This works by first rendering `Notes` as a Server Component, and then instructing the bundler to create a bundle for the Client Component `Expandable`. In the browser, the Client Components will see output of the Server Components passed as props:
+Isso funciona renderizando primeiro `Notes` como um Componente de Servidor, e então instruindo o bundler a criar um bundle para o Componente Cliente `Expandable`. No navegador, os Componentes Cliente verão a saída dos Componentes de Servidor passados como props:
 
 ```js
 <head>
@@ -257,18 +256,18 @@ This works by first rendering `Notes` as a Server Component, and then instructin
 </body>
 ```
 
-### Async components with Server Components {/*async-components-with-server-components*/}
+### Componentes assíncronos com Componentes de Servidor {/*async-components-with-server-components*/}
 
-Server Components introduce a new way to write Components using async/await. When you `await` in an async component, React will suspend and wait for the promise to resolve before resuming rendering. This works across server/client boundaries with streaming support for Suspense.
+Componentes de Servidor introduzem uma nova forma de escrever Componentes usando async/await. Quando você `await` em um componente assíncrono, React irá suspender e esperar pela promise ser resolvida antes de retomar a renderização. Isso funciona através de limites de servidor/cliente com suporte a streaming para Suspense.
 
-You can even create a promise on the server, and await it on the client:
+Você pode até mesmo criar uma promise no servidor, e esperar por ela no cliente:
 
 ```js
-// Server Component
+// Componente de Servidor
 import db from './database';
 
 async function Page({id}) {
-  // Will suspend the Server Component.
+  // Irá suspender o Componente de Servidor.
   const note = await db.notes.get(id);
 
   // NOTE: not awaited, will start here and await on the client. 
@@ -285,7 +284,7 @@ async function Page({id}) {
 ```
 
 ```js
-// Client Component
+// Componente Cliente
 "use client";
 import {use} from 'react';
 
@@ -297,6 +296,6 @@ function Comments({commentsPromise}) {
 }
 ```
 
-The `note` content is important data for the page to render, so we `await` it on the server. The comments are below the fold and lower-priority, so we start the promise on the server, and wait for it on the client with the `use` API. This will Suspend on the client, without blocking the `note` content from rendering.
+O conteúdo de `note` é dados importantes para a página renderizar, então nós fazemos `await` nele no servidor. Os comentários estão abaixo da dobra e de baixa prioridade, então nós iniciamos a promise no servidor, e esperamos por ela no cliente com a API `use`. Isso irá Suspender no cliente, sem bloquear o conteúdo de `note` de renderizar.
 
-Since async components are [not supported on the client](#why-cant-i-use-async-components-on-the-client), we await the promise with `use`.
+Já que componentes assíncronos [não são suportados no cliente](#why-cant-i-use-async-components-on-the-client), nós fazemos await na promise com `use`.