如何在 Next.js 中持久化存储数据？

Question

我无法持久存储数据。

我的情况是当用户登录时，我将 JWT 存储在网络存储中。但是，我需要存储用户的信息，例如用户昵称或id。

我正在尝试在

<header />

中呈现用户昵称。

我尝试了三种不同的方法。

第一个是使用

recoil

，全局状态库。它并不顺利，因为每当我刷新页面时，每个原子都回到它们的初始值。

第二个是使用

recoil-persist

。我在

React

中使用了recoil-persist或者redux-persist。但是，由于 recoil-persist 是基于 localStorage 工作的，所以我在 Next.js 上的水合作用遇到了问题。 （SSR中不存在localStorage，因此会出现hydration错误。）

我目前使用的最后一个是

recoil

和

localStorage

。这是代码。

import { useRecoilValue } from 'recoil';
import { userNicknameAtom } from 'atoms/atom';
import { useEffect, useState } from 'react';
import styles from './header.module.scss';

function Header() {
  const [nick, setNick] = useState('');
  const user = useRecoilValue(userNicknameAtom);

  useEffect(() => {
    if (user) {
      localStorage.setItem('nickname', user);
    }
  });

  useEffect(() => {
    const id = localStorage.getItem('nickname');

    if (id) {
      setNick(id);
    } else {
      setNick('');
    }
  });

  return (
    <header className={styles.header}>
      {nick}
    </header>
  );
}

export default Header;

我不依赖于

useEffect

以确保

useEffect

中的代码运行每个渲染。这很好用。

但是，我想知道这是否是在 Next.js 中处理用户信息的最佳方法 如果我可以简单地修改我的代码，我想知道。

Answer 1

在真实的应用程序情况下，您会有一个后端返回您的用户数据（自动基于通常保存为 cookie 的令牌）。因此，每次您的应用程序初始化时，您都会发出请求以获取您的用户数据并将其存储在您的状态管理（redux、recoil 等）中。

但是在您的情况下，您要确保每次用户更改时都更新

localStorage

（我认为您没有其他情况要更新localStorage）。所以你的第一个 useEffect 应该在依赖数组中有

user

值，如下所示：

  useEffect(() => {
    if (user) {
      localStorage.setItem('nickname', user);
    }
  }, [user]);

如果

user

值没有改变，用相同的值更新它是没有意义的。

此外，我认为如果将状态设置添加到第一个 useEffect，则不需要第二个 useEffect（因此最后只使用一个 useEffect，如下所示：

  useEffect(() => {
    if (user) {
      localStorage.setItem('nickname', user);
      setNick(user);
    }
  }, [user]);
  

)

Answer 2

让 Next.js 中的 localStorage 持久化是非常令人沮丧的，但它是可能的，我认为这是一个链接，可以帮助那些想要存储一些用户首选项和设置的人，因为它有一个完整的数据库。 如何在 Next.js 中使用 localStorage 且不使用库来持久化数据。