Can I dynamically inject visualforce component into visualforce page?

Question

Is it possible to dynamically inject a Visualforce component into a visualforce page? I don't necessarily want the Visualforce component to be loaded with the rest of the page on the initial page load. Since I am placing the component in a popup. I want to inject it into my page and load it when the user clicks the button to open the popup.

I so far have not found a way to do this. It works if I just place the <c:MyComponent /> in my popup html from the get go.

And attempting to replace the content of the popup with <c:MyComponent /> in my Javascript just stops the page from loading altogether without any error.

I do not believe a lightning component will work for me. I have been trying to migrate it to one but am having all kinds of issues just getting JQuery and the third party js libaray I am using to simply load correctly in the Lightning component. So, I would like to find a solution with Visualforce components.

Answer 1

You can define "placeholders" for Visualforce components and dynamically generate them in Apex via the server-side controller: Creating and Displaying Dynamic Components

However, Salesforce doesn't really recommend this method of developing Visualforce pages. Since Visualforce is rendered on the server side, you won't be able to do this in pure JavaScript. Is there a compelling reason not to include the component at page render time? Given the server round-trip required, I doubt you will achieve responsiveness gains.

Visualforce pages are rendered synchronously as a whole on the server side. However, you can use rendered=false to suppress portions of the page at the server level, and you can later asynchronously rerender those sections by targeting an enclosing <apex:outputPanel>. That rerender does require a server round trip.