Next.js 鏈接不強制組件渲染，serverSideProps 不更新

Question

所以我對 next.js 有這個問題，當我的用戶嘗試通過導航欄中的鏈接從一個配置文件到另一個配置文件 go 時：

<li>
      <Link href={`/profile/${user.user.id}`}>
             <a className="flex flex-row items-center">
                 <BiUserCircle />
                 <span className="ml-1">Profile</span>
             </a>
      </Link>
</li>

Next 似乎沒有重新渲染配置文件組件，這是不幸的，因為我在 getServerSideProps 中提取初始配置文件數據，這會導致奇怪的行為，例如從上次訪問的配置文件中保存初始 useState 數據時。 如何確保每次用戶訪問個人資料頁面時都會將全新的初始數據發送到 useState？

我的個人資料頁面如下所示：

const Profile = ({ initialProfile, posts }) => {
    const router = useRouter();
    const [profile, setProfile] = useState(initialProfile);
    const { userId } = router.query;
    const dispatch = useDispatch();

    useEffect(() => {
        // This is my current solution, however it feels really hacky
        fetchProfile();
    }, [userId]);

    const fetchProfile = async () => {
        const resp = await axios.get(apiURL + `accounts/users/${userId}`);
        setProfile((prof) => ({ ...prof, ...resp.data }));
    };

    return (
        <Layout>
            <ProfileSummary
                isUser={isUser}
                isFollowed={isFollowed}
                handleFollow={handleFollow}
                profile={profile}
            />
            {isUser ? (
                <div className="flex justify-center">
                    <Button colorScheme="green">Add post</Button>
                </div>
            ) : null}
            <div className="w-full flex justify-center flex-col items-center pl-2 pr-2">
                {posts
                    ? posts.map((post) => (
                          <Card
                              key={post.id}
                              author={post.author}
                              likes={post.likes}
                              desc={post.description}
                              img={post.image}
                              isLiked={post.is_liked}
                              postId={post.id}
                              comments={post.comments}
                          />
                      ))
                    : "No Posts found"}
            </div>
        </Layout>
    );
};

export async function getServerSideProps(context) {
    const { userId } = context.query;

    const profileResp = await axios.get(apiURL + `accounts/users/${userId}`);
    const postsResp = await axios.get(
        apiURL + `posts/?author__id=${profile.id}`
    );

    const profile = profileResp.data;
    const posts = postsResp.data;

    return {
        props: {
            initialProfile: profile,
            posts,
        },
    };
}

export default Profile;

我真的很想得到任何幫助，也許我應該改變我的整體方法？

整個項目可以在這里找到： https://github.com/MaciejWiatr/Nextagram/tree/develop

Answer 1

不用擔心這是一個已知錯誤，您可以在此處閱讀更多信息https://github.com/vercel/next.js/issues/10400 。 希望它會很快得到修復。