Estoy tratando de averiguar por qué cuando hago clic en el botón Atrás del navegador o me configuro un botón con un enrutador. Atrás, ¿la URL se actualiza pero no el contenido? Cuando actualizo la página, el contenido se actualiza y la consola imprime un error
el error :
Error: error de reacción minimizado #418; visite https://reactjs.org/docs/error-decoder.html?invariant=418 para ver el mensaje completo o use el entorno de desarrollo no minificado para ver errores completos y advertencias útiles adicionales.
La hidratación falló porque la interfaz de usuario inicial no coincide con lo que se representó en el servidor.
Trabajo con un iniciador strapi nextjs y apenas toco el 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] }Este es mi index.js por si acaso
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 HomePagegetStaticProps solo se llamará en el momento de la compilación, si desea obtener los productos dinámicamente en tiempo de ejecución, debe usar getServerSideProps
Más lecturas sobre la obtención de datos de next.js: https://nextjs.org/docs/basic-features/data-fetching/overview