Quiero reescribir el antiguo sitio web de PHP utilizando el marco de interfaz de JS. Como la web de PHP es muy grande, no es posible crear API y reescribir toda la interfaz de usuario a la vez. Por lo tanto, quiero que la nueva aplicación frontend JS proporcione un diseño básico de la aplicación (menú, encabezado, etc.) con la posibilidad de mostrar páginas antiguas renderizadas con PHP en el contenido de la página si es necesario. (Las páginas PHP se cortarían naturalmente en el menú, el encabezado, etc., ya que estas partes están en la aplicación JS).

Cargar contenido generado por PHP en un <iframe> no es una solución cómoda y segura. Prefiero cargar el contenido HTML directamente en la página con AJAX.

¿Cuáles son las trampas de este enfoque? Por ahora, estoy al tanto de estos:

1. El enrutador de la aplicación JS debe distinguir entre las páginas ya implementadas en el marco JS y otras páginas que se procesan en PHP. Navegar a las páginas de PHP debe invocar la llamada AJAX a la URL correspondiente y reescribir el contenido con el HTML devuelto.
2. Cuando la página PHP se carga con AJAX, debo cargar manualmente cualquier otro recurso que necesite (scripts JS, estilos CSS), por ejemplo, con $.getScript() . La lista de recursos necesarios podría incluso devolverse en la respuesta a la llamada de AJAX.
3. Todos los enlaces en el contenido generado por PHP provocarían la navegación a la URL dada , lo cual es malo. Al hacer clic en dicho enlace, se debería invocar la función JS, que a su vez debería llamar a history.pushState() y cargar el contenido de la página con AJAX. De la misma manera, debería reescribir la navegación programática causada por location.href = '...' .
4. Enviar un formulario en contenido generado por PHP volvería a provocar la navegación. Debería agregar un controlador de eventos de submit para cada formulario de página. El controlador debe detener el envío y enviar los datos con AJAX en su lugar (probablemente usando esta solución ). El HTML de la página de respuesta de AJAX debe mostrarse en el contenido de la página. También debería llamar a history.pushState() en caso de que la action de ese formulario fuera diferente del URI de solicitud actual o la llamada AJAX se haya redirigido a un URI de solicitud diferente.

Esta solución parece ser una de las pocas posibilidades de cómo integrar la nueva aplicación de una sola página (SPA) de frontend con la antigua aplicación de varias páginas (MPA) de backend. Sin embargo, no pude encontrar ningún ejemplo recomendable de trabajo en la red. ¿Es mejor no intentar integrarse en absoluto?

(La pregunta es en gran medida independiente del marco, pero uso Vue.js con jQuery ).