使用 google 电子表格作为 Next.JS 网站源的问题：更改不会更新页面答案

【问题标题】：Problem using google spreadsheet as source for a Next.JS website: changes won't update pages使用 google 电子表格作为 Next.JS 网站源的问题：更改不会更新页面
【发布时间】：2022-01-05 23:10:07
【问题描述】：

我创建了这家餐厅的网站，并使用 Google 电子表格将内容输入菜单页面。选择这种方法是基于简单性和客户专业知识。

我正在使用 google-spreadsheet 包从 Google Drive 上的该文档中获取我需要的所有信息...

//** ../pages/api/cardapios/index.js
import { GoogleSpreadsheet } from "google-spreadsheet";

export default async function getCardapioFromSlug(indexNumber) {
  try {

    const doc = new GoogleSpreadsheet(<%GOOGLE_SPREADSHEET_ID%>)
    
    await doc.useServiceAccountAuth({
      client_email: process.env.GOOGLE_SHEETS_SERVICE_ACCOUNT_EMAIL,
      private_key: process.env.GOOGLE_SHEETS_PRIVATE_KEY,
    });
    
    await doc.loadInfo()
    
    const cardapio = doc.sheetsByIndex[indexNumber]
    
    const rows = await cardapio.getRows()
    
    if (rows.length) {
      return rows.map(({
        Código,
        Produto,
        Unidade,
        Descrição,
        Valor,
        Procedência,
        Categoria
      }) => {
        return {
          Código,
          Produto,
          Unidade,
          Descrição,
          Valor,
          Procedência,
          Categoria
        }
      })
    }
  } catch (err) {
    console.log(err)
  }

  return [];
}

...然后使用getStaticProps() 函数将其输入页面。一旦我正确设置了所有东西，它就像一个魅力。

// ../pages/unidades/[slug].js
export async function getStaticProps({ params }) {
  const sanityData = await getCardapio(params.slug)

  const indexNumber = sanityData[0].id
  // console.log("index number", indexNumber)
  const produtos = await getCardapioFromSlug(indexNumber)
  const produtosStringfied = JSON.stringify(produtos)
  const produtosArray = JSON.parse(produtosStringfied)
  return {
    props: {
      cardapio: {
        info: sanityData[0] || null,
        items: produtosArray || null
      }

    },
    revalidate: 1
  }
}

问题是我们更改了源文档中某些单元格的值后，网站中的内容没有自动更新。

我已尝试重新部署（打开和关闭构建缓存），以便构建过程再次从文档中获取内容并更新站点，但没有成功。一个想法是制作一个 webhook，让客户可以在他的机器上运行一个简单的命令并使用新信息重建页面，但这种方法似乎没用。

我在 Google 电子表格的自定义 webhook 上添加了一些文章 (this one for instance)，但我无法真正理解它会如何触发我的页面上的某些内容。不要真的认为它真的会起作用。

现在我有点纠结应该去哪里。也许我应该重写我的getStaticProps()？

【问题讨论】：

简单选项：1) 获取 cardapio/menu 项目客户端或 2) 使用 getServerSideProps 或 3) 将 cardapio/menu ODF 与 next.js 应用程序一起推送到 Git 并读取此文件而不是 Google Sheet。新的推动导致重建。我们在 Gatsby 应用程序中执行此操作，它与 next.js 应该没有太大区别
继续使用getStaticProps的另一种选择是查看Incremental Static Regeneration，因为它使您能够更新静态页面而无需重建整个应用程序。
@Stefan 第一个选项会导致谷歌 API 上的大量获取实例，这很糟糕。第二个不是一个选项，因为您不能将 getServerSideProps 与 getStaticPaths 一起使用，这对于此页面的工作至关重要。第三个想法，似乎是一个很好的尝试。但是这背后的整个想法是保持源文件可供客户端访问，客户端不想处理推送或不同的工具。也许他可以 ping 我，我每次都下载它，更新 ODF 并将其推送到 github。还不确定。感谢您的意见
@juliomalves 我想这就是我想要在这里实现的目标。也许我做错了。 revalidate 在我带来的这个示例中等于 1，但它设置为 10（秒），因此新请求会强制更新这些页面上的数据，但它不是这样工作的。

标签： javascript reactjs next.js google-sheets-api

【解决方案1】：

问题与代码本身无关，而是 API 的滥用。电子表格中的 id 是错误的，仍然使用一个原型，该原型被用作客户最后一个原型的基础。更改了环境变量，一切正常。

必须通过 vercel cli 强制部署忽略构建缓存。感谢任何花时间评论和想知道这个问题的人。

【讨论】：