feat: add docs 'sending only necessary data to client'

docs/performance/sending-only-necessary-data-to-client/en.md

@@ -0,0 +1,24 @@
+---
+description: TODO
+since: 1.0.0
+---
+
+In some situations, when using [loaders](http://localhost:8000/docs/en/concepts/loader) to fetch data, an excessive amount of information may be received, negatively impacting page performance. This is evidenced by the significant size of the JSON transmitted to the client.
+
+To mitigate this issue, we propose implementing a client-side data preprocessing process, ensuring that only necessary information is transmitted and used in the markup/UI.
+
+## Data Flow
+
+1. Data Request: Initiate the normal data flow by requesting the necessary information through props.
+
+2. Data Loader: Use a loader to fetch the desired data. In some scenarios, the loader may return a substantial amount of data, for instance, when fetching related products from [VTEX](https://www.deco.cx/docs/en/composable-apis/vtex). However, it's essential to note that there are instances where the loader might return more data than necessary for the specific operation.
+
+3. Inline Preprocessing: Introduce an inline data preprocessing mechanism. This component will receive the same props as the loader and process the data to transmit only essential information, optimizing performance.
+
+4. Delivery to Component: Transmit only the processed data to the JSX component, thus reducing unnecessary load on the client.
+
+## Benefits
+- Significant reduction in the size of transmitted JSON.
+- Noticeable improvement in page performance, especially in terms of loading.
+
+By implementing this data preprocessing process, it is possible to optimize page performance, ensuring that only crucial information is sent and processed, providing a more streamlined performance for the user.

docs/performance/sending-only-necessary-data-to-client/pt.md

@@ -0,0 +1,24 @@
+---
+description: TODO
+since: 1.0.0
+---
+
+Em algumas situações, ao utilizar [loaders](http://localhost:8000/docs/pt/concepts/loader) para obter dados, pode-se receber uma quantidade excessiva de informações, impactando negativamente o desempenho da página. Isso é evidenciado pelo tamanho significativo do JSON transmitido para o cliente.
+
+Para mitigar esse problema, propomos a implementação de um processo de pré-processamento dos dados no lado do cliente, garantindo que apenas as informações necessárias sejam transmitidas e utilizadas no markup/UI.
+
+## Fluxo de Dados
+
+1. Solicitação de Dados: Inicie o fluxo normal de dados, solicitando as informações necessárias por meio de props.
+
+2. Loader de Dados: Utilize um loader para obter os dados desejados. Em algumas situações, o loader pode retornar uma quantidade substancial de dados, por exemplo, ao solicitar produtos relacionados da [VTEX](https://www.deco.cx/docs/pt/composable-apis/vtex). No entanto, é importante observar que há momentos em que o loader pode retornar uma quantidade de dados maior do que o necessário para a operação em questão.
+
+3. Pré-Processamento Inline: Introduza um mecanismo de pré-processamento de dados inline. Este componente receberá as mesmas props do loader e processará os dados de forma a transmitir apenas as informações essenciais, otimizando assim o desempenho.
+
+4. Entrega ao Componente: Transmita apenas os dados processados para o componente JSX, reduzindo assim a carga desnecessária no cliente.
+
+## Benefícios
+- Redução significativa no tamanho do JSON transmitido.
+- Melhoria perceptível no desempenho da página, especialmente em termos de carregamento.
+
+Ao implementar esse processo de pré-processamento de dados, é possível otimizar a performance da página, garantindo que apenas as informações cruciais sejam enviadas e processadas, proporcionando um desempenho mais otimizado para o usuário.

docs/toc.ts

@@ -287,17 +287,24 @@ const tableOfContents: TableOfContents = [
       },
       {
         title: {
-          pt: "Como usar a deco para atingir alta performance",
-          en: "How can you use deco for achieve high performance",
+          pt: "Dicas para atingir uma alta performance",
+          en: "Performance tips",
         },
-        slug: "performance/how-deco-performance",
+        slug: "performance/tips",
       },
       {
         title: {
-          pt: "Dicas para atingir uma alta performance",
-          en: "Performance tips",
+          pt: "Enviar apenas os dados necessários para o cliente",
+          en: "Sending only necessary data to client",
         },
-        slug: "performance/tips",
+        slug: "performance/sending-only-necessary-data-to-client",       
+      },
+      {
+        title: {
+          pt: "Como usar a deco para atingir alta performance",
+          en: "How can you use deco for achieve high performance",
+        },
+        slug: "performance/how-deco-performance",
       },
     ],
   },