[{"data":1,"prerenderedAt":739},["ShallowReactive",2],{"header-nav":3,"footer-primary":155,"footer-secondary":232,"footer-description":258,"header-nav-data":260,"github-stars":262,"8f849cd0-a47b-4e32-bb19-b478973c90f7":366,"dfd79d2b-7af5-4cdb-aa94-3f73de97ebd8":372,"74634853-196b-4ce3-b256-4534c054838f":379,"site-banner":408,"358b0659-1f05-4427-bd1c-4bc03a43c182":412,"9df3f40e-6272-4ec6-a0d7-cc29265e087c":419,"1b444c23-b593-4391-9410-4ca5d2c7a7cb":423,"blog/solving-the-multiple-frontend-problem-in-modern-applications":426,"resource-sidebar-cta":476,"2a1ce79b-5635-40f7-8723-ccb9e9174522":480,"sales-reps":484,"1f0bf4ab-ff1a-4311-b7c3-fa7b60293e5f":736},{"items":4},[5,74,136,141,148],{"id":6,"title":7,"url":8,"callout":9,"callout_title":10,"children_title":11,"page":8,"children":12},"62c04c6c-5793-4702-8ed1-73dd563fd605","Product",null,"8f849cd0-a47b-4e32-bb19-b478973c90f7","Project Showcase","Use Cases and Features",[13,21,29,37,43,51,59,67],{"id":14,"title":15,"url":16,"description":17,"image":8,"icon":18,"page":19},"e7d7d5ed-89b1-4455-8b4a-8ae92c70e3a0","Headless CMS","/solutions/headless-cms/","Manage and deliver content with ease","code_blocks",{"permalink":20},"/solutions/headless-cms",{"id":22,"title":23,"url":24,"description":25,"image":8,"icon":26,"page":27},"60bdefd9-95e6-45a3-9f81-4748d07c59d3","Backend-as-a-Service","/solutions/backend-as-a-service/","Build and ship applications faster","speed",{"permalink":28},"/solutions/backend-as-a-service",{"id":30,"title":31,"url":32,"description":33,"image":8,"icon":34,"page":35},"5f9aebeb-4f89-445e-9850-5b1261a2743c","Headless Commerce","/solutions/product-information-management/","A single source of truth for products","shopping_cart_checkout",{"permalink":36},"/solutions/product-information-management",{"id":38,"title":39,"url":40,"description":41,"image":8,"icon":42,"page":8},"49e46134-80be-470e-8c73-afb1417fa9b6","100+ More Use Cases","https://directus.io/blog/100-tools-apps-and-platforms-you-can-build-with-directus","Build anything (or everything)","lightbulb",{"id":44,"title":45,"url":46,"description":47,"image":8,"icon":48,"page":49},"a589ac77-a5ce-45c5-a054-e43111e19158","Instant APIs","/products/connect/","Connect a database, get REST + GraphQL APIs","api",{"permalink":50},"/toolkit/connect",{"id":52,"title":53,"url":54,"description":55,"image":8,"icon":56,"page":57},"4a0f129a-c546-4493-b0a9-306e51692e90","Granular Policy-Based Auth","/products/auth/","Provide secure, autonomous data access","lock_person",{"permalink":58},"/toolkit/auth",{"id":60,"title":61,"url":62,"description":63,"image":8,"icon":64,"page":65},"f9250f2c-93a4-4108-80db-011bbe391ecf","Visual Automation Builder","/products/automate/","Automate content and data workflows with ease","build",{"permalink":66},"/toolkit/automate",{"id":68,"title":69,"url":8,"description":70,"image":8,"icon":71,"page":72},"f1ae4e40-5b05-42a4-9cd3-33dda35cc939","50+ More Features","Get everything you need out-of-the-box","auto_fix",{"permalink":73},"/features",{"id":75,"title":76,"url":8,"callout":77,"callout_title":78,"children_title":79,"page":8,"children":80},"2f6ad0d1-6dd3-4f17-b5c8-9f2abf71409a","Resources","dfd79d2b-7af5-4cdb-aa94-3f73de97ebd8","Watch Directus TV","Learn More",[81,88,96,102,109,116,122,129],{"id":82,"title":83,"url":84,"description":85,"image":8,"icon":86,"page":87},"0a3bf9f5-1ef2-43f4-bc09-7ff7488241c5","Blog","/blog","Read our latest articles and guides","library_books",{"permalink":84},{"id":89,"title":90,"url":91,"description":92,"image":8,"icon":93,"page":94},"165e3dc2-e51b-4456-8382-99c5775b0412","Case Studies","#","Case studies and success stories","magic_button",{"permalink":95},"/case-studies",{"id":97,"title":98,"url":99,"description":100,"image":8,"icon":101,"page":8},"5ae324b6-bf44-4c21-95ad-e6dc0c1c1f40","Community Forum","https://community.directus.io/","Questions and conversations","comment",{"id":103,"title":104,"url":91,"description":105,"image":8,"icon":106,"page":107},"b1db03f0-e537-490e-8c0f-c61c401d1024","Agency Directory","Browse our list of agency partners ","handshake",{"permalink":108},"/agency-directory",{"id":110,"title":111,"url":112,"description":113,"image":8,"icon":114,"page":115},"991731c8-eb40-4eec-85a5-6e977bcd7ec9","About Us","/about","Learn more about Directus and the team","supervised_user_circle",{"permalink":112},{"id":117,"title":118,"url":119,"description":120,"image":8,"icon":121,"page":8},"52aebf38-b3ad-4a27-807d-ce52398cd509","Wall of Love","https://testimonial.to/directus/all","See what others are saying about us","heart_plus",{"id":123,"title":124,"url":91,"description":125,"image":8,"icon":126,"page":127},"a86eca65-d5ae-4263-b7d9-4f1a1c50a0b1","Contact","Have a general inquiry or question for us?","mark_email_unread",{"permalink":128},"/contact",{"id":130,"title":131,"url":8,"description":132,"image":8,"icon":133,"page":134},"28225825-8d41-4809-9032-192fbf5c6e5d","Support","Reach out to Directus support","support",{"permalink":135},"/support",{"id":137,"title":138,"url":139,"callout":8,"callout_title":8,"children_title":8,"page":8,"children":140},"a3f1275d-b088-4b11-99bf-143fcbf39104","Developers","/docs",[],{"id":142,"title":143,"url":144,"callout":8,"callout_title":8,"children_title":8,"page":145,"children":147},"fae8fded-d2e2-468e-a68b-82abec7a7225","Enterprise","/solutions/enterprise/",{"permalink":146},"/solutions/enterprise",[],{"id":149,"title":150,"url":151,"callout":8,"callout_title":8,"children_title":8,"page":152,"children":154},"5c5e2fbc-49fd-4e41-a71e-e4f8db2b00cf","Pricing","/pricing/",{"permalink":153},"/pricing/self-hosted",[],{"items":156},[157,174,193,212],{"id":158,"title":159,"url":8,"page":8,"children":160},"522e608a-77b0-4333-820d-d4f44be2ade1","Solutions",[161,164,167,171],{"id":162,"title":15,"url":8,"page":163},"fcafe85a-a798-4710-9e7a-776fe413aae5",{"permalink":20},{"id":165,"title":23,"url":8,"page":166},"79972923-93cf-4777-9e32-5c9b0315fc10",{"permalink":28},{"id":168,"title":169,"url":8,"page":170},"0fa8d0c1-7b64-4f6f-939d-d7fdb99fc407","Product Information",{"permalink":36},{"id":172,"title":173,"url":40,"page":8},"63946d54-6052-4780-8ff4-91f5a9931dcc","100+ Things to Build",{"id":175,"title":76,"url":8,"page":8,"children":176},"8ab4f9b1-f3e2-44d6-919b-011d91fe072f",[177,181,185,189],{"id":178,"title":179,"url":180,"page":8},"f951fb84-8777-4b84-9e91-996fe9d25483","Documentation","https://docs.directus.io",{"id":182,"title":183,"url":184,"page":8},"366febc7-a538-4c08-a326-e6204957f1e3","Guides","https://docs.directus.io/guides/",{"id":186,"title":187,"url":188,"page":8},"aeb9128e-1c5f-417f-863c-2449416433cd","Community","https://directus.chat",{"id":190,"title":191,"url":192,"page":8},"da1c2ed8-0a77-49b0-a903-49c56cb07de5","Release Notes","https://github.com/directus/directus/releases",{"id":194,"title":131,"url":8,"page":8,"children":195},"d61fae8c-7502-494a-822f-19ecff3d0256",[196,200,204,208],{"id":197,"title":198,"url":199,"page":8},"8c43c781-7ebd-475f-a931-747e293c0a88","Issue Tracker","https://github.com/directus/directus/issues",{"id":201,"title":202,"url":203,"page":8},"d77bb78e-cf7b-4e01-932a-514414ba49d3","Feature Requests","https://github.com/directus/directus/discussions?discussions_q=is:open+sort:top",{"id":205,"title":206,"url":207,"page":8},"4346be2b-2c53-476e-b53b-becacec626a6","Community Chat","https://discord.com/channels/725371605378924594/741317677397704757",{"id":209,"title":210,"url":211,"page":8},"26c115d2-49f7-4edc-935e-d37d427fb89d","Cloud Dashboard","https://directus.cloud",{"id":213,"title":214,"url":8,"page":8,"children":215},"49141403-4f20-44ac-8453-25ace1265812","Organization",[216,220,225,229],{"id":217,"title":218,"url":112,"page":219},"1f36ea92-8a5e-47c8-914c-9822a8b9538a","About",{"permalink":112},{"id":221,"title":222,"url":91,"page":223},"b84bf525-5471-4b14-a93c-225f6c386005","Careers",{"permalink":224},"/careers",{"id":226,"title":227,"url":228,"page":8},"86aabc3a-433d-434b-9efa-ad1d34be0a34","Brand Assets","https://drive.google.com/drive/folders/1lBOTba4RaA5ikqOn8Ewo4RYzD0XcymG9?usp=sharing",{"id":230,"title":124,"url":8,"page":231},"8d2fa1e3-198e-4405-81e1-2ceb858bc237",{"permalink":128},{"items":233},[234,240,246,252],{"id":235,"title":236,"url":8,"page":237,"children":239},"8a1b7bfa-429d-4ffc-a650-2a5fdcf356da","Cloud Policies",{"permalink":238},"/cloud-policies",[],{"id":241,"title":242,"url":91,"page":243,"children":245},"bea848ef-828f-4306-8017-6b00ec5d4a0c","License",{"permalink":244},"/bsl",[],{"id":247,"title":248,"url":91,"page":249,"children":251},"4e914f47-4bee-42b7-b445-3119ee4196ef","Terms",{"permalink":250},"/terms",[],{"id":253,"title":254,"url":91,"page":255,"children":257},"ea69eda6-d317-4981-8421-fcabb1826bfd","Privacy",{"permalink":256},"/privacy",[],{"description":259},"\u003Cp>A composable backend to build your Headless CMS, BaaS, and more. \u003C/p>",{"header_cta_buttons":261},"74634853-196b-4ce3-b256-4534c054838f",{"id":263,"node_id":264,"name":265,"full_name":266,"private":267,"owner":268,"html_url":285,"description":286,"fork":267,"url":287,"forks_url":288,"keys_url":289,"collaborators_url":290,"teams_url":291,"hooks_url":292,"issue_events_url":293,"events_url":294,"assignees_url":295,"branches_url":296,"tags_url":297,"blobs_url":298,"git_tags_url":299,"git_refs_url":300,"trees_url":301,"statuses_url":302,"languages_url":303,"stargazers_url":304,"contributors_url":305,"subscribers_url":306,"subscription_url":307,"commits_url":308,"git_commits_url":309,"comments_url":310,"issue_comment_url":311,"contents_url":312,"compare_url":313,"merges_url":314,"archive_url":315,"downloads_url":316,"issues_url":317,"pulls_url":318,"milestones_url":319,"notifications_url":320,"labels_url":321,"releases_url":322,"deployments_url":323,"created_at":324,"updated_at":325,"pushed_at":326,"git_url":327,"ssh_url":328,"clone_url":329,"svn_url":285,"homepage":330,"size":331,"stargazers_count":332,"watchers_count":332,"language":333,"has_issues":334,"has_projects":334,"has_downloads":334,"has_wiki":267,"has_pages":267,"has_discussions":334,"forks_count":335,"mirror_url":8,"archived":267,"disabled":267,"open_issues_count":336,"license":337,"allow_forking":334,"is_template":267,"web_commit_signoff_required":267,"has_pull_requests":334,"pull_request_creation_policy":342,"topics":343,"visibility":284,"forks":335,"open_issues":336,"watchers":332,"default_branch":362,"temp_clone_token":8,"custom_properties":363,"organization":364,"network_count":335,"subscribers_count":365},7122594,"MDEwOlJlcG9zaXRvcnk3MTIyNTk0","directus","directus/directus",false,{"login":265,"id":269,"node_id":270,"avatar_url":271,"gravatar_id":272,"url":273,"html_url":274,"followers_url":275,"following_url":276,"gists_url":277,"starred_url":278,"subscriptions_url":279,"organizations_url":280,"repos_url":281,"events_url":282,"received_events_url":283,"type":214,"user_view_type":284,"site_admin":267},15967950,"MDEyOk9yZ2FuaXphdGlvbjE1OTY3OTUw","https://avatars.githubusercontent.com/u/15967950?v=4","","https://api.github.com/users/directus","https://github.com/directus","https://api.github.com/users/directus/followers","https://api.github.com/users/directus/following{/other_user}","https://api.github.com/users/directus/gists{/gist_id}","https://api.github.com/users/directus/starred{/owner}{/repo}","https://api.github.com/users/directus/subscriptions","https://api.github.com/users/directus/orgs","https://api.github.com/users/directus/repos","https://api.github.com/users/directus/events{/privacy}","https://api.github.com/users/directus/received_events","public","https://github.com/directus/directus","The flexible backend for all your projects 🐰 Turn your DB into a headless CMS, admin panels, or apps with a custom UI, instant APIs, auth & more.","https://api.github.com/repos/directus/directus","https://api.github.com/repos/directus/directus/forks","https://api.github.com/repos/directus/directus/keys{/key_id}","https://api.github.com/repos/directus/directus/collaborators{/collaborator}","https://api.github.com/repos/directus/directus/teams","https://api.github.com/repos/directus/directus/hooks","https://api.github.com/repos/directus/directus/issues/events{/number}","https://api.github.com/repos/directus/directus/events","https://api.github.com/repos/directus/directus/assignees{/user}","https://api.github.com/repos/directus/directus/branches{/branch}","https://api.github.com/repos/directus/directus/tags","https://api.github.com/repos/directus/directus/git/blobs{/sha}","https://api.github.com/repos/directus/directus/git/tags{/sha}","https://api.github.com/repos/directus/directus/git/refs{/sha}","https://api.github.com/repos/directus/directus/git/trees{/sha}","https://api.github.com/repos/directus/directus/statuses/{sha}","https://api.github.com/repos/directus/directus/languages","https://api.github.com/repos/directus/directus/stargazers","https://api.github.com/repos/directus/directus/contributors","https://api.github.com/repos/directus/directus/subscribers","https://api.github.com/repos/directus/directus/subscription","https://api.github.com/repos/directus/directus/commits{/sha}","https://api.github.com/repos/directus/directus/git/commits{/sha}","https://api.github.com/repos/directus/directus/comments{/number}","https://api.github.com/repos/directus/directus/issues/comments{/number}","https://api.github.com/repos/directus/directus/contents/{+path}","https://api.github.com/repos/directus/directus/compare/{base}...{head}","https://api.github.com/repos/directus/directus/merges","https://api.github.com/repos/directus/directus/{archive_format}{/ref}","https://api.github.com/repos/directus/directus/downloads","https://api.github.com/repos/directus/directus/issues{/number}","https://api.github.com/repos/directus/directus/pulls{/number}","https://api.github.com/repos/directus/directus/milestones{/number}","https://api.github.com/repos/directus/directus/notifications{?since,all,participating}","https://api.github.com/repos/directus/directus/labels{/name}","https://api.github.com/repos/directus/directus/releases{/id}","https://api.github.com/repos/directus/directus/deployments","2012-12-12T01:35:36Z","2026-03-18T14:36:38Z","2026-03-18T15:43:33Z","git://github.com/directus/directus.git","git@github.com:directus/directus.git","https://github.com/directus/directus.git","https://directus.io",438225,34516,"TypeScript",true,4638,385,{"key":338,"name":339,"spdx_id":340,"url":8,"node_id":341},"other","Other","NOASSERTION","MDc6TGljZW5zZTA=","all",[48,344,345,346,347,348,265,349,350,351,352,353,354,355,356,357,358,359,360,361],"app","cms","composable","data-visualization","database","graphql","headless-cms","javascript","mariadb","mssql","mysql","no-code","node","postgresql","sql","sqlite","typescript","vue","main",{},{"login":265,"id":269,"node_id":270,"avatar_url":271,"gravatar_id":272,"url":273,"html_url":274,"followers_url":275,"following_url":276,"gists_url":277,"starred_url":278,"subscriptions_url":279,"organizations_url":280,"repos_url":281,"events_url":282,"received_events_url":283,"type":214,"user_view_type":284,"site_admin":267},326,{"id":9,"title":367,"description":368,"image":369,"external_url":8,"icon":8,"badge":8,"page":370,"resource":8},"Built With Directus","See what everyone's been building with Directus","e658de72-fb08-4ed2-8029-215c712c789e",{"permalink":371},"/built-with-directus",{"id":77,"title":373,"description":374,"image":375,"external_url":376,"icon":377,"badge":378,"page":8,"resource":8},"Directus TV","Go down the rabbit hole with hours of original video content from our team. ","ab70faf5-fc28-4608-a7e7-74fd4f020a9d","/tv","connected_tv","Video",{"alignment":380,"style":381,"experiment_enabled":267,"experiment":8,"experiment_variant":382,"buttons":385,"variants":395},"center","default",{"id":383,"key":384,"experiment":8},"8c4951b4-a6f9-4c06-9f71-fd39a3bdad1e","control",[386,389,392],{"id":387,"block_button_id":388},15,"358b0659-1f05-4427-bd1c-4bc03a43c182",{"id":390,"block_button_id":391},16,"9df3f40e-6272-4ec6-a0d7-cc29265e087c",{"id":393,"block_button_id":394},232,"1b444c23-b593-4391-9410-4ca5d2c7a7cb",[396],{"id":397,"alignment":380,"style":381,"buttons":398,"experiment_variant":405},"e1885d45-3119-41a3-8294-3cd796ea6f02",[399,402],{"id":400,"block_button_id":401},203,"ade37731-147d-48c4-864a-cec007576362",{"id":403,"block_button_id":404},202,"1cb4e89f-f7de-4b46-bbb8-080191517a72",{"id":406,"key":407},"66d2be4f-2492-4944-8060-039c15515918","variant",{"id":409,"icon":377,"content":410,"link":411},"812bf73d-ebfb-4246-9538-937a09a0c795","Learn more about our native MCP","https://directus.io/mcp",{"id":388,"external_url":8,"label":413,"color":414,"outline":267,"icon":8,"size":415,"target":416,"ph_event":8,"page":417,"resource":8},"Book a Demo","primary","medium","_self",{"permalink":418},"/demo",{"id":391,"external_url":420,"label":421,"color":422,"outline":267,"icon":8,"size":415,"target":416,"ph_event":8,"page":8,"resource":8},"https://directus.cloud/account/register","Get Started","secondary",{"id":394,"external_url":211,"label":424,"color":422,"outline":334,"icon":425,"size":415,"target":416,"ph_event":8,"page":8,"resource":8},"Log In","arrow_forward",{"title":427,"category":428,"date_published":429,"summary":430,"image":431,"author":433,"blocks":438,"type":444,"video":8,"seo":445,"related_resources":448},"Solving the Multiple-Frontend Problem in Modern Applications","resource","2025-02-18T20:06:00.000Z","The old \"one framework to rule them all\" approach is dead, and pretending otherwise is slowing down your entire development cycle.",{"id":432,"description":8},"7e6363fb-3b5a-4877-ab46-61040d06c1f0",{"name":434,"job_title":435,"image":436,"slug":437},"Matt Minor","Director, Demand Generation","1652318e-9f2a-4d4a-b847-95794367910d","matt-minor",[439],{"id":440,"collection":441,"item":442,"spacing":8,"sort":443},"475a14e4-550f-4922-975f-1982b0c54347","block_richtext","1f0bf4ab-ff1a-4311-b7c3-fa7b60293e5f",1,{"title":83},{"title":446,"meta_description":447,"no_follow":267,"no_index":267,"canonical_url":8,"json_ld":8},"Solving Multiple-Frontend Problems | Directus Blog","How to manage content across multiple frontends efficiently. Strategies for serving web, mobile, and IoT from a single content source.",[449,459,468],{"related_resources_id":450},{"title":451,"category":428,"date_published":452,"image":453,"slug":454,"author":455,"type":457},"REST vs. GraphQL vs. tRPC: Choosing Your API Architecture","2025-02-11T21:28:00.000Z","105a8292-d5b5-4a1c-aa73-0a07105c3107","rest-graphql-tprc",{"image":456},"87e21ef8-f72e-4933-92a2-e524d3e46519",{"slug":458},"blog",{"related_resources_id":460},{"title":461,"category":428,"date_published":462,"image":463,"slug":464,"author":465,"type":467},"Developers vs. Content Teams: Why There's Always Tension","2025-02-07T02:53:00.000Z","d0071cc4-743f-4fe7-83f6-6705efc6bdf4","developers-vs-content-teams",{"image":466},"1feeb84e-af8d-4795-8c17-47a53bcbe699",{"slug":458},{"related_resources_id":469},{"title":470,"category":428,"date_published":471,"image":472,"slug":473,"author":474,"type":475},"Stop Overengineering Your Multi-tenant Architecture","2025-02-04T22:37:00.000Z","1e588474-66fe-4c2f-a487-82e28de9e04c","stop-overengineering-your-multitenant-architecture",{"image":456},{"slug":458},{"resource_sidebar_cta_header":477,"resource_sidebar_cta_description":478,"resource_sidebar_cta_form":479},"Sign up for updates 🐇","Get insights, releases, and exciting news delivered directly to your inbox once a month. No spam - we promise. 🙂","2a1ce79b-5635-40f7-8723-ccb9e9174522",{"id":479,"alignment":481,"show_labels":267,"inline":267,"form":482},"left",{"hubspot_form_id":483,"typeform_form_id":8,"route_to_meeting_link_on_success":267},"d57a69e4-6f43-4768-a600-5f7d30306260",{"reps":485},[486,542],{"name":487,"sdr":8,"link":488,"countries":489,"states":491},"John Daniels","https://meet.directus.io/meetings/john2144/john-contact-form-meeting",[490],"United States",[492,493,494,495,496,497,498,499,500,501,502,503,504,505,506,507,508,509,510,511,512,513,514,515,516,517,518,519,520,521,522,523,524,525,526,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541],"Michigan","Indiana","Ohio","West Virginia","Kentucky","Virginia","Tennessee","North Carolina","South Carolina","Georgia","Florida","Alabama","Mississippi","New York","MI","IN","OH","WV","KY","VA","TN","NC","SC","GA","FL","AL","MS","NY","Connecticut","CT","Delaware","DE","Maine","ME","Maryland","MD","Massachusetts","MA","New Hampshire","NH","New Jersey","NJ","Pennsylvania","PA","Rhode Island","RI","Vermont","VT","Washington DC","DC",{"name":543,"link":544,"countries":545},"Michelle Riber","https://meetings.hubspot.com/mriber",[546,547,548,549,550,551,552,553,554,555,556,557,558,559,560,561,562,563,564,565,566,567,568,569,570,571,572,573,574,575,576,577,578,579,580,581,582,583,584,585,586,587,588,589,590,591,592,593,594,595,596,597,598,599,600,601,602,603,604,605,606,607,608,609,610,611,612,613,614,615,616,617,618,619,620,621,622,623,624,625,626,627,628,629,630,631,632,633,634,635,636,637,638,639,640,641,642,643,644,645,646,647,648,649,650,651,652,653,654,655,656,657,658,659,660,661,662,663,664,665,666,667,668,669,670,671,672,673,674,675,676,677,678,679,680,681,682,683,684,685,686,687,688,689,690,691,692,693,694,695,696,697,698,699,700,701,702,703,704,705,706,707,708,709,710,711,712,713,714,715,716,717,718,719,720,721,722,723,724,725,726,727,728,729,730,731,732,733,523,734,735],"Albania","ALB","Algeria","DZA","Andorra","AND","Angola","AGO","Austria","AUT","Belgium","BEL","Benin","BEN","Bosnia and Herzegovina","BIH","Botswana","BWA","Bulgaria","BGR","Burkina Faso","BFA","Burundi","BDI","Cameroon","CMR","Cape Verde","CPV","Central African Republic","CAF","Chad","TCD","Comoros","COM","Côte d'Ivoire","CIV","Croatia","HRV","Czech Republic","CZE","Democratic Republic of Congo","COD","Denmark","DNK","Djibouti","DJI","Egypt","EGY","Equatorial Guinea","GNQ","Eritrea","ERI","Estonia","EST","Eswatini","SWZ","Ethiopia","ETH","Finland","FIN","France","FRA","Gabon","GAB","Gambia","GMB","Ghana","GHA","Greece","GRC","Guinea","GIN","Guinea-Bissau","GNB","Hungary","HUN","Iceland","ISL","Ireland","IRL","Italy","ITA","Kenya","KEN","Latvia","LVA","Lesotho","LSO","Liberia","LBR","Libya","LBY","Liechtenstein","LIE","Lithuania","LTU","Luxembourg","LUX","Madagascar","MDG","Malawi","MWI","Mali","MLI","Malta","MLT","Mauritania","MRT","Mauritius","MUS","Moldova","MDA","Monaco","MCO","Montenegro","MNE","Morocco","MAR","Mozambique","MOZ","Namibia","NAM","Niger","NER","Nigeria","NGA","North Macedonia","MKD","Norway","NOR","Poland","POL","Portugal","PRT","Republic of Congo","COG","Romania","ROU","Rwanda","RWA","San Marino","SMR","São Tomé and Príncipe","STP","Senegal","SEN","Serbia","SRB","Seychelles","SYC","Sierra Leone","SLE","Slovakia","SVK","Slovenia","SVN","Somalia","SOM","South Africa","ZAF","South Sudan","SSD","Spain","ESP","Sudan","SDN","Sweden","SWE","Tanzania","TZA","Togo","TGO","Tunisia","TUN","Uganda","UGA","United Kingdom","GBR","Vatican City","VAT","Zambia","ZMB","Zimbabwe","ZWE","UK","Germany","Netherlands","Switzerland","CH","NL",{"id":442,"content":737,"color":738},"\u003Cp>Multiple frontend architecture is when your application needs to support different user interfaces across various platforms - web, mobile, IoT devices, internal tools - each potentially built with different frameworks and technologies.\u003C/p>\n\u003Cp>Suddenly, you find yourself maintaining React for your customer dashboard, Vue for your marketing site, and React Native for your mobile app. Each has their own technical stack, team preferences, and maintenance headaches.\u003C/p>\n\u003Cp>Making all these pieces work together is the real challenge. Most architectural advice out there still assumes you're building a single, unified frontend. Or worse, suggests you rewrite everything in the latest trending framework.\u003C/p>\n\u003Cp>In this article, we'll break down practical approaches to managing multiple frontends that won't require rewriting your entire codebase or making your teams learn yet another framework. We'll look at real patterns that work, common pitfalls to avoid, and how to build an architecture that can actually scale with your business needs. Let's hop in 🐇\u003C/p>\n\u003Ch2>The Reality of Modern Frontend Architecture\u003C/h2>\n\u003Cp>You may have heard of \"micro-frontends.\" \u003Ca href=\"https://blog.bitsrc.io/mastering-microfrontends-9-patterns-every-developer-should-know-397081673770\" target=\"_blank\" rel=\"noopener\">micro-frontend architecture breaks down your web application\u003C/a> into smaller, independent pieces that can be built and deployed separately.\u003C/p>\n\u003Cp>Think of your e-commerce site split into independent features - product catalog, shopping cart, checkout - each potentially built by different teams using different tech stacks.\u003C/p>\n\u003Cp>The numbers tell an interesting story. In 2022, \u003Ca href=\"https://tsh.io/blog/frontend-trends-2025-ai-accessibility-dxp/\" target=\"_blank\" rel=\"noopener\">75% of developers indicated that they had jumped on the micro-frontend bandwagon\u003C/a> in 2022. \u003Cstrong>\u003Ca href=\"https://tsh.io/blog/frontend-trends-2025-ai-accessibility-dxp/\" target=\"_blank\" rel=\"noopener\">That number dropped to 23% in 2024. \u003C/a>\u003C/strong>\u003C/p>\n\u003Cp>It's the classic tech hype cycle - rapid adoption followed by the realization that it's not a universal solution. The problem is that in the span of those two years, companies built complex systems that now require constant maintenance.\u003C/p>\n\u003Cp>Teams rushed to split up their monolithic frontends, created independent services, and now find themselves managing an ecosystem instead of an application. What started as a solution to complexity often ended up creating more of it.\u003C/p>\n\u003Ch2 class=\"whitespace-pre-wrap break-words\">Piecing Together The Architecture Puzzle\u003C/h2>\n\u003Cp class=\"whitespace-pre-wrap break-words\">The problem isn't that we need to choose between monoliths and micro-frontends. We need a practical approach that lets different frontends coexist without creating a maintenance nightmare.\u003C/p>\n\u003Ch3 class=\"whitespace-pre-wrap break-words\">Start With Your Foundation: API-First\u003C/h3>\n\u003Cp class=\"whitespace-pre-wrap break-words\">Your API layer is your foundation. It needs to work consistently whether the request comes from your React dashboard, Vue marketing site, or mobile app. Here's what actually works:\u003C/p>\n\u003Cp class=\"whitespace-pre-wrap break-words\">\u003Cimg src=\"https://marketing.directus.app/assets/203ab4ae-4e8f-4c12-b510-be6a47dd1afb.png?width=1300&height=1252\" alt=\"Multiple Frontend Problem \">\u003C/p>\n\u003Col class=\"[&:not(:last-child)_ul]:pb-1 [&:not(:last-child)_ol]:pb-1 list-decimal space-y-1.5 pl-7\">\n\u003Cli class=\"whitespace-normal break-words\">Create a consistent API contract\n\u003Cul class=\"[&:not(:last-child)_ul]:pb-1 [&:not(:last-child)_ol]:pb-1 list-decimal space-y-1.5 pl-7\">\n\u003Cli class=\"whitespace-normal break-words\">Define clear data structures that work across platforms\u003C/li>\n\u003Cli class=\"whitespace-normal break-words\">Document everything\u003C/li>\n\u003Cli class=\"whitespace-normal break-words\">Keep response formats consistent regardless of the frontend\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003Cli>Version from day one\n\u003Cul class=\"[&:not(:last-child)_ul]:pb-1 [&:not(:last-child)_ol]:pb-1 list-decimal space-y-1.5 pl-7\">\n\u003Cli>Create clear upgrade paths for breaking changes\u003C/li>\n\u003Cli>Allow frontends to migrate at their own pace\u003C/li>\n\u003Cli>Maintain backwards compatibility until all frontends upgrade\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003Cli>Implement an API gateway\n\u003Cul class=\"[&:not(:last-child)_ul]:pb-1 [&:not(:last-child)_ol]:pb-1 list-decimal space-y-1.5 pl-7\">\n\u003Cli>Route traffic efficiently between services\u003C/li>\n\u003Cli>Handle authentication in one place\u003C/li>\n\u003Cli>Monitor and rate limit as needed\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003C/ol>\n\u003Cp>This approach lets each frontend team work independently while ensuring they all speak the same language at the data level. \u003C/p>\n\u003Ch3 class=\"whitespace-pre-wrap break-words\">Share Code, Not Complexity: Module Federation\u003C/h3>\n\u003Cp class=\"whitespace-pre-wrap break-words\">With \u003Ca href=\"https://tsh.io/blog/frontend-trends-2025-ai-accessibility-dxp/\" target=\"_blank\" rel=\"noopener\">52% of developers already using Module Federation\u003C/a>, it's becoming a key part of managing multiple frontends. But what exactly is it? \u003C/p>\n\u003Cp class=\"whitespace-pre-wrap break-words\">Module Federation lets you share code between applications without rebuilding them each time something changes. Think of it as a way to load pieces of one application inside another - but each piece can be deployed independently.\u003C/p>\n\u003Cp class=\"whitespace-pre-wrap break-words\">Here's why it matters:\u003C/p>\n\u003Cul>\n\u003Cli class=\"whitespace-pre-wrap break-words\">Teams can work independently but share common components\u003C/li>\n\u003Cli class=\"whitespace-pre-wrap break-words\">Each frontend can deploy on its own schedule\u003C/li>\n\u003Cli class=\"whitespace-pre-wrap break-words\">You can update shared components without rebuilding every app\u003C/li>\n\u003Cli class=\"whitespace-pre-wrap break-words\">Applications load only the code they need, when they need it\u003C/li>\n\u003C/ul>\n\u003Cp>The catch? (There's always a catch 😔) You'll need to think carefully about which modules to share across applications, how to handle versioning of shared code, and where to draw the boundaries between apps. \u003C/p>\n\u003Cp>Still, for teams managing multiple frontends, Module Federation offers a practical way to share code without creating a maintenance nightmare. \u003C/p>\n\u003Ch2>The Reality of Implementation\u003C/h2>\n\u003Cp>Theory sounds great until you actually try to make it work. Let's talk about what really happens when you implement multiple frontends in production. \u003C/p>\n\u003Ch3>Finding Your Natural Boundaries\u003C/h3>\n\u003Cp>Most teams try to split their frontends based on technical concerns - by framework or deployment method. That's backwards. Your boundaries should follow your business logic.\u003C/p>\n\u003Cp>Look at your user journeys. Where do people naturally switch between different parts of your application? That's usually where your frontend boundaries should be. A real example: an e-commerce platform might split between:\u003C/p>\n\u003Cul>\n\u003Cli>The marketing site (content-heavy, SEO-focused)\u003C/li>\n\u003Cli>The shopping experience (dynamic, interactive)\u003C/li>\n\u003Cli>The account dashboard (complex state management)\u003C/li>\n\u003C/ul>\n\u003Cp>Each of these has different technical needs. By splitting here, you're working with your business logic instead of against it.\u003C/p>\n\u003Ch3>The Performance Paradox\u003C/h3>\n\u003Cp>Here's the thing about multiple frontends that no one talks about: they can make your application faster and slower at the same time. The trick is knowing which is which.\u003C/p>\n\u003Cp>Loading your entire application upfront? That's slow. Loading just the marketing site, then fetching the shopping cart experience only when needed? That's fast. We've seen teams \u003Ca href=\"https://marutitech.com/guide-to-micro-frontend-architecture/\" target=\"_blank\" rel=\"noopener\">improve initial load times by 80%\u003C/a> by splitting frontends strategically.\u003C/p>\n\u003Cp>But there's a catch. If you're not careful with shared dependencies, you'll end up downloading React three times for three different parts of your application. Your dependency strategy needs to be as thoughtful as your frontend split.\u003C/p>\n\u003Cp>Real numbers from production:\u003C/p>\n\u003Cul>\n\u003Cli>Shared dependencies can reduce bundle sizes by 60%\u003C/li>\n\u003Cli>Smart code splitting can cut initial load times in half\u003C/li>\n\u003Cli>But poor implementation can triple your JavaScript payload\u003C/li>\n\u003C/ul>\n\u003Ch3>Security: The Part Everyone Forgets\u003C/h3>\n\u003Cp>Multiple frontends create multiple entry points - that's just math. But the real security challenges aren't where most teams look.\u003C/p>\n\u003Cp>It's not about adding more authentication checks. It's about maintaining consistency across your entire system. Users shouldn't have to log in again just because they moved from your main app to your dashboard.\u003C/p>\n\u003Cp>Your API gateway becomes mission-critical here. It's not just about routing traffic - it's your first line of defense. Use it to:\u003C/p>\n\u003Cul>\n\u003Cli>Enforce consistent authentication\u003C/li>\n\u003Cli>Monitor for unusual patterns\u003C/li>\n\u003Cli>Rate limit at a system level\u003C/li>\n\u003Cli>Track and audit cross-frontend communication\u003C/li>\n\u003C/ul>\n\u003Cp>\u003Cimg src=\"https://marketing.directus.app/assets/8303dc39-25e6-47e5-b7b8-a2619244113d.png?width=1880&height=872\" alt=\"Multiple Frontend Problem Visual (2)\">\u003C/p>\n\u003Ch3>The Integration Challenge\u003C/h3>\n\u003Cp>Here's where most implementations actually fail: integration points. Each frontend needs to know about the others, but too much coupling defeats the purpose of separation.\u003C/p>\n\u003Cp>The solution? Build a contract between your frontends. Not just API endpoints, but actual interfaces that define how they interact. Document these contracts like you would document your APIs.\u003C/p>\n\u003Cp>For example, your shopping cart frontend needs to know how to:\u003C/p>\n\u003Cul>\n\u003Cli>Hand off to the checkout process\u003C/li>\n\u003Cli>Return to the product catalog\u003C/li>\n\u003Cli>Access shared user data\u003C/li>\n\u003Cli>Communicate with the notification system\u003C/li>\n\u003C/ul>\n\u003Cp>But it shouldn't need to know how those other systems work internally.\u003C/p>\n\u003Ch2>Getting Started\u003C/h2>\n\u003Cp>You don't have to rebuild everything from scratch. Start with your API layer - make it consistent and versioned. Then look for opportunities to share code between your frontends using Module Federation.\u003C/p>\n\u003Cp>Focus on the boundaries that already exist in your application. Don't force separation where it doesn't make sense. Let your team structure guide your technical boundaries - when the same team owns both sides of an interface, you'll have fewer integration headaches.\u003C/p>\n\u003Cp>Remember: the goal isn't to build the perfect architecture. It's to create something your team can understand, maintain, and scale. Something that lets you ship features instead of fighting framework wars.\u003C/p>\n\u003Cp>And if someone suggests rewriting everything in the latest trending framework? Show them your API documentation instead.\u003C/p>","foreground",1773850383729]