[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$f346o6teqmkuhz":3,"$f1nsiev8aiid4u":108},{"data":4},[5],{"id":6,"slug":7,"locale":8,"type":9,"title":10,"subtitle":11,"summary":12,"body":13,"primary_topic":14,"knowledge_status":15,"practical_validation":16,"workflow_status":17,"author_id":18,"published_at":19,"updated_at":20,"review_due_at":18,"canonical_url":18,"seo_title":21,"seo_description":12,"hero_asset_id":18,"reading_time":22,"version":23,"technology_versions":24,"review_frequency_days":18,"parent_content_id":25,"sort_in_parent":26,"hub_entry_status":27,"content_blocks":28,"hero_alt_text":18,"hero_caption":18,"hero_credit":18,"publication_scope":100,"access_level":101,"approved_at":18,"approved_by":18,"review_note":18,"home_enabled":102,"home_slot":103,"home_variant":104,"home_priority":105,"home_eyebrow":18,"home_valid_from":18,"home_valid_to":18,"home_image_asset_id":18,"promotion_kind":106,"sponsor_name":18,"sponsor_url":18,"sponsor_disclosure":107},"1149d1a0-139d-431c-8f1e-25da8ea4ad42","microservizi-client-side-ui-composition","it","CAPSULE","Client-Side UI Composition","Integration","Comporre la UI nel client, assegnando sezioni o componenti a fonti e responsabilità diverse.","Famiglia: Integration\nOrigine contenuto: Pattern classico presente nel draft, riorganizzato e approfondito.\n\nProblema\nUna pagina complessa contiene aree che evolvono e caricano dati indipendentemente.\n\nPattern\nComporre la UI nel client, assegnando sezioni o componenti a fonti e responsabilità diverse.\n\nCome funziona\nLa shell coordina layout, navigazione e stato condiviso; i componenti caricano o ricevono dati per la propria area. Servono convenzioni su error handling, design system e autenticazione.\n\nEsempio sanitario\nLa pagina paziente contiene Patient Header, Episodes, Orders, Documents e Results come sezioni indipendenti.\n\nBenefici\n• Caricamento progressivo\n• Autonomia delle aree UI\n• Degradazione parziale possibile\n\nTrade-off\n• Più richieste dal browser\n• Stato e sicurezza distribuiti\n• Esperienza incoerente se non governata\n\nQuando usarlo\nQuando le aree della pagina sono realmente indipendenti.\n\nQuando evitarlo\nQuando una singola composizione server-side è più semplice e performante.\n\nPattern correlati\n• microservizi-bff\n• microservizi-microfrontend\n","1ee7a5c3-1a1b-4215-bcaf-602732602ec5","DEEPENED","EXAMPLE_ONLY","PUBLISHED",null,"2026-08-27T19:12:02.157Z","2026-09-05T13:22:19.783Z","Client-Side UI Composition | Capsule Informatiche",7,4,{},"20676d31-9c90-432e-b23c-032bf2ba2a49",370,"PLANNED",[29,33,37,41,44,46,49,52,55,58,61,65,68,71,74,77,80,83,86],{"id":30,"text":31,"type":32},"ms-client-side-ui-composition-01","Famiglia: Integrazione · Pattern classico","callout",{"id":34,"text":35,"type":36},"ms-client-side-ui-composition-02","Il problema","heading2",{"id":38,"text":39,"type":40},"ms-client-side-ui-composition-03","Una pagina complessa contiene aree che evolvono e caricano dati indipendentemente.","paragraph",{"id":42,"text":43,"type":36},"ms-client-side-ui-composition-04","Il pattern",{"id":45,"text":12,"type":40},"ms-client-side-ui-composition-05",{"id":47,"text":48,"type":36},"ms-client-side-ui-composition-06","Come funziona",{"id":50,"text":51,"type":40},"ms-client-side-ui-composition-07","La shell coordina layout, navigazione e stato condiviso; i componenti caricano o ricevono dati per la propria area. Servono convenzioni su error handling, design system e autenticazione.",{"id":53,"text":54,"type":36},"ms-client-side-ui-composition-08","Esempio sanitario",{"id":56,"text":57,"type":32},"ms-client-side-ui-composition-09","La pagina paziente contiene Patient Header, Episodes, Orders, Documents e Results come sezioni indipendenti.",{"id":59,"text":60,"type":36},"ms-client-side-ui-composition-10","Benefici",{"id":62,"type":63,"items":64},"ms-client-side-ui-composition-11","bullet_list","Caricamento progressivo\nAutonomia delle aree UI\nDegradazione parziale possibile",{"id":66,"text":67,"type":36},"ms-client-side-ui-composition-12","Trade-off",{"id":69,"type":63,"items":70},"ms-client-side-ui-composition-13","Più richieste dal browser\nStato e sicurezza distribuiti\nEsperienza incoerente se non governata",{"id":72,"text":73,"type":36},"ms-client-side-ui-composition-14","Quando usarlo",{"id":75,"text":76,"type":40},"ms-client-side-ui-composition-15","Quando le aree della pagina sono realmente indipendenti.",{"id":78,"text":79,"type":36},"ms-client-side-ui-composition-16","Quando evitarlo",{"id":81,"text":82,"type":40},"ms-client-side-ui-composition-17","Quando una singola composizione server-side è più semplice e performante.",{"id":84,"text":85,"type":36},"ms-client-side-ui-composition-18","Pattern correlati",{"id":87,"type":88,"relations":89},"ms-client-side-ui-composition-19","related_capsules",[90,95],{"slug":91,"title":92,"summary":93,"contentId":94},"microservizi-bff","Backend for Frontend (BFF)","Creare un backend specifico per esperienza client che orchestra API interne e restituisce modelli orientati alla UI.","8b2fb612-9191-4f03-ab16-f58d22f7b0ba",{"slug":96,"title":97,"summary":98,"contentId":99},"microservizi-microfrontend","Microfrontend","Suddividere il frontend in vertical slice con ownership chiara, integrati da una shell e da contratti di composizione.","5c201ac2-c9f5-4d94-9fe1-6fcaf888612c","PORTAL","ANONYMOUS",false,"LATEST","AUTO",0,"EDITORIAL","Sponsorizzato",{"sources":109,"secondaryTopics":125,"tags":131,"primaryTopic":147,"technologies":151},[110,117],{"source_id":111},{"id":112,"type":113,"title":114,"author":18,"publisher":18,"edition":115,"url":18,"license_notes":116},"e4dd3e83-daa7-4867-b1ba-3d8b9d224299","PDF","Microservices Design Patterns - Draft","Draft caricato nel progetto","Fonte primaria caricata dall'utente. Utilizzata per la tassonomia classica dei pattern di microservizi e per i concetti esplicitamente presenti nel draft.",{"source_id":118},{"id":119,"type":120,"title":121,"author":18,"publisher":122,"edition":123,"url":18,"license_notes":124},"fc98b2b6-07fe-4d2e-b6b5-1875018441c9","PROJECT_NOTE","ADT - Frontend Vue e Microfrontend","Capsule Informatiche","Materiale progettuale","Materiale architetturale già analizzato. Usato come riferimento integrativo per BFF, composizione UI e microfrontend.",[126],{"topic_id":127},{"id":128,"name":129,"slug":130},"52823c4a-2742-464b-9fc8-f9e19c4600de","Integrazione tra Microservizi","integrazione-microservizi",[132,137,142],{"tag_id":133},{"id":134,"name":135,"slug":136},"a94e416a-7400-4ff4-8671-a2fc5635c4e0","Microservizi","microservizi",{"tag_id":138},{"id":139,"name":140,"slug":141},"74df0420-fe01-463d-84f1-79bbc7ee7114","Design Pattern","design-pattern",{"tag_id":143},{"id":144,"name":145,"slug":146},"6f46e700-10f6-4cc4-b80d-a35b044d3b61","Frontend","frontend",[148],{"id":14,"name":149,"slug":150},"Frontend Distribuito","frontend-distribuito",[152],{"technology_id":153},{"id":154,"name":155,"slug":156,"vendor":157},"00ed23c3-0332-47bc-85a7-5cc43b73eb63","Vue \u002F Nuxt","vue-nuxt","Vue.js \u002F Nuxt"]