NextJs 动态打开图形元标记不为 facebook 调试器呈现答案

【问题标题】：NextJs dynamic open graph meta tags not rendering for facebook debuggerNextJs 动态打开图形元标记不为 facebook 调试器呈现
【发布时间】：2020-09-14 09:18:19
【问题描述】：

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

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

【问题讨论】：

遇到了同样的问题。快把我逼疯。我可以告诉你的是，同样的代码，next exported 和 surge.sh 的静态服务是有效的。因此，Vercel 似乎有问题。我意识到的一件事是 Vercel 使用 Brotli 压缩而不是 Gzip（按照 Facebook 指南的要求）。
刚刚找到了解决方法：stackoverflow.com/a/62404156/12968082 这里

标签： reactjs next.js meta-tags share-open-graph

【解决方案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>
        );

【讨论】：