1

I'm trying to figure out why when I click to the browser's back button or setting myself a button with a router.back, the url is updating but not the content? When I refresh the page, the content is updated et the console prints an error

the error :

Error: Minified React error #418; visit https://reactjs.org/docs/error-decoder.html?invariant=418 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Hydration failed because the initial UI does not match what was rendered on the server.

I work with a strapi nextjs starter and barely touch the 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]
}

This is my index.js juste in case

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
Rom-888
  • 681
  • 2
  • 9
  • 30

1 Answers1

2

getStaticProps will only be called at build time, if you want to fetch the products dynamically at runtime, you should use getServerSideProps

More readings on next.js data fetching: https://nextjs.org/docs/basic-features/data-fetching/overview

MarkoCen
  • 2,189
  • 13
  • 24