Javascript 如何根据用户是否登录到缓存页面在navbar中显示不同的信息？

我有一个导航栏，根据用户的登录状态显示不同的信息。我使用express作为后端，ejs作为我的视图引擎。我这样做的方式如下：

<nav class="myNav">
<ul>
    <li><a href="/"><h3 class="bold inline">Find Me Food Now!</h3></a></li>
    <li><a href="/coffeeShops">Home</a></li>
    <li><a href="contact.html">Contact</a></li>
    <div class="justify-end">
        <% if(!userID) {%> 
        <li class="inline"><a href="/register">Sign Up</a></li>
        <li class="inline"><a href="/login">Login</a></li>
        <% }else {%>
        <li><form action="/logout" method="POST"><button class="button button--form navFont">Logout</button></form></li>
        <% } %> 
    </div>
</ul>

app.use((req, res, next) => {
    res.locals.userID = req.session.user_id;
    next();
});

这很好用。然而，我最近在我的应用程序中引入了缓存来提高其性能，但一个意想不到的问题是，现在，我的导航栏内容不会根据当前用户是否登录而改变。在第一次访问站点时，会向用户显示正确的内容，但在第一次访问之后，整个页面都会被缓存，包括导航栏中的内容。然后，如果您注销并再次访问该页面，则内容不会更改，因为将显示缓存

一个明显的解决方案是不缓存这个页面，但我确实想缓存它，因为它是一个相当重的页面，有大量的图像，不会太频繁地更改（这使它成为理想的缓存目标），但我不想缓存页面的navbar部分

我已经尝试将导航栏中的所有内容保持不变，并将res.locals.userID传递给链接到该页面的javascript文件，并基于该信息，使用javascript隐藏相关内容。这样，即使navbar被缓存，也没关系，因为所有的内容都会在那里，我可以根据用户的登录状态选择应该显示给他们的内容。但我找不到将res.locals传递到javascript文件的方法。我还尝试将这些信息从服务器端提取到客户端，但同样，我无法使其正常工作。我还试图找到一种只缓存页面某些部分的方法，但找不到有关以下内容的信息：(

有没有在缓存页面上显示动态内容的方法？当然有，但我对web开发还不熟悉，所以如果这是一个愚蠢的问题，我很抱歉