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
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