diff --git a/docs/performance/sending-only-necessary-data-to-client/en.md b/docs/performance/sending-only-necessary-data-to-client/en.md index 0a466328..3a46a570 100644 --- a/docs/performance/sending-only-necessary-data-to-client/en.md +++ b/docs/performance/sending-only-necessary-data-to-client/en.md @@ -5,6 +5,8 @@ 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. +![287814343-44b8fc59-2c25-4a55-bbe3-16810d5501a6](https://github.com/deco-sites/starting/assets/76822093/ab2d2212-1e3e-487d-ad6a-3eb225f9b15b) + 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 @@ -17,8 +19,117 @@ To mitigate this issue, we propose implementing a client-side data preprocessing 4. Delivery to Component: Transmit only the processed data to the JSX component, thus reducing unnecessary load on the client. +## Example Code + +This is the implementation of the `storefront/loaders/Layouts/ProductCard.tsx`: + +```tsx +import ProductCard, { Layout } from "$store/components/product/ProductCard.tsx"; +import { usePlatform } from "$store/sdk/usePlatform.tsx"; + +interface Props { + /** @title Product Card layout props */ + layout: Layout; +} + +/** @title Product Card Layout */ +const loader = ({ layout }: Props): Layout => layout; + +export const Preview = (props: Props) => { + const { layout } = props; + + return ( +
+
+ Camisetas Gola Lisa", + "productID": "165", + "url": "", + "name": "Product Test", + "description": "Product Description", + "brand": { + "@type": "Brand", + "@id": "2000000", + "name": "deco.cx", + }, + "inProductGroupWithID": "33", + "sku": "165", + "gtin": "789456123003305", + "additionalProperty": [ + { + "@type": "PropertyValue", + "name": "TAMANHO", + "value": "GG", + "valueReference": "SPECIFICATION", + }, + ], + "isVariantOf": { + "@type": "ProductGroup", + "productGroupID": "33", + "hasVariant": [], + "name": "Camiseta Masculina Gola Lisa Olive", + "additionalProperty": [], + }, + "image": [ + { + "@type": "ImageObject", + "alternateName": "test", + "url": + "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/2291/b9e0a819-6a75-47af-84fe-90b44fecda5f", + }, + { + "@type": "ImageObject", + "alternateName": "test", + "url": + "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/2291/b9e0a819-6a75-47af-84fe-90b44fecda5f", + }, + ], + "offers": { + "@type": "AggregateOffer", + "priceCurrency": "BRL", + "highPrice": 69.3, + "lowPrice": 69.3, + "offerCount": 1, + "offers": [ + { + "@type": "Offer", + "price": 69.3, + "seller": "1", + "priceValidUntil": "2024-09-04T13:03:31Z", + "inventoryLevel": { "value": 10000 }, + "teasers": [], + "priceSpecification": [ + { + "@type": "UnitPriceSpecification", + "priceType": "https://schema.org/ListPrice", + "price": 179, + }, + { + "@type": "UnitPriceSpecification", + "priceType": "https://schema.org/SalePrice", + "price": 69.3, + }, + ], + "availability": "https://schema.org/InStock", + }, + ], + }, + }} + /> +
+
+ ); +}; + +export default loader; +``` + ## 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. \ No newline at end of file +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. diff --git a/docs/performance/sending-only-necessary-data-to-client/pt.md b/docs/performance/sending-only-necessary-data-to-client/pt.md index 9db958b6..59482245 100644 --- a/docs/performance/sending-only-necessary-data-to-client/pt.md +++ b/docs/performance/sending-only-necessary-data-to-client/pt.md @@ -5,6 +5,9 @@ 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. +![287813945-9ccd40a6-f41f-486f-a2b6-3f1efca0bfd1](https://github.com/deco-sites/starting/assets/76822093/bff19a56-bc1d-475b-b25d-f45fd1af713a) + + 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 @@ -17,8 +20,117 @@ Para mitigar esse problema, propomos a implementação de um processo de pré-pr 4. Entrega ao Componente: Transmita apenas os dados processados para o componente JSX, reduzindo assim a carga desnecessária no cliente. +## Código de exemplo + +Esta é a implementação do Loader `storefront/loaders/Layouts/ProductCard.tsx`: + +```tsx +import ProductCard, { Layout } from "$store/components/product/ProductCard.tsx"; +import { usePlatform } from "$store/sdk/usePlatform.tsx"; + +interface Props { + /** @title Product Card layout props */ + layout: Layout; +} + +/** @title Product Card Layout */ +const loader = ({ layout }: Props): Layout => layout; + +export const Preview = (props: Props) => { + const { layout } = props; + + return ( +
+
+ Camisetas Gola Lisa", + "productID": "165", + "url": "", + "name": "Product Test", + "description": "Product Description", + "brand": { + "@type": "Brand", + "@id": "2000000", + "name": "deco.cx", + }, + "inProductGroupWithID": "33", + "sku": "165", + "gtin": "789456123003305", + "additionalProperty": [ + { + "@type": "PropertyValue", + "name": "TAMANHO", + "value": "GG", + "valueReference": "SPECIFICATION", + }, + ], + "isVariantOf": { + "@type": "ProductGroup", + "productGroupID": "33", + "hasVariant": [], + "name": "Camiseta Masculina Gola Lisa Olive", + "additionalProperty": [], + }, + "image": [ + { + "@type": "ImageObject", + "alternateName": "test", + "url": + "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/2291/b9e0a819-6a75-47af-84fe-90b44fecda5f", + }, + { + "@type": "ImageObject", + "alternateName": "test", + "url": + "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/2291/b9e0a819-6a75-47af-84fe-90b44fecda5f", + }, + ], + "offers": { + "@type": "AggregateOffer", + "priceCurrency": "BRL", + "highPrice": 69.3, + "lowPrice": 69.3, + "offerCount": 1, + "offers": [ + { + "@type": "Offer", + "price": 69.3, + "seller": "1", + "priceValidUntil": "2024-09-04T13:03:31Z", + "inventoryLevel": { "value": 10000 }, + "teasers": [], + "priceSpecification": [ + { + "@type": "UnitPriceSpecification", + "priceType": "https://schema.org/ListPrice", + "price": 179, + }, + { + "@type": "UnitPriceSpecification", + "priceType": "https://schema.org/SalePrice", + "price": 69.3, + }, + ], + "availability": "https://schema.org/InStock", + }, + ], + }, + }} + /> +
+
+ ); +}; + +export default loader; +``` + ## 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. \ No newline at end of file +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.