Nextjs，點擊返回時，url 更新但內容不更新

Question

我想弄清楚為什么當我單擊瀏覽器的后退按鈕或為自己設置一個帶有 router.back 的按鈕時，url 正在更新但內容沒有更新？ 當我刷新頁面時，內容已更新，但控制台打印錯誤

錯誤：

錯誤：縮小 React 錯誤 #418； 訪問https://reactjs.org/docs/error-decoder.html?invariant=418獲取完整消息或使用非縮小開發環境獲取完整錯誤和其他有用的警告。

Hydration 失敗，因為初始 UI 與服務器上呈現的內容不匹配。

我使用 strapi nextjs 啟動器，幾乎沒有接觸 api.js

export function getStrapiURL(path) {
  return `${
    process.env.NEXT_PUBLIC_STRAPI_API_URL || "http://localhost:1337"
  }${path}`
}

// Helper to make GET requests to Strapi
export async function fetchAPI(path) {
  const requestUrl = getStrapiURL(path)
  const response = await fetch(requestUrl)
  const data = await response.json()
  return data
}

export async function getCategories() {
  const categories = await fetchAPI("/categories")
  return categories
}

export async function getCategory(slug) {
  const categories = await fetchAPI(`/categories?slug=${slug}`)
  return categories?.[0]
}

export async function getProducts() {
  const products = await fetchAPI("/products")
  return products
}

export async function getProduct(slug) {
  const products = await fetchAPI(`/products?slug=${slug}`)
  return products?.[0]
}

export async function getLibrairies() {
  const librairies = await fetchAPI("/librairies")
  return librairies
}

export async function getLibrairie(slug) {
  const librairies = await fetchAPI(`/librairies?slug=${slug}`)
  return librairies?.[0]
}

這是我的 index.js 以防萬一

import React from "react"
import Head from "next/head"
import { getProducts } from "../utils/api"
import ProductsList from "../components/ProductsList"

const HomePage = ({ products }) => {
  return (
    <div>
      <Head>
        <title>Classe moyenne éditions</title>
        <meta
          name="description"
          content="Welcome to the website of Classe moyenne édditions, art books French publishing house"
        />
      </Head>
      <ProductsList products={products} />
    </div>
  )
}

export async function getStaticProps() {
  const products = await getProducts()
  return { props: { products }, revalidate: 1 }
}

export default HomePage

Answer 1

getStaticProps只會在構建時調用，如果你想在運行時動態獲取產品，你應該使用getServerSideProps

更多閱讀next.js數據抓取： https://nextjs.org/docs/basic-features/data-fetching/overview

Nextjs，點擊返回時，url 更新但內容不更新

問題描述

1 個解決方案

解決方案1
2 2022-03-31 22:34:42

Nextjs，點擊返回時，url 更新但內容不更新

問題描述

1 個解決方案

解決方案1 2 2022-03-31 22:34:42

解決方案1
2 2022-03-31 22:34:42