Can Nebula work with a Server Side Rendered Frontend Application?

[jw25]

Hi

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

Jo

[alex_colombo]

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.

[jw25]

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

[alex_colombo · Accepted solution]

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.