Mpa Orchestrator

Multi-Page Application (MPA) Orchestrator (2026 Edition)

English | Bahasa Indonesia

English

Orchestration & Integration

Connects and orchestrates with relevant domain skills like modern-web-guidance, brainstorming, zero-to-prod-orchestrator, and project-context-mapper to ensure cohesive execution.

Description

A structured approach for building and orchestrating Multi-Page Application (MPA) architectures within a single repository. Acts as an orchestrator connecting MPA principles with specialized skills (like mvc-expert, saas-multi-tenant, senior-frontend) to deliver cohesive, server-rendered applications. In 2026, MPAs are increasingly built with Astro 5 for content-heavy sites or traditional server frameworks (Laravel, Django, Go) augmented with HTMX 2 or Alpine.js for interactivity.

Core MPA Principles in a Single Repository

1. Centralized Architecture: Frontend views, backend logic, and routing in a unified codebase — simplifies deployment and reduces cognitive load.
2. Server-Side Routing & Rendering: A Front Controller intercepts requests, fetches data, and renders complete HTML per route. Options in 2026:
   • Astro 5: Best for content-heavy sites — renders to static HTML by default, hydrates islands on demand.
   • Next.js 15 (Pages Router): Traditional MPA feel with React components.
   • Backend-driven: Laravel/Django/Gin templates rendered server-side.
3. Islands Architecture (Astro 5):
   • Render 100% static HTML for non-interactive content.
   • Use client:load, client:idle, or client:visible directives to hydrate interactive islands only when needed.
   • Supports React, Vue, Svelte, Solid, or vanilla JS islands side by side.
4. HTMX 2 — HTML-First Interactivity:
   • Enhance any server-rendered page with partial HTML swaps without writing JavaScript.
   • Works with any backend — Django, Laravel, Go, Node.js.
   • hx-get, hx-post, hx-target, hx-swap for declarative AJAX.
5. Shared UI Ecosystem:
   • Maintain a layouts/ directory for base HTML structures.
   • Maintain a components/ directory for reusable UI elements.
6. Asset Management: Centralize static assets in public/. Implement cache-busting for production.
7. Session-based State: Use secure HTTP-only cookies and server sessions for auth, tenant context, and flash messages.

Framework Selection Guide

Orchestration Guidelines

• With modern-web-guidance: MUST execute FIRST before any HTML/CSS task to ensure modern frontend standards.
• With mvc-expert: Enforce MVC pattern — Controllers handle logic, Views handle rendering.
• With saas-multi-tenant: Integrate tenant identification in core routing middleware — every page load initializes tenant_id context securely.
• With senior-frontend / ui-ux-pro-max: Enhance with Alpine.js for reactive UI or HTMX 2 for HTML-driven partial updates — no heavy client-side bundles.
• With seo: Maximize MPA's inherent SEO advantages — every page returns fully populated HTML, correct meta tags, and Schema.org JSON-LD on initial load.
• vs spa-orchestrator: Choose MPA when SEO is critical, data is mostly read-heavy, and complex client-side state is not required. Choose SPA when the app is highly interactive and session-based (like dashboards).

Trigger Conditions

• Building a web application using the Multi-Page Application (MPA) approach in a single repository.
• Refactoring or migrating an existing app to a centralized MPA architecture.
• Building content sites, marketing pages, or SEO-critical applications.
• Using Astro 5 for static or content-heavy sites with optional interactive islands.
• Adding interactivity to server-rendered pages with HTMX 2 without a full SPA rewrite.

Bahasa Indonesia

Integrasi Orkestrasi

Terhubung dan mengorkestrasi skill domain yang relevan seperti modern-web-guidance, brainstorming, zero-to-prod-orchestrator, dan project-context-mapper untuk memastikan eksekusi yang kohesif.

Deskripsi

Pendekatan terstruktur untuk membangun dan mengorkestrasi arsitektur Multi-Page Application (MPA) di dalam satu repositori. Bertindak sebagai orkestrator yang menghubungkan prinsip MPA dengan skill spesialis lain untuk menghasilkan aplikasi server-rendered yang kohesif dan modern. Di 2026, MPA semakin banyak dibangun dengan Astro 5 untuk situs konten-berat atau framework server tradisional yang diperkuat dengan HTMX 2 atau Alpine.js.

Prinsip Inti MPA

1. Arsitektur Terpusat: View frontend, logika backend, dan routing dalam satu codebase.
2. Routing & Rendering Sisi Server: Front Controller menangkap permintaan, mengambil data, dan me-render HTML lengkap per rute.
3. Islands Architecture (Astro 5): Render HTML statis 100% secara default, hidrate island interaktif hanya saat diperlukan.
4. HTMX 2 — Interaktivitas HTML-First: Tingkatkan halaman server-rendered dengan pertukaran HTML parsial tanpa menulis JavaScript.
5. Ekosistem UI Bersama: Direktori layouts/ dan components/ untuk elemen UI yang dapat digunakan kembali.
6. State Berbasis Session: Cookie HTTP-only dan session sisi server untuk autentikasi dan konteks tenant.

Panduan Pemilihan Framework

Panduan Orkestrasi

• Dengan modern-web-guidance: WAJIB dieksekusi PERTAMA KALI sebelum tugas HTML/CSS untuk memastikan standar frontend modern.
• Dengan mvc-expert: Pastikan MPA mengikuti pola MVC secara ketat.
• Dengan saas-multi-tenant: Integrasikan identifikasi tenant di middleware routing inti.
• Dengan senior-frontend / ui-ux-pro-max: Tingkatkan dengan Alpine.js atau HTMX 2 untuk interaksi tanpa bundle berat.
• Dengan seo: Setiap halaman mengembalikan HTML penuh, tag meta, dan JSON-LD terisi saat load awal.
• vs spa-orchestrator: Pilih MPA saat SEO kritis dan data kebanyakan read-heavy. Pilih SPA saat aplikasi sangat interaktif seperti dashboard.

Kondisi Pemicu

• Membangun aplikasi web dengan pendekatan MPA dalam satu repositori.
• Refaktor atau migrasi aplikasi yang ada ke arsitektur MPA terpusat.
• Membangun situs konten, halaman marketing, atau aplikasi kritis SEO.
• Menggunakan Astro 5 untuk situs statis atau konten-berat dengan island interaktif opsional.
• Menambahkan interaktivitas ke halaman server-rendered dengan HTMX 2 tanpa menulis ulang ke SPA.

📄 Standard Pages Mandate (CRITICAL)

MANDATORY: Whenever you are building a new application, landing page, or website, you MUST automatically create the following standard pages:

1. About Page (/about)
2. Profile Page (/profile)
3. Contact Page (/contact)
4. Terms of Reference / Terms of Service (/terms)
5. Privacy Policy (/privacy-policy)

These pages must be generated with standard boilerplate content that can later be customized to fit the specific application. Do not wait for the user to ask for them; they are a strict requirement for all web projects. / WAJIB: Otomatis buatkan halaman standar (About, Profile, Contact, Terms, Privacy Policy) pada setiap pembuatan aplikasi/website baru dengan konten boilerplate yang bisa disesuaikan nanti.