Skip to content

Commit bf0b8ec

Browse files
ShashiSubramanyaShashiSubramanya
committed
perender upate
1 parent 0a16d43 commit bf0b8ec

1 file changed

Lines changed: 149 additions & 9 deletions

File tree

‎modules/ROOT/pages/prerender.adoc‎

Lines changed: 149 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,164 @@
1-
= Prerender components
1+
= Prerender embed components
22
:toc: true
33
:toclevels: 3
44

55
:page-title: Prerender components
66
:page-pageid: prerender
77
:page-description: Prerender components to optimize user experience of your embedding application
88

9-
To optimize your user's experience when ThoughtSpot is embedded into your application, we recommend using the prerender method.
9+
Pre-rendering allows your app to load ThoughtSpot embed components in the background before displaying them in the embed view. You can use pre-rendering for performance optimization, reducing iframe initialization delays, and for seamless transition when switching between the embedded view and the host app.
1010

11-
== Prerender
11+
== When to use prerender
12+
13+
Use prerender in the following cases:
1214

13-
You can load ThoughtSpot components that are not specific to the user's session before your application user accesses the embedded content. With this, the amount of ThoughtSpot assets left to load when the user accesses the embedded content is reduced.
15+
* If you want to preload an embed component, such as a Liveboard, Spotter interface, or full application, before it's shown to the user.
16+
* Your application has a tabbed interface with multiple embed views or your embed involves switching between pages, and you want to show the components on the next page instantly.
1417

15-
=== When to use prerender
18+
== Pre-rendering
1619

17-
Use prerender in the following cases:
20+
ThoughtSpot supports the following rendering options for the embed components:
21+
22+
* Normal render +
23+
Normal render is the default behavior of the ThoughtSpot SDK. It loads the ThoughtSpot app when the component is rendered.
24+
* Pre-Render +
25+
Pre-renders the embed as soon as the component code is rendered. With this, the amount of ThoughtSpot assets left to load when the user accesses the embedded content is reduced.
26+
* On-demand pre-rendering +
27+
Pre-renders after the embed component is rendered at least once.
28+
29+
Prerender allows you to create a placeholder element on the page for the ThoughtSpot component to eventually populate. To preload components, you must place this element into a section of your application that will be viewed before the component.
30+
For example, it is common for analytics applications to have a custom-built landing page that directs users to relevant pieces of embedded content. This would be an ideal place to preload the component, so the frame is ready to render by the time the user clicks on a specific link.
31+
32+
To pre-render a component:
33+
34+
. Add pre-render options to your embed code. +
35+
In this example, let's add a pre-render ID to the Liveboard embed instance.
36+
+
37+
[source,JavaScript]
38+
----
39+
const liveboardEmbed = new LiveboardEmbed('#embed', {
40+
liveboardId: '<your-liveboard-id>',
41+
preRenderId: 'my-prerender-id', // Unique ID for this pre-render instance
42+
// Optionally, disable dynamic size tracking:
43+
// doNotTrackPreRenderSize: true,
44+
});
45+
----
46+
You can also pre-render a generic instance in the background using the `prerenderGeneric` method. This preloads a generic instance of the component (without a specific path) in the background and applies flags. The `liveboardId` is passed when your embed is rendered. This is a generic pre-render where only the basic assets needed for rendering the app are loaded.
47+
This method might not be as fast as pre-rendering with `liveboardId` but it is faster than normal rendering.
48+
49+
+
50+
[source,JavaScript]
51+
----
52+
await liveboardEmbed.prerenderGeneric();
53+
----
54+
. Create a placeholder shell. +
55+
This sets up the pre-render shell and is hidden by default.
56+
57+
+
58+
[source,JavaScript]
59+
----
60+
await liveboardEmbed.preRender();
61+
----
62+
. Show pre-rendered component.
63+
+
64+
[source,JavaScript]
65+
----
66+
await liveboardEmbedembed.showPreRender();
67+
----
68+
. For style synchronization such as adjusting the position, width, and height of the pre-rendered component to match the embedding element, call the `syncPreRenderStyle` method to ensure a seamless display of styles.
69+
+
70+
[source,JavaScript]
71+
----
72+
embed.syncPreRenderStyle();
73+
----
74+
75+
== Code sample
76+
77+
[source,JavaScript]
78+
----
79+
import {
80+
LiveboardEmbed,
81+
AuthType,
82+
init,
83+
prefetch,
84+
} from '@thoughtspot/visual-embed-sdk';
85+
86+
// Initialize SDK
87+
init({
88+
thoughtSpotHost: 'https://<your-thoughtspot-host>',
89+
authType: AuthType.None,
90+
});
91+
92+
//Create LiveboardEmbed instance
93+
const liveboardEmbed = new LiveboardEmbed('#embed', {
94+
liveboardId: '<your-liveboard-id>',
95+
/Replace with your actual Liveboard OD
96+
preRenderId: 'my-prerender-id', //Replace with the actual ID
97+
});
98+
99+
// Pre-render in the background
100+
liveboardEmbed.showPreRender();
101+
102+
//Show the pre-rendered component when needed
103+
document.getElementById('show-liveboard-btn').onclick = () => {
104+
liveboardEmbed.render();
105+
};
106+
----
107+
108+
== Best Practices
109+
* Use unique `preRenderId` values for each separate embed.
110+
* Place the pre-render shell in the DOM early (on page mount).
111+
* If using `prerenderGeneric`, call this method early.
112+
* Avoid multiple re-instantiations. Initialize once and reuse the instance.
113+
* Use `full-height` if necessary.
114+
115+
== SDK reference for pre-rendering methods and properties
116+
117+
The Visual Embed SDK provides the following methods and properties for pre-rendering embed components:
118+
119+
[width="100%" cols="7,7,7"]
120+
[options="header"]
121+
|====
122+
| Name
123+
| Description
124+
| Example
125+
| xref:AppEmbed.adoc#_prerender[preRender]
126+
| This method creates `preRender` shell. Optionally, shows the preRender after rendering components.
127+
| `await embed.preRender();`
128+
| xref:AppEmbed.adoc#_prerendergeneric[prerenderGeneric]
129+
| This method pre-renders a generic instance of the ThoughtSpot embed component.
130+
| `await embed.prerenderGeneric();`
131+
| xref:AppEmbed.adoc#_showprerender[showPreRender]
132+
| This method displays the pre-rendered component. If the component is not pre-rendered, it creates and renders it.
133+
| `await embed.showPreRender();`
134+
| xref:AppEmbed.adoc#_hideprerender[hidePreRender]
135+
| This method hides the pre-rendered component if available.
136+
| `embed.hidePreRender();`
137+
| xref:AppViewConfig.adoc#_getprerenderids[getPreRenderIds]
138+
| This method retrieves unique HTML element IDs for pre-render-related elements, based on `preRenderId`.
139+
| `embed.getPreRenderIds();`
140+
| xref:AppEmbed.adoc#_getprerenderids[preRenderId]
141+
| This configuration property allows defining the object ID for the pre-rendered instance. Can be used with `showPreRender`/`hidePreRender`.
142+
| `preRenderId: "preRenderId-123"`
143+
| xref:AppEmbed.adoc#_syncprerenderstyle[syncPreRenderStyle]
144+
| This method synchronizes style, position, width, height of the pre-rendered component with embedding element.
145+
| `embed.syncPreRenderStyle();`
146+
| xref:AppViewConfig.adoc#_donottrackprerendersize[doNotTrackPreRenderSize]
147+
| This configuration setting disables dynamic size tracking for pre-render component when set to true.
148+
| `doNotTrackPreRenderSize: true`
149+
|====
150+
151+
== Additional resources
152+
153+
* link:https://github.com/thoughtspot/developer-examples/tree/main/visual-embed/pre-rendering[Pre-rendering examples GitHub repository, window=_blank]
154+
* link:https://codesandbox.io/p/sandbox/github/thoughtspot/developer-examples/tree/main/visual-embed/pre-rendering[Code sandbox, window=_blank]
155+
156+
157+
////
158+
== Prerender
159+
160+
You can load ThoughtSpot components that are not specific to the user's session before your application user accesses the embedded content.
18161
19-
* if you have applications that do not have ThoughtSpot on the landing page.
20-
* if you are embedding ThoughtSpot Liveboards in your applications.
21162
22163
=== How it works
23164
@@ -278,7 +419,6 @@ function toggleLiveboardSelect(e){
278419
}
279420
----
280421
281-
////
282422
== Turn on CDN
283423
284424
Using a Content Delivery Network (CDN) reduces the time to pre-render static or dynamic ThoughtSpot assets by caching resources closer to the end user. When your application users navigate to ThoughtSpot very quickly after the embedding application loads, they need not wait for assets to finish pre-rendering.

0 commit comments

Comments
 (0)