Issue with Embedded QuickSight Dashboard in Next.js 14 (App Router) – URL Becomes Invalid on Navigation

Question & Answer
, , ,
1

Context

I am implementing embedded QuickSight analytics in my Next.js 14 application using the App Router. I have multiple dashboards, each containing several sheets. My goal is to provide a seamless user experience where each page in my app displays only one specific sheet, without the default QuickSight navigation bar, only the sheet content should be visible.

I am using the “Create Embed URL for Registered User” approach to generate the embedded QuickSight URLs.

Problem

On navigating between pages, the embedded QuickSight URL becomes invalid. It seems that since Next.js unmounts the iframe during navigation, the embedded session is lost, and the URL cannot be reused. This forces me to fetch a new embed URL every time the user navigates to a different page, which negatively impacts the user experience.

Questions :

  1. Is this expected behavior?
    Given the way Next.js and React handle component unmounting, is this behavior something inherent to the framework’s lifecycle?
  2. Does the QuickSight SDK provide a way to persist the session across page navigations?
    I explored different solutions but couldn’t find a straightforward way to retain the embed URL across navigations.
  3. Potential Solutions:
    3.1 One approach I am considering is using a React portal to keep the iframe mounted globally and only update its content.
    3.2 Another option is rendering all dashboards within the main layout and showing/hiding them instead of remounting on every navigation.
    3.3 Are there any best practices or recommended patterns for handling embedded QuickSight in Next.js?

I want to ensure that this is an expected limitation of how Next.js (App Router) and React handle component lifecycles rather than an issue in my implementation. Any insights or alternative solutions would be greatly appreciated!

1 Like
2

Hello @moshets, welcome to the QuickSight community!

I completely understand this problem, and it is part of the reason we develop with Vite instead of Next.js for our embedded QuickSight application. The embedded URL is only able to be used one time, so the second it is unmounted by Next.js it is no longer available.

From the work-around options you listed above, 3.2 seems like the most viable option. Plus it would help reduce load times when switching between dashboards. The only thing you would need to consider is the lifetime of an individual session, but I suppose you could force a reload when that timeout occurs.

While this functionality seems a little wonky, it is functioning how I would expect so it isn’t a bug or anything that you are facing. Let me know if you have any further questions. Thank you!

3

Hello @moshets, I wanted to reach out since we have not heard back from you. Do you have any further questions on this topic, or did my previous response provide enough information? I will set my last reply as the solution for now, but please let me know if you have any more questions. Thank you!