I’m working on a project using Next.js 14 and I’m trying to implement a tab navigation system where each tab corresponds to a different route (/resume and /source). The goal is to navigate between these tabs without re-rendering the pages each time the route changes.

In these pages, I’m using the react-pdf library (https://github.com/wojtekmaj/react-pdf) to display a PDF document. I want the PDF document to remain displayed without reloading when I navigate between the tabs. However, I still want the navigation URL to change to reflect the active tab.

Here’s a simplified version of my current setup:

// packages/client/src/app/editor/[uuid]/@content/source/page.tsx
import React from 'react';
import SourceDocument from '@/app/editor/[uuid]/@content/source/components/source-document';

export default async function SourcePage({ params: { uuid } }: SourcePageProps): Promise<JSX.Element> {
  // ...fetching data...
  return <SourceDocument url={resumeSourceFile.url} />;
}

// packages/client/src/app/editor/[uuid]/@content/source/components/source-document.tsx
import React from 'react';
import { DocumentViewer } from '@/components/document-viewer';

const SourceDocument = ({ url }: SourceDocumentProps): JSX.Element => {
  // ...state and handlers...
  return <DocumentViewer onLoadSuccess={onLoadSuccess} numPages={numPages} file={url} />;
};

export default React.memo(SourceDocument);

I’ve tried using React.memo to prevent unnecessary re-renders, but it doesn’t seem to work in this case because the components are unmounted and remounted when the route changes.

I want to achieve the following:

1. When I navigate from /resume to /source (or vice versa), if I have visited the page before, it should not re-render but serve exactly the same content.
2. The navigation URL should change to reflect the active tab.
3. If I hard reload the page, then it should re-render.

Any suggestions on how to implement this in Next.js 14 would be greatly appreciated. Thanks in advance!