根据mongodb数据库的变化更新下一个JS页面中的数据，无需刷新页面

Question

所以我基本上是从我的 NextJS 站点与 mongodb 数据库进行交互并显示其中的数据。我正在实现 CRUD 功能，以便可以添加新内容并从网站中删除现有内容。但是，更新仅在刷新页面后才会显示。我希望它在完成后立即显示。

我省略了无用的代码，但基本上这里是其中一页的相关代码。

首先我使用 getStaticProps 从数据库获取数据

export async function getStaticProps() {
  try {
    const client = await clientPromise;
    const db = await client.db("AdminCredentials");
    const siteAdmins = await db.collection("credentials").find({}).toArray();
    return {
      props: {
        siteAdmins: JSON.parse(JSON.stringify(siteAdmins)),
      },
    };
  } catch (e) {
    console.log(e);
    throw new Error(e);
  }
}

然后我将其渲染成这样。我正在使用 Chakra UI。

const Admins = ({ siteAdmins }) => {
  
  const removeAdmin = async (userName) => {
    const res = await fetch("/api/removeAdmin", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ userName: userName }),
    }).then((data) => {
      return data.json();
    });
    console.log(res);
    const revalidate = await fetch("/api/revalidate").then((data) => {
      return data.json();
    });
    console.log(revalidate);
  };
  return (
        <div>
          <SimpleSidebar>
            <TableContainer>
              <Table variant="simple">
                <Thead>
                  <Tr>
                    <Th>Username</Th>
                    <Th>Level of access</Th>
                    <Th>Action</Th>
                  </Tr>
                </Thead>
                <Tbody>
                  {siteAdmins.map((admin, id) => (
                    <Tr key={id}>
                      <Td>{admin.userName}</Td>
                      <Td>{admin.accountType}</Td>
                      
                        <Td>
                          <Button
                            mx="2px"
                            bg="red.500"
                            _hover={{ bg: "red.600" }}
                            onClick={() => removeAdmin(admin.userName)}
                          >
                            Remove
                          </Button>
                        </Td>
                      
                    </Tr>
                  ))}
                </Tbody>
              </Table>
            </TableContainer>
          </SimpleSidebar>
        </div>   
  );
};

这是“/api/revalidate”中的代码

export default async function handler(req, res) {
  try {
    await res.revalidate("/admins");
    return res.json({ revalidated: true });
  } catch (err) {
    res.status(500).json({ revalidated: false });
  }
}

据我的理解，我假设调用重新验证端点会在 mongodb 中更新网站内容时自动更新网站上的内容，遵循本文档https://nextjs.org/docs/basic-features/data-获取/增量静态再生#using-on-demand-revalidation 。但这种情况并没有发生，您必须手动刷新站点才能看到更改。我希望一旦按下“删除”按钮，更改就会反映在网站上。我该怎么做？

Answer 1

我认为主要问题是您使用的是

getStaticProps

而不是

getInitialProps

或

getServerSideProps

。然后根据您的需要更改重新验证规则。

使用 getStaticProps，next.js 将在构建过程中生成静态页面。