Link组件导航不知道为啥不刷新视图

java668 commented 3 months ago

Link组件导航不知道为啥不刷新视图，查询数据使用 noStore(); 清除缓存了，点击 dashboard 有时候不刷新视图

import { unstable_noStore as noStore } from 'next/cache';
export async function fetchRevenue() {
  // Add noStore() here to prevent the response from being cached.
  noStore();
  // This is equivalent to in fetch(..., {cache: 'no-store'}).

  try {
    // Artificially delay a response for demo purposes.
    // Don't do this in production :)

    console.log('Fetching revenue data...');
    await new Promise((resolve) => setTimeout(resolve, 3000));

    const data = await sql<Revenue>`SELECT * FROM revenue`;

    console.log('Data fetch completed after 3 seconds.');

    return data.rows;
  } catch (error) {
    console.error('Database Error:', error);
    throw new Error('Failed to fetch revenue data.');
  }
}

cgfeel commented 3 months ago

刷新本地视图 https://github.com/cgfeel/next.v2/blob/master/docs/navigation.md

刷新本地路由有以下方法：

用 a 标签代替 link：

<Link href="/test">test</Link>

// 换成

<a href="/test">test</a>

缺点：页面有个加载抖动过程

用 hash：

<Link href={`/test?${Date.now()}`}>test</Link>

缺点：有个 hash 小尾巴

用 Router.refresh：

useEffect(() => {
    router.refresh();
}, [router]);

用 reset 刷新 error.tsx：

'use client' // Error components must be Client Components

import { useEffect } from 'react'

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  useEffect(() => {
    // Log the error to an error reporting service
    console.error(error)
  }, [error])

  return (
    <div>
      <h2>Something went wrong!</h2>
      <button
        onClick={
          // Attempt to recover by trying to re-render the segment
          () => reset()
        }
      >
        Try again
      </button>
    </div>
  )
}

缺点：只能用于 error.tsx

直接把 RSC 通过 server action 返回：

'use server'

function action() {
    return (<div>this form server action { Data.now() }</div>);
}

客户端

'use client'

const Com = () => {
    useEffect(() => {
        action().then(info => {  })
    }, []);
};

cgfeel commented 3 months ago

以上 5 个方法满足你在不同场景，不同页面刷新本地视图请求。NextJS 分服务器视图和本地视图，首次访问之后全部按照 Spa 规则来：

要么刷新浏览器，要么刷新路由
除此之外还提供一套额外的方法，在服务端把组件渲染完毕，直接通过 server action 返回

以上方法都需要在服务端视图更新的前提先：

页面导出 dynamic

验证服务端视图也很简单，每次手动复制粘贴打开网页查看数据是否更新

java668 commented 3 months ago

大佬你微信多少加你沟通学习一下

cgfeel / next.v2

Link组件导航不知道为啥不刷新视图 #2