nextjs - useState 和 useRef 导致意外结果

Question

我是学习 Nextjs 的初学者，现在我正在开发一个小项目，涉及登录和导航栏。我希望下面的代码能说明一切。一开始，我想通过从本地后端获取数据来获取用户令牌，然后将其存储在 localStorage 中，一切正常。我得到了我需要的东西，并为组件创建了几个帮助程序以从 localStorage 获取令牌。按照教程我可以直接读取令牌并将其用于条件渲染，如下所示：

import { readToken, removeToken } from '@/lib/authenticate';
...
const token = readToken();
// readtoken will return something like 
{iat: 1690891359, userName: "test1", _id: "64c0320797629f3ad3a9acde"}
...
return (
    <Navbar ...
        {token ? 
                ....<>Logout</>....
            : ....<>Login</>
        }
    </Navbar>
)

但问题是，服务器端没有localStorage，所以服务器端会渲染Logout部分，而客户端会渲染Login部分。 参考（来自材料）：

<Navbar.Collapse id="basic-navbar-nav">
     <Nav className="me-auto">
         <Link href="/" passHref legacyBehavior >               
            <Nav.Link>Home</Nav.Link>
        </Link>
         {token && <Link href="/vehicles" passHref legacyBehavior><Nav.Link>Vehicles</Nav.Link></Link>}
 </Nav>
 <Nav className="ml-auto">
     {!token && <Link href="/login" passHref legacyBehavior><Nav.Link>Login</Nav.Link></Link>}
     {token && <Nav.Link onClick={logout}>Logout</Nav.Link>}
 </Nav>

找到解决方案后，我将令牌移至状态，而不是直接检索它。

    const [ token, setToken ] = useState(null)
    useEffect(() => {
        const token = readToken();
        setToken(token)
    }, [])

唯一的问题是它不会触发渲染，在刷新整个页面（又名 F5）后，我找到了所需的导航栏。 而且，我将其更改为 useRef 而不是 useState，令人惊讶的是，它运行良好，每次登录和注销时，导航栏都会相应更改。

    let token = useRef(null);

    useEffect(() => {
        token.current = readToken();
    })

我的问题是：

1. 据我所知，重新渲染是由任何状态更改触发的，但我确实通过setState将状态从null更改为某个令牌，我不明白为什么它不重新渲染。
   
2. 其次，我记得，useRef只会影响ref本身，与状态无关，我不明白为什么导航栏会相应改变。 任何帮助将不胜感激。如果需要，我可以将所有代码粘贴到此处。

我尝试记录所有内容，但我对这个问题没有任何想法。我希望 useEffect（又名 componentDidmount）中的 useState 将获取令牌、状态更改，并且导航栏会相应显示。