nextjs，单击后，URL更新，但没有内容
我试图弄清楚为什么当我单击浏览器的返回按钮或用路由器设置自己的按钮时，url正在更新，而不是内容？ 当我刷新页面时，内容已更新ET ET，控制台将错误打印出
错误：
错误：缩小反应错误＃418;访问 https://reactjs.org/decocs/decoder.html？ 418 完整 消息或使用非限制的开发环境进行完整错误，并且 其他有用的警告。
水合失败，因为初始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 juste
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
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
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
getStaticProps只会在构建时调用，如果您想在运行时动态获取产品，您应该使用getServerSideProps更多关于 next.js 数据获取的阅读：https://nextjs.org/docs/basic-features/data-fetching/overview
getStaticPropswill only be called at build time, if you want to fetch the products dynamically at runtime, you should usegetServerSidePropsMore readings on next.js data fetching: https://nextjs.org/docs/basic-features/data-fetching/overview