Custom Widget Gets Rendered Twice
Written By
Orsolya Hegedus
How To articles are not official guidelines or officially supported documentation. They are community-contributed content and may not always reflect the latest updates to Liferay DXP. We welcome your feedback to improve How To articles!
While we make every effort to ensure this Knowledge Base is accurate, it may not always reflect the most recent updates or official guidelines.We appreciate your understanding and encourage you to reach out with any feedback or concerns.
Legacy Article
You are viewing an article from our legacy "FastTrack"
publication program, made available for informational purposes. Articles
in this program were published without a requirement for independent
editing or verification and are provided"as is" without
guarantee.
Before using any information from this article, independently verify its
suitability for your situation and project.
Issue
- After defining a Custom Element widget and placing it on a page, it is observed that the widget is loaded twice.
- Sometimes this happens so fast that it is unnoticeable, other times a couple of seconds pass between the two renders.
- In the browser console, the double rendering is visible at the first page load.
Resolution
- This is the intended behavior when Single Page Application (SPA) is enabled.
- First the page loads, which leads to the first render. Then the SPA needs to index all the elements on the page, which will then cause the second render.
- Not only custom, but out-of-the-box widgets get rendered twice. However, the out-of-the-box widgets' first render happens on the server's side, so the double rendering is not as noticeable.
- Possible workarounds:
- Disable SPA globally, via portal-ext.properties.
- javascript.single.page.application.enabled=false
- Disable SPA for a specific page:
- At System Settings > Infrastructure > Frontend SPA Infrastructure, add the name of the page under Custom Excluded Paths
- E.g., if the page is called Test, enter /Test
- Ensure that the custom element defines a disconnect() callback to unmount it from the DOM and free any other used resources. (you may check our workspace samples)
Did this article resolve your issue ?