getInitialProps 不会在客户端呈现

Question

我正试图从我的API服务器中获取数据以在我的页面中使用，但我需要SSR用于SEO目的。

所以这里我想要的是:

服务器端渲染:当搜索引擎访问一个页面时。

客户端渲染:当用户浏览不同的页面时。

应该注意的是，我使用next/link作为我所有的链接，像这样:

<Link href="/products/1/slug-goes-here">
<a>Product A</a>
</Link

我已经尝试了以下方法(不是在同一时间)但无论哪种方式，它们只在服务器端请求API服务器，而不会在客户端请求。

注意:回复时间太长了，至少要15秒。

MyPage.getInitialProps = async (context) => {
const data = (await getData({ id: context.query.id })).data;

return { data };
}
// OR
export const getServerSideProps = async (context) => {
const data = (await getData({ id: context.query.id })).data;

return { props: data };
}

Answer 1

我刚刚将next从12.0.4更新为13.1.2，发生的第一件事是内部服务器错误在next/link中使用<a>。

所以我从我的应用程序中的每个<Link>中删除了<a>，现在一切都按预期工作。

应该注意的是，在13.1.2版本中，不需要在<Link>中使用<a>来使链接对搜索引擎可见。