tubearchivist-frontend/app/components/Header.tsx

import dynamic from "next/dynamic";

const Header = ({ authData }) => {
  const { session, status } = authData;

  return (
    <>
      <h1>Name: {session?.user?.name}</h1>
      <h1>Status: {status}</h1>
      <h1>Token: {session?.ta_token?.token}</h1>
      <h1>User ID: {session?.ta_token?.user_id}</h1>
    </>
  );
};

export const DynamicHeader = dynamic(() => import("../components/Header"), {
  suspense: true,
});

export default Header;