Question

如标题中所述，ssr提供的meta标签不是动态的/正确的。

因此，在这个项目中，我正在研究具有动态变化的meta标签（用于SEO）。我知道当今的抓取工具还可以对客户端代码进行索引，但是为了实现更快的索引编制和良好实践，并且由于我想知道其工作原理，因此我仍然想这样做。

头盔元标记在客户端已更新为正确的标记，但是在ssr上，发送的元标记是来自应用程序组件的通用标记，而不是来自内部嵌套组件的通用标记。

server.jsx中的代码段

export default function serverRenderer() {
  return async (req, res) => {
    const client = new ApolloClient({
      ssrMode: true,
      link: createHttpLink({
        uri: urljoin(CONFIG.apiURL, 'graphql'),
        credentials: 'same-origin',
        headers: {
          cookie: req.header('Cookie'),
        }
      }),
      cache: new InMemoryCache(),
      fetch: isomorphic,
    })
    const context = {}
    const browserLanguage = 'en'
    const sheet = new ServerStyleSheet()
    const ComponentTree = () => (
      <ApolloProvider client={client}>
        <IntlProvider locale={languageSelected} messages={bob}>
          <StaticRouter location={req.url} context={context}>
            <ThemeProvider theme={theme}>
              <App auth={auth} lang={browserLanguage} />
            </ThemeProvider>
          </StaticRouter>
        </IntlProvider>
      </ApolloProvider>
    )
    try {
      await getDataFromTree(<ComponentTree />)
    } catch (e) {
      console.log(e)
    }
    const initialState = client.extract() // initalState
    const markup = renderToString(sheet.collectStyles(<ComponentTree />))
    const styles = sheet.getStyleTags()
    const helmet = Helmet.renderStatic()
    res.send(Template({ markup, styles, helmet, initialState }))
  }
}

在App组件中，有通用的meta标签+标头-main（routes / views）+ footer，并且在嵌套视图中显示，就像我说过meta标签确实在客户端而不是在服务器端更新，而根据我在询问时一直在阅读和听到的内容，它应该可以正常工作。

我尝试实现react-helmet-async，但似乎并没有使我更进一步+从文档中阅读的内容，react-helmet确实支持子组件覆盖与父组件同名的头盔meta标签。

请帮助并度过美好的一天！

SSR中不会覆盖头盔元标记

0 个答案: