用于动态网站元数据的 Gatsby SSR 不起作用答案

【问题标题】：Gatsby SSR for dynamic website metadata not working用于动态网站元数据的 Gatsby SSR 不起作用
【发布时间】：2022-10-06 11:04:57
【问题描述】：

我一直在关注 Gatsby 教程，了解如何在 gatsby 站点 according to this article 中实现 SSR。此链接建议我在我的页面中添加 export async function getServerData() {...} 函数和 serverData 作为道具。本教程建议这样做会导致 Gatsby 对我的站点使用 SSR，并且我将能够在页面加载之前检索任何数据。

但是，情况并非如此，在按照确切的教程进行操作后，我没有得到任何狗的图像，并且我收到一条错误消息，指出 serverData 未定义

我的 SSR 代码如下所示

import * as React from \"react\"

const SSRPage = ({ serverData }) => (
  <main>
    <h1>SSR Page with Dogs</h1>
    <img alt=\"Happy dog\" src={serverData.message} />
  </main>
)

export default SSRPage

export async function getServerData() {
  try {
    const res = await fetch(`https://dog.ceo/api/breeds/image/random`)
    if (!res.ok) {
      throw new Error(`Response failed`)
    }
    return {
      props: await res.json(),
    }
  } catch (error) {
    return {
      status: 500,
      headers: {},
      props: {}
    }
  }
}

我不确定我做错了什么。我试过用gatsby build && gatsby serve 和gatsby serve 运行我的网站，但它似乎不起作用。

您的SSRPage 在哪里？
它在src/pages 目录下

标签： reactjs seo gatsby server-side-rendering

【解决方案1】：

好的，所以如果有人遇到类似问题，我找到了解决方案。基本问题是我使用 Gatsby v3，而 SSR 是在 Gatsby v4 中引入的。

如果有人遇到此问题，请更新到 v4 并重试。

此外，在您的 gatsby-config.js 文件中，确保添加此标志：

module.exports = {
  ...    // your existing config
  flags: {
    DEV_SSR: true,
  },
  ...
}

这将在开发版本中启用 SSR 的日志记录

【讨论】：