I encountered a problem with server vs. client page component.
I have a very simple website with 2 landing pages sharing the same layout.
The result should be a SSG exported html, so the client vs server should not matter in my case for performance/usability.

simplified layout.ts

return <>
  <LpProvider> // should hold LP's data
    <Navigation />
    { children }
  </LpProvider>
</>

simplified navigation.tsx

export const Header = () => {
  const { data } = useContext(LpContext);
  return ...
}

lp-provider.tsx

'use client'

export default function LpProvider({ children }: Props) {
  const [data, setData] = useState(defaultData);
  return (
    <LpContext.Provider value={{ data, setData }}>
      {children}
    </LpContext.Provider>
  );
}
export const LpContext = createContext({
  data: defaultData,
  setData: (lpData: LpData) => {}
});

then I have /app/page-a/page.tsx and /app/page-b/page.tsx
and I wanted make them (preferably) server components

simplified /app/page-a/page.tsx

export const metadata: Metadata = {
  title: 'My title'
}

const PageA = () => {
  const { setData } = useContext(LpContext)
  setData({
   // dataLoadedFromLocalJson 
  })
  ...

But I can't use useContext() in that case (only in client component), which I need to, so I can share data of this landing page for the navigation.
However if I add "use client" my context will work, but I can't use Metadata because it works only on server component.

So the question - should I go rather Server or Client component for my pages?
and what I approach I should use for the context (sharing data between my navigation and page) vs. seo metada (set SEO meta within client component page)?