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

【问题标题】：Next.js Link doesn't enforce component render, serverSideProps doesn't get updatedNext.js 链接不强制组件渲染，serverSideProps 不更新
【发布时间】：2020-12-27 01:03:07
【问题描述】：

所以我对 next.js 有这个问题，当我的用户尝试通过导航栏中的链接从一个配置文件转到另一个配置文件时：

<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

【问题讨论】：

使用useEffect观察initialProfile的变化，更新profile应该会有帮助
@tuan.tran 其实我发现这是已知的下一个 js bug，你可以在这里阅读更多信息：github.com/vercel/next.js/issues/10400

标签： javascript reactjs next.js server-side-rendering

【解决方案1】：

不要担心这是一个已知的错误，您可以在此处阅读更多信息 https://github.com/vercel/next.js/issues/10400。希望它会尽快修复。

【讨论】：