如何让Gatsby自定义404页面正确返回404状态码

Gatsby自定义404默认返回200状态码是静态站点生成框架的典型表现：构建生成的404页面本身是真实存在的HTML文件，静态服务默认会为存在的文件返回200状态码，可根据站点实际部署方式选择对应方案解决：

静态托管场景（绝大多数生产环境适用） #

如果站点是将gatsby build输出的public目录直接部署到Nginx、对象存储、CDN等静态服务上，HTTP状态码由托管层返回，前端代码无法修改响应头，直接在托管侧配置规则即可：

• 核心规则：所有无法匹配到真实存在文件的请求，直接返回404状态码，响应内容使用自定义404页面的内容，不要配置成3xx重定向跳转到404页面（重定向会返回3xx状态码，不符合SEO要求）
• Nginx配置参考，在站点对应的server块中添加如下规则：

error_page 404 /404.html;
location = /404.html {
  internal;
}

• 如果使用云服务商的对象存储、CDN服务，直接在控制台的错误页配置项中，将404错误的响应页指定为站点根路径下的404.html，同时确认规则返回的状态码为404即可。

Node服务端运行场景 #

如果站点通过Gatsby服务端渲染能力、自定义Node服务启动运行，可直接在框架层配置响应状态码：

1. 确认项目存在src/pages/404.js自定义404页面组件，Gatsby构建时会自动将所有未匹配的路由指向该页面
2. 在项目根目录的gatsby-ssr.js文件中添加以下代码，服务端渲染404页面时主动设置响应状态码：

exports.onRenderBody = ({ setServerResponse, pathname }) => {
  if (pathname === '/404/') {
    setServerResponse({ statusCode: 404 });
  }
};

3. 如果使用gatsby serve命令预览生产构建产物，2.17.11版本已原生支持404页面自动返回404状态码，只要没有配置客户端重定向规则即可正常生效。

注意：不要使用客户端JS跳转的方式实现404路由，这种模式下请求的初始响应始终是200状态码，搜索引擎爬虫不会识别客户端跳转的状态，依然会判定页面为200响应，无法解决SEO问题。

内容的提问来源于stack exchange，提问作者Yurii Kovalchuk