Next.js Link 不强制组件渲染，serverSideProps 不更新

Question

所以我遇到了 next.js 的问题，当我的用户试图通过导航栏中的 Link 从一个配置文件转到另一个配置文件时：

<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。希望能尽快修复。

Next.js Link 不强制组件渲染，serverSideProps 不更新

Next.js Link doesn't enforce component render, serverSideProps doesn't get updated

javascript

reactjs

server-side-rendering

next.js