Firefox Zotero Connector saves stale snapshot after client-side navigation in Next.js SPA
Summary:
When using the Firefox Zotero Connector on a React/Next.js single-page application, saving a page after client-side navigation can result in Zotero attaching the snapshot from the previously saved page instead of the currently visible page.
Environment:
* Firefox
* Zotero Connector (Firefox extension)
* Website stack: Next.js / React SPA hosted on Vercel with Tailwind CSS
Site used for reproduction:
https://www.simonyates.ca
Steps to reproduce:
1. Navigate to:
https://www.simonyates.ca/perceptual-design-system
2. Save the page using the Zotero Connector.
3. Confirm that the saved snapshot is correct.
4. Without hard-reloading the browser tab, navigate within the SPA to another page using normal client-side navigation.
Example:
https://www.simonyates.ca/studies/pie-chart-bezier-curves
5. Save the second page using the Zotero Connector.
6. Open the saved item in Zotero and inspect the snapshot attachment.
Expected result:
The snapshot attachment should contain the currently visible page.
Actual result:
The snapshot attachment contains the previously saved page (`/perceptual-design-system`) instead of the currently visible page.
Workaround:
Hard-reloading the page before saving causes the correct snapshot to be saved.
Additional notes:
This issue is consistently reproducible with snapshot attachments after client-side SPA navigation.
When using the Firefox Zotero Connector on a React/Next.js single-page application, saving a page after client-side navigation can result in Zotero attaching the snapshot from the previously saved page instead of the currently visible page.
Environment:
* Firefox
* Zotero Connector (Firefox extension)
* Website stack: Next.js / React SPA hosted on Vercel with Tailwind CSS
Site used for reproduction:
https://www.simonyates.ca
Steps to reproduce:
1. Navigate to:
https://www.simonyates.ca/perceptual-design-system
2. Save the page using the Zotero Connector.
3. Confirm that the saved snapshot is correct.
4. Without hard-reloading the browser tab, navigate within the SPA to another page using normal client-side navigation.
Example:
https://www.simonyates.ca/studies/pie-chart-bezier-curves
5. Save the second page using the Zotero Connector.
6. Open the saved item in Zotero and inspect the snapshot attachment.
Expected result:
The snapshot attachment should contain the currently visible page.
Actual result:
The snapshot attachment contains the previously saved page (`/perceptual-design-system`) instead of the currently visible page.
Workaround:
Hard-reloading the page before saving causes the correct snapshot to be saved.
Additional notes:
This issue is consistently reproducible with snapshot attachments after client-side SPA navigation.
Upgrade Storage