Next JS - 源代码中缺少元标记答案

【问题标题】：Next JS - Meta Tags Missing in Source CodeNext JS - 源代码中缺少元标记
【发布时间】：2020-10-05 10:09:05
【问题描述】：

我已经安装了多个元标签，例如标题、描述、关键字等。

但是它没有在视图源中显示这些标签。因此 Facebook 共享卡不起作用（我已经安装了 og 标签，但在 Facebook 的 Scraper 或我的视图源中似乎找不到它们。但是它填充在客户端幻灯片上。

我的头部格式（在 Client Inspect / DevTools 中显示标签，但不在查看源代码中）：

import Head from 'next/head';

export default () => (
  <>
    <Head>
      <meta property="og:title" content={title} />
      <meta property="og:url" content={url} />
    </Head>
    <Header />
    <Body />
    <Footer />
  </>
)

输出（编辑的页面道具）：


<!DOCTYPE html><html><head><style data-next-hide-fouc="true">body{display:none}</style><noscript data-next-hide-fouc="true"><style>body{display:block}</style></noscript><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="/_next/static/development/pages/_app.js?ts=1592258092029" as="script"/><link rel="preload" href="/_next/static/development/pages/Home.js?ts=1592258092029" as="script"/><link rel="preload" href="/_next/static/runtime/webpack.js?ts=1592258092029" as="script"/><link rel="preload" href="/_next/static/runtime/main.js?ts=1592258092029" as="script"/><noscript id="__next_css__DO_NOT_USE__"></noscript></head><body><div id="__next"></div><script src="/_next/static/runtime/react-refresh.js?ts=1592258092029"></script><script src="/_next/static/development/dll/dll_f9de5cbc314a1e41f91e.js?ts=1592258092029"></script><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps": "page":"/Home","query":{},"buildId":"development","isFallback":false,"gssp":true}</script><script nomodule="" src="/_next/static/runtime/polyfills.js?ts=1592258092029"></script><script async="" data-next-page="/_app" src="/_next/static/development/pages/_app.js?ts=1592258092029"></script><script async="" data-next-page="/Home" src="/_next/static/development/pages/Home.js?ts=1592258092029"></script><script src="/_next/static/runtime/webpack.js?ts=1592258092029" async=""></script><script src="/_next/static/runtime/main.js?ts=1592258092029" async=""></script><script src="/_next/static/development/_buildManifest.js?ts=1592258092029" async=""></script><script src="/_next/static/development/_ssgManifest.js?ts=1592258092029" async=""></script></body></html>

【问题讨论】：

从你的代码 sn-p 中，你没有从 props 传递 title 和 url，你可能错过了这里但不是在真正的代码中。
@Hangindev 是的，我已将它们全部包含在真实代码中。然而，Facebook 的报废并没有真正奏效
问题中的输出是在开发过程中捕获的？生产中的产量如何？
@Hangindev 生产中的输出也大致相同。
如果您可以使用CodeSandbox's Next.js Template 生成一个最小的、可重现的示例，将会很有帮助。

标签： reactjs next.js server-side-rendering meta-tags

【解决方案1】：

问题似乎来自禁用 SSR 的 Redux Persist。禁用 PersistGate 服务器端似乎可以解决问题。

Github Issue Link

return process.browser ? (
        <PersistGate persistor={store.__persistor} loading={<div>Loading</div>}>
            <ToastProvider>
                <Component {...pageProps} />
            </ToastProvider>
        </PersistGate>
    ) : (
            <Provider store={store}>
                <ToastProvider>
                    <Component {...pageProps} />
                </ToastProvider>
            </Provider>
        );

【讨论】：

这解决了我的问题！