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

Question

so i have this issue with next.js, When my user tries to go from one profile to another via Link in navbar:

<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 doesn't seem to re-render the profile component which is unfortunate because I'm pulling initial profile data in getServerSideProps which leads to weird behavior like when the initial useState data is saved from last visited profile. How can I ensure that each time user visits the profile page brand new initial data is sent to useState?

My profile page looks like this:

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;

I'd really love any help, maybe I should change my overall approach?

The whole project can be found here: https://github.com/MaciejWiatr/Nextagram/tree/develop

Answer 1

Dont worry this is an known bug, you can read more about it here https://github.com/vercel/next.js/issues/10400 . Hopefully it will be fixed soon.