How can I leverage the layout.js feature of the Next.js App Router in a multi-zone setup to avoid redundant header rendering and API calls? Specifically, if I have a shared header component that should be consistent across all pages in both the host application and remote applications (treated as "pages" by Next.js), how can I ensure it's loaded only once from the root layout, preventing unnecessary re-renders and API calls when navigating between host and remote zones? Do I need to import the header component separately within each remote application, and if so, how do I avoid the performance implications of that?