I want to rewrite old PHP website using JS frontend framework. As the PHP web is very large, it is not possible to create APIs and rewrite all the UI at once. Therefore I want the new JS frontend app to provide basic app layout (menu, header etc.) with the possibility to show old PHP-rendered pages in the page content if necessary. (PHP pages would be naturally cut off menu, header etc., as these parts are in the JS app.)

Loading PHP-rendered content into an <iframe> is not a comfortable and secure solution. I rather want to load the HTML content directly into the page with AJAX.

What are the pitfalls of this approach? As for now, I am aware of these:

1. JS app router should distinguish between pages already implemented in JS framework and other pages which are PHP-rendered. Navigating to PHP pages should invoke AJAX call to corresponding URL and rewrite content with returned HTML.
2. When PHP page is loaded with AJAX, I should manually load any other resources it needs (JS scripts, CSS styles), for example with $.getScript(). The list of needed resources could even be returned in the AJAX call response.
3. All links in the PHP-generated content would cause navigation to given URL, which is bad. Clicking on such link should instead invoke JS function, which in turn should call history.pushState() and load page content with AJAX. In the same manner I should rewrite programmatic navigation caused by location.href = '...'.
4. Submitting a form in PHP-generated content would again cause navigation. I should add submit event handler for every page form. The handler should stop the submitting and send the data with AJAX instead (probably using this solution). HTML from AJAX response page should be displayed in the page content. I should also call history.pushState() in case that form's action was different from the current request URI or AJAX call has redirected to different request URI.

This solution seems to be one of few possibilities how to integrate new frontend single-page app (SPA) with old backend multi-page app (MPA). Nevertheless, I wasn't able to find any working recommendable example on the net. Is is better not to try to integrate at all?

(The question is largely framework-agnostic, but I use Vue.js with jQuery.)