{"action":"created","issue":{"url":"https://api.github.com/repos/i18next/react-i18next/issues/464","repository_url":"https://api.github.com/repos/i18next/react-i18next","labels_url":"https://api.github.com/repos/i18next/react-i18next/issues/464/labels{/name}","comments_url":"https://api.github.com/repos/i18next/react-i18next/issues/464/comments","events_url":"https://api.github.com/repos/i18next/react-i18next/issues/464/events","html_url":"https://github.com/i18next/react-i18next/issues/464","id":337265440,"node_id":"MDU6SXNzdWUzMzcyNjU0NDA=","number":464,"title":"Problems with load metadata from i18n in SRR","user":{"login":"flavioalves","id":155726,"node_id":"MDQ6VXNlcjE1NTcyNg==","avatar_url":"https://avatars3.githubusercontent.com/u/155726?v=4","gravatar_id":"","url":"https://api.github.com/users/flavioalves","html_url":"https://github.com/flavioalves","followers_url":"https://api.github.com/users/flavioalves/followers","following_url":"https://api.github.com/users/flavioalves/following{/other_user}","gists_url":"https://api.github.com/users/flavioalves/gists{/gist_id}","starred_url":"https://api.github.com/users/flavioalves/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/flavioalves/subscriptions","organizations_url":"https://api.github.com/users/flavioalves/orgs","repos_url":"https://api.github.com/users/flavioalves/repos","events_url":"https://api.github.com/users/flavioalves/events{/privacy}","received_events_url":"https://api.github.com/users/flavioalves/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":7,"created_at":"2018-07-01T05:35:41Z","updated_at":"2018-07-17T00:31:33Z","closed_at":null,"author_association":"NONE","body":"## Description\r\n\r\nI'm building a multi-language website using gatsby-plugin-react-helmet, react-helmet, and react-i18next.\r\n\r\nI created the same structure of [this official blog post](https://www.gatsbyjs.org/blog/2017-10-17-building-i18n-with-gatsby/) and I've got the things apparently working well. \r\n\r\nBut, the strange part is that my \"SEO metadata\" isn't been found by SEO analyzers and link previews, as it is supposed to do. \r\n\r\nWhen I check on my browser inspect I can found the meta tags, but seems that it is loaded on the client side and not on SSR.\r\n\r\n### Steps to reproduce\r\nI create a SEO component following the same idea of the [exemple listed here](https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/seo.md).\r\n\r\nMy i18n component (same idea of the post) \r\n```javascript\r\nconst options = {\r\n  fallbackLng   : \"en\",\r\n  whitelist     : [\"en\", \"pt\"],\r\n  ns            : [\"translation\"],\r\n  defaultNS     : \"translation\",\r\n  debug         : false,\r\n  interpolation : {\r\n    escapeValue : false\r\n  },\r\n  react         : {\r\n    wait : true\r\n  }\r\n}\r\n\r\ni18n\r\n  .use(Backend)\r\n  .use(LanguageDetector)\r\n  .use(reactI18nextModule)\r\n  .init(options)\r\n```\r\n\r\nLoading all namespaces before render: \r\n```javascript\r\nexports.replaceRenderer = ({ bodyComponent, replaceBodyHTMLString }) => {\r\n  i18n.loadNamespaces(NAMESPACES, () => {\r\n    replaceBodyHTMLString(bodyComponent)\r\n  })\r\n}\r\n```\r\n\r\nAnd gatsby-plugin-react-helmet should handle the SSR aspects.\r\n\r\nI tested with fixed data (not loaded from a locale file) and it works well.\r\n\r\nDo you guys could help me with this? Any guess?\r\n\r\nThanks in advance!\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/i18next/react-i18next/issues/comments/405421855","html_url":"https://github.com/i18next/react-i18next/issues/464#issuecomment-405421855","issue_url":"https://api.github.com/repos/i18next/react-i18next/issues/464","id":405421855,"node_id":"MDEyOklzc3VlQ29tbWVudDQwNTQyMTg1NQ==","user":{"login":"bfricka","id":689311,"node_id":"MDQ6VXNlcjY4OTMxMQ==","avatar_url":"https://avatars3.githubusercontent.com/u/689311?v=4","gravatar_id":"","url":"https://api.github.com/users/bfricka","html_url":"https://github.com/bfricka","followers_url":"https://api.github.com/users/bfricka/followers","following_url":"https://api.github.com/users/bfricka/following{/other_user}","gists_url":"https://api.github.com/users/bfricka/gists{/gist_id}","starred_url":"https://api.github.com/users/bfricka/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bfricka/subscriptions","organizations_url":"https://api.github.com/users/bfricka/orgs","repos_url":"https://api.github.com/users/bfricka/repos","events_url":"https://api.github.com/users/bfricka/events{/privacy}","received_events_url":"https://api.github.com/users/bfricka/received_events","type":"User","site_admin":false},"created_at":"2018-07-17T00:31:33Z","updated_at":"2018-07-17T00:31:33Z","author_association":"NONE","body":"FYI: I run into the exact same issue (`react-helmet` + `react-i18next`). I'm pre-rendering static pages, then hydrating using [react-snap](https://github.com/stereobooster/react-snap), so this allows me to see the HTML output for everything.\r\n\r\nThe issue was precisely as described here. The whole page renders w/ all the translations, save the `<head/>` content, which just has the keys. I was using a component to simplify the boiler plate, e.g.:\r\n\r\n```tsx\r\nexport interface HeadContentProps {\r\n  pageKey: string\r\n}\r\n\r\nconst HeadContent = ({pageKey}: HeadContentProps) => (\r\n  <I18n>\r\n    {(t) => (\r\n      <Helmet>\r\n        <title>{t(`${pageKey}.head.title`)}</title>\r\n        <meta name=\"description\" content={t(`${pageKey}.head.description`)}/>\r\n      </Helmet>\r\n    )}\r\n  </I18n>\r\n);\r\n```\r\nThus:\r\n```tsx\r\nexport const FooPage = () => (\r\n  <>\r\n    <HeadContent pageKey={'fooKey'} />\r\n    <FooStuff/>\r\n  </>\r\n);\r\n```\r\nI found that just inlining `HeadContent` into `FooPage` fixes this. I have no clue why. I've been using React for fewer than 10 days, so I'm not well-versed on the inner workings. This adds an uncomfortable level of boilerplate, so I'll continue doing some searching tomorrow to see if there's some explanation for the discrepancy."}}
{"actor":{"display_login":"bfricka"}}