Render SeoHead at route level; convert Angular-style {{var}} to ICU {var}

On /ru/onlineboard/SU6272-20260418 the document title was blank and the meta description carried a literal '{{ flightNumber }}' placeholder. Two root causes: 1. Translation values carried Angular ngx-translate syntax {{ var }} but the React app uses i18next-icu (single-brace {var}). Interpolation never fired, so SEO strings served as-is. Rewrite every {{ var }} (and {{var}}) occurrence to {var} across ru/en locales. 2. <SeoHead> was rendered inside the lazy-loaded OnlineBoardDetailsPage. The SSR response streams the Suspense fallback before the lazy bundle resolves, so <title>/<meta> never land in the <head>. Move SeoHead to the route page (src/routes/.../page.tsx) where it renders synchronously from URL-derived data, and drop the inner duplicate. Add buildFlightDetailsSeoFromId for the URL-only path. formatDateForSeo now handles both 'yyyyMMdd' (URL) and 'yyyy-MM-dd' (API) so both entry points produce '18.04.2026'. 3. React 18 doesn't auto-hoist <title> inside body to document.head — add a useEffect in SeoHead that also writes document.title on the client. SSR still emits the <title> element for crawlers.
2026-04-19 01:39:06 +03:00
parent d43bfb3fcb
commit ffb1a8579d
6 changed files with 79 additions and 41 deletions
@@ -1,3 +1,4 @@
+import { useEffect } from "react";
 import type { Language } from "@/i18n/resolver";
 import { JsonLdRenderer } from "@/shared/seo/json-ld.js";
 import type { Thing } from "schema-dts";
@@ -40,6 +41,15 @@ export function SeoHead({
  jsonLd,
  noindex,
 }: SeoHeadProps): JSX.Element {
+  // React 18 doesn't hoist <title> inside body to document.head, so set
+  // document.title imperatively on the client. SSR still emits the
+  // <title> element for crawlers that read the raw HTML.
+  useEffect(() => {
+    if (typeof document !== "undefined" && title) {
+      document.title = title;
+    }
+  }, [title]);
+
  return (
    <>
      <title>{title}</title>