|
| 1 | +--- |
| 2 | +title: Improve embedding dossier page's performance |
| 3 | +description: Describes how to use goToPage() API to enhance the performance in some specific scenarios. |
| 4 | +--- |
| 5 | + |
| 6 | +This page introduces a method to improve the embedding performance in a specific case. |
| 7 | + |
| 8 | +## The performance problem in a specific case |
| 9 | + |
| 10 | +Sometimes the user may use a special web page layout like this: |
| 11 | + |
| 12 | + |
| 13 | + |
| 14 | +On this web page, the left side is a dossier list, and the right side is a embedded dossier page. The dossier list might be fetched through some REST APIs like `GET /api/searches/results`, and the embedded dossier is normally rendered by calling the Embedding SDK API like `microstrategy.embeddingContexts.embedDossierConsumptionPage()`. When the user changes his selection on the left dossier list, the right side's embedded dossier will also change by calling `microstrategy.embeddingContexts.embedDossierConsumptionPage()` with new dossier id again in the same container. |
| 15 | + |
| 16 | +It's similar as the process that the user first go to the Library homepage, then clicks a dossier item to enter the dossier page. However, if you simply write the program like this: |
| 17 | + |
| 18 | +```javascript |
| 19 | +// Assume the parameters can be passed to this function after the user click |
| 20 | +async function onDossierListClicked({serverUrl, projectId, dossierId}) { |
| 21 | + await microstrategy.embeddingContexts.embedDossierConsumptionPage({ |
| 22 | + serverUrl, |
| 23 | + projectId, |
| 24 | + objectId: dossierId, |
| 25 | + placeholder: document.getElementById("dossier-container"), |
| 26 | + ... |
| 27 | + }); |
| 28 | +} |
| 29 | +``` |
| 30 | + |
| 31 | +You will see sometimes the embedded dossier page will be loaded slower than entering the dossier page from the homepage on Library Web. |
| 32 | + |
| 33 | +That's because the `microstrategy.embeddingContexts.embedDossierConsumptionPage()` API call on the same container will destroy the original iframe and create a new one. So its loading is like open the dossier in a new browser tab, in which we need to fetch all the resources, including the static resources and REST API result again. However, when the user enters the dossier page from homepage on Library Web, all these resources are cached and Library Web doesn't need to load them repeatedly. |
| 34 | + |
| 35 | +## A better solution: Use `goToPage()` |
| 36 | + |
| 37 | +To improve the performance of this use case and gain the similar performance as entering dossier pages from the Library homepage, we recommend you use the [EmbeddingContext.goToPage()](../embedding-context/#gotopagepageinfo) API like this: |
| 38 | + |
| 39 | +```javascript |
| 40 | +let containerIdToContext = {}; |
| 41 | +// If necessary, the user can also create instance by himself and pass the instance Id here |
| 42 | +async function onDossierListClicked({serverUrl, projectId, dossierId, instanceId}) { |
| 43 | + const containerId = "dossier-container"; |
| 44 | + let embeddingContext; |
| 45 | + if (containerIdToContext[containerId]) { |
| 46 | + embeddingContext = containerIdToContext[containerId]; |
| 47 | + await embeddingContext.goToPage({ |
| 48 | + projectId, |
| 49 | + objectId: dossierId, |
| 50 | + instanceId, |
| 51 | + }); |
| 52 | + } else { |
| 53 | + embeddingContext = await microstrategy.embeddingContexts.embedDossierConsumptionPage({ |
| 54 | + serverUrl, |
| 55 | + projectId, |
| 56 | + objectId: dossierId, |
| 57 | + placeholder: document.getElementById(containerId), |
| 58 | + ... |
| 59 | + }); |
| 60 | + containerIdToContext[containerId] = embeddingContext; |
| 61 | + } |
| 62 | +} |
| 63 | +``` |
| 64 | + |
| 65 | +In this case, the `embeddingContext` can be retained, and the `goToPage()` call is similar as a simple redirect on the Library Web. So it has the similar performance as entering the dossier page from homepage on Library. |
0 commit comments