Server side conditional rendering based on session data

0

I’m trying to display to the user menu items ‘Account’ and ‘Log-out’ instead of ‘Log-in’ and ‘Sign-up’ after he loggs in.
I have set up express-session currectly and when the user loggs in I set:
request.session.user = { email: email, name… }

When the user navigate to the site at entry-server.tsx I test if the user is logged in and see the session info currectly (at the console.log…) then I pass the loggedIn boolean to the App component and from there to the Navbar component.

At the entry-client.tsx I don’t pass to App component nothing as the loggedIn parameter is optional.

I expected the server side HTML will be displyed.

What am I missing here, looking for direction don’t understand how to acomplish this

file entry-client.tsx

import './index.css';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.hydrateRoot(
  document.getElementById('root') as HTMLElement,
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

file entry-server.tsx

import ReactDOMServer from 'react-dom/server';
import { StaticRouter } from 'react-router-dom/server';
import App from './App';

export const render = (request: any) => {

  const loggedIn = (request.session?.user !== undefined);

  console.log('loggedIn=' + loggedIn + ' session =', request.session?.user);  

  const html = ReactDOMServer.renderToString(
    <StaticRouter location={request.originalUrl}>
      <App loggedIn={loggedIn} />
    </StaticRouter>
  );

  return { html };
};

file App.tsx (truncated version)

interface Props {
  loggedIn?: boolean;
}

function App({ loggedIn }: Props) {

  console.log('loggedIn', loggedIn);
  
  return (
    <div>
      <div className={`h-screen overflow-y-auto bg-${theme}-colorA px-2 py-4`}>
        <div className='flex flex-row justify-center'>
          <div className={`w-[1256px]`}>
            <div className='flex flex-col'>
              <div><Navbar className='' theme={theme} icons={icons} texts={texts} themes={themes} isLoggedIn={(undefined !== loggedIn) ? loggedIn : false} onThemeClick={(name) => setTheme(name)}/></div>
            </div>
            <Routes>
              <Route path={path.Home.href} element={<PageHome />} />
              <Route path={path.DocsAndSupport.href} element={<PageDocsAndSupport />} />
              <Route path={path.Blogs.href} element={<PageBlogs />} />
              <Route path={path.Products.href} element={<PageProducts />} />
              <Route path={path.Pricing.href} element={<PagePricing />} />
              <Route path={path.Services.href} element={<PageServices />} />
              <Route path={path.ContactUs.href} element={<PageContactUs theme={theme} />} />
              <Route path={path.ShoppingCart.href} element={<PageShoppingCart />} />
              <Route path={path.LogIn.href} element={<PageLogIn theme={theme} />} />
              <Route path={path.SignUp.href} element={<PageSignUp theme={theme} />} />
              <Route path={path.Account.href} element={<PageAccount theme={theme} />} />
            </Routes>
          </div>
        </div>
      </div>
    </div>
  );
};

export default App;

file Navbar.tsx (truncated version)

const Navbar = ({ isLoggedIn }: Props) => {

  console.log('isLoggedIn', isLoggedIn);
  
  return (
    <div className={`flex flex-row justify-between ${className}`}>
      .
      .
      .
                        <ul className={`absolute top-[39px] right-0 w-[180px] bg-${theme}-colorA border-x border-t border-${theme}-colorB`}>
                          { isLoggedIn ? (
                          <>
                            <a href={path.Account.href}><li className={`border-b p-4 whitespace-nowrap border-${theme}-colorB text-${theme}-colorB hover:text-${theme}-colorC`}>{path.Account.text}</li></a>
                            <a href={path.LogOut.href}><li className={`border-b p-4 whitespace-nowrap border-${theme}-colorB text-${theme}-colorB hover:text-${theme}-colorC`}>{path.LogOut.text}</li></a>
                          </>
                          ) : (
                          <>
                            <a href={path.LogIn.href}><li className={`border-b p-4 whitespace-nowrap border-${theme}-colorB text-${theme}-colorB hover:text-${theme}-colorC`}>{path.LogIn.text}</li></a>
                            <a href={path.SignUp.href}><li className={`border-b p-4 whitespace-nowrap border-${theme}-colorB text-${theme}-colorB hover:text-${theme}-colorC`}>{path.SignUp.text}</li></a>
                          </>
                          )}
                        </ul>
      .
      .
      .
    </div>
  );
};

export default Navbar;