reactjs - NextJs 动态开放图元标记不为 facebook 调试器呈现

Question

我尝试使用 NextJs、react-helmet 和 next-seo 包的基本“Head”功能来包含元标记。它们在客户端都运行良好，并在检查工具中显示元标记。但是当我尝试使用 facebook 调试器工具或任何其他开放图形标签检测器检测它时，它不起作用。

可能与元标记的服务器端呈现有关，但我没有找到足够的 Material 来在 NextJs 框架中实现服务器端元标记。

Answer 1

你在使用 Redux Persist 吗？

因为 Redux Persist 存在一个禁用 SSR 的已知问题。禁用 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>
        );