topic Can Nebula work with a Server Side Rendered Frontend Application? in Integration, Extension & APIs

Can Nebula work with a Server Side Rendered Frontend Application?

jw25 — Mon, 27 Jan 2025 15:39:35 GMT

I'm working on trying to embed native qlik charts using nebula into a Angular 19 SSR (server side rendered) frontend application.

I'm aware of a few gotcha's due to nebula and the underlying picasso requiring browser api's, so I've tried to avoid that issue by only importing the embed and a sample bar chart dynamically after the client side has rendered.

async ngOnInit() { if (isPlatformBrowser(this.platformId) && this.qlikApp) { const { embed } = await import('@nebula.js/stardust'); const barChart = await import('@nebula.js/sn-bar-chart'); const nuked = embed(this.qlikApp, { types: [ { name: 'bar-chart', load: () => Promise.resolve(barChart) } ] }); const element = document.getElementById('chart-container'); if (element) { nuked.render({ element: element, id: 'PmmueD', }); } } }

But i get this error when testing:

Is it possible to get nebula to work on a SSR frontend application?

Otherwise I'll fall back to using enigma.js and use another charting library like d3 to generate charts, as I am actively using enigma in the application, and know that d3 does work in SSR frontend applications.

Thanks

Re: Can Nebula work with a Server Side Rendered Frontend Application?

alex_colombo — Tue, 28 Jan 2025 15:31:34 GMT

Hey @jw25 it should work but as recommended pratice, please use qlik-embed for embedding chart in external web app. nebula is our library for creating extension and not for embedding.

Re: Can Nebula work with a Server Side Rendered Frontend Application?

jw25 — Mon, 03 Feb 2025 11:47:25 GMT

Hi Alex

I've had a test with qlik-embed, I can get it working in an client side rendered angular app, but not in an server side rendered angular app.
Based on how qlik-embed renders stuff requiring the browser api's, I think it's relatively safe to say that qlik-embed may not work (perhaps not at all, but at least not easily) with a server side renderd angular app.

Thanks
Jo

Re: Can Nebula work with a Server Side Rendered Frontend Application?

alex_colombo — Mon, 03 Feb 2025 13:27:57 GMT

Hey, qlik-embed is a front-end library and makes sense that is not working on server side. This is the same for all our library, nebula.js and Capability APIs, they only work on front-end.

If you are building a server side app you should get data from a Qlik app and then render with your library, you cannot leverage Qlik' front-end. For getting data from Qlik in the backend I can suggest to use our @qlik/api library.