阅读这篇文章让我感到烦恼。

问题1：如果使用最新的Next版本出现以下错误，则会产生不满的情况。

在page.js中，基本上是在服务器端运行的，如果想实现动态变化，可以在代码中加入”use client”，这样就可以成功运行。

下一版本必须是13.4系列，否则不行。

TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11372:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  cause: Error: connect ECONNREFUSED ::1:3000
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1555:16)
      at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
    errno: -4078,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '::1',
    port: 3000
  }
}

Error occurred prerendering page "/posts". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11372:11)

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@heroicons/react": "^2.0.18",
    "@hookform/resolvers": "^3.3.2",
    "@prisma/client": "^5.5.2",
    "@supabase/auth-helpers-nextjs": "^0.7.4",
    "@types/node": "20.2.5",
    "@types/react": "18.2.7",
    "@types/react-dom": "18.2.4",
    "@types/uuid": "^9.0.1",
    "autoprefixer": "10.4.14",
    "bootstrap": "^5.3.2",
    "encoding": "^0.1.13",
    "eslint": "8.41.0",
    "eslint-config-next": "13.4.4",
    "mysql2": "^3.6.2",
    "navigation": "^6.2.0",
    "postcss": "8.4.23",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.47.0",
    "react-toastify": "^9.1.3",
    "supabase": "^1.106.1",
    "tailwindcss": "3.3.2",
    "typescript": "5.0.4",
    "uuid": "^9.0.0",
    "zod": "^3.22.4",
    "zustand": "^4.4.4",
    "next": "13.4.4"
  },
  "devDependencies": {
    "prisma": "^5.5.2"
  }
}

如果数据没有被更新，则会出现问题。

由于从缓存中读取数据，所以请不要从缓存中获取如下所示的数据。

方案一

const response = await fetch("http://localhost:3000/api/posts", {
    cache: "no-store",
  });

对策2

进行超级重新加载

control＋shift＋R

除此之外，根据开发需求，还有其他操作，例如在next配置中进行设置或者检查浏览器缓存等进行相应的处理。