小编Dam*_*ski的帖子

我试图理解为什么 Next.js 将我的一些页面构建为 SSG 而其中一些页面构建为静态，当它们都使用 getStaticProps 时。

让我们以我的 404 页面为例，该页面使用 getStaticProps 从带有 graphql 的棱镜中获取数据。它被呈现为静态网站，而我认为它应该呈现为 SSG（因为它使用 getStaticProps）。

我在我的 500 页中做完全相同的事情，但是使用不同的 graphql 查询并且它被呈现（在我看来是正确的）作为 SSG。

这是为什么？

404页面：

const NotFound = ({ data: { page } }) => {
    return (
        <div className={'not-found'}>
            <p className={'not-found__description'}>{RichText.asText(page.description)}</p>
        </div>
    );
};

export const getStaticProps = async (context) => {
    const currentLanguage = getCurrentLocale(context);

    const response = await apolloClient.query({
        query: gql`
            query {
            }
        `
    };

    return {
        props: {
            data: {
                page: response
            }
        }
    }
}); …

我在 Next.js 应用程序中使用 react-tooltip 库。

我注意到每次我在访问使用工具提示的页面时刷新网站时都会收到错误消息：

react-dom.development.js:88 Warning: Prop `dangerouslySetInnerHTML` did not match.

CSS 类在客户端和服务器上是不同的

奇怪的是，从随机页面导航到使用 react-tooltip 的页面时，我没有收到该错误。

工具提示相关代码：

<StyledPopularityTooltipIcon src="/icons/tooltip.svg" alt="question mark" data-tip="hello world" />
<ReactTooltip
    effect="solid"
    className="tooltip"
    backgroundColor="#F0F0F0"
    arrowColor="#F0F0F0"
    clickable={true}
/>