«Не найденный» реквизит getStaticProps не влияет на код состояния http страницы

#javascript #next.js #static-site-generation

#javascript #next.js #статическое создание сайта

Вопрос:

Я только что установил новый Next.js приложение. Он имеет следующую страницу:

 // /pages/articles/[slug].js

import React from 'react'
import { useRouter } from 'next/router'
import ErrorPage from 'next/error'

const Article = (props) => {
  const router = useRouter()
  if (router.isFallback) {
    return <div>Loading..</div>
  }
  if (!props['data']) {
    return <ErrorPage statusCode={404} />
  }
  return (
    <div>
      Article content
    </div>
  )
}

export default Article

export const getStaticProps = async(context) => {
  const slug = context.params.slug
  const res = ["a", "b", "c"].includes(slug)
    ? {
      props: {
        data: slug
      }
    }
    : {
      props: {},
      notFound: true
    }
  return res
}

export const getStaticPaths = async () =>  {
  return {
    paths: [
      { params: { slug: "a" }},
      { params: { slug: "b" }},
      { params: { slug: "c" }}
    ],
    fallback: true
  }
}

 

Когда браузер переходит на несуществующую страницу (например http://localhost:3000/articles/d ) затем он возвращает страницу nextjs 404 по умолчанию, как и ожидалось.

Но на вкладке сети браузера отображается статус 200 для основного документа (страница ошибки 404). Единственными объектами на вкладке network со статусом 404 являются d.json и 404.js .

Я думаю, что основной документ также должен иметь статус 404. В документах getStaticProps говорится о возвращаемом значении:

  • NotFound — необязательное логическое значение, позволяющее странице возвращать статус 404 и страницу

Но в этом случае статус страницы равен 200, а не 404. Нужно ли что-то еще сделать, чтобы вернуть статус 404?

Без резервного копирования статус равен 404.

Ответ №1:


Для этого конкретного варианта использования вы должны использовать fallback: 'blocking' вместо этого.

 export const getStaticPaths = async () =>  {
  return {
    paths: [
      { params: { slug: "a" }},
      { params: { slug: "b" }},
      { params: { slug: "c" }}
    ],
    fallback: 'blocking'
  }
}
 

В отличие fallback: true от этого, он не будет обслуживать «резервную» версию, если страница еще не была сгенерирована. Вот почему вы получаете код 200 состояния в данный момент.

Вместо fallback: 'blocking' этого будет ждать создания HTML-кода перед рендерингом страницы — аналогично тому, что происходит во время рендеринга на стороне сервера. Это означает, что if notFound: true is возвращается от getStaticProps вас, вы получите правильный 404 код состояния для запроса страницы.