[blog] Fix hydration mistmatch (mui#34857)

oliviertassinari · web-flow · commit e0141b8cccae · 2022-10-29T17:01:46.000+02:00
diff --git a/docs/pages/_document.js b/docs/pages/_document.js
@@ -36,7 +36,7 @@ const GOOGLE_ANALYTICS_ID = PRODUCTION_GA ? 'UA-106598593-2' : 'UA-106598593-3';
 
 export default class MyDocument extends Document {
   render() {
-    const { canonicalAs, userLanguage } = this.props;
+    const { canonicalAsServer, userLanguage } = this.props;
 
     return (
       <Html lang={userLanguage}>
@@ -63,9 +63,11 @@ export default class MyDocument extends Document {
           {/* SEO */}
           <link
             rel="canonical"
-            href={`https://mui.com${userLanguage === 'en' ? '' : `/${userLanguage}`}${canonicalAs}`}
+            href={`https://mui.com${
+              userLanguage === 'en' ? '' : `/${userLanguage}`
+            }${canonicalAsServer}`}
           />
-          <link rel="alternate" href={`https://mui.com${canonicalAs}`} hrefLang="x-default" />
+          <link rel="alternate" href={`https://mui.com${canonicalAsServer}`} hrefLang="x-default" />
           {/*
             Preconnect allows the browser to setup early connections before an HTTP request
             is actually sent to the server.
@@ -233,7 +235,7 @@ MyDocument.getInitialProps = async (ctx) => {
 
     return {
       ...initialProps,
-      canonicalAs: pathnameToLanguage(url).canonicalAs,
+      canonicalAsServer: pathnameToLanguage(url).canonicalAsServer,
       userLanguage: ctx.query.userLanguage || 'en',
       // Styles fragment is rendered after the app and page rendering finish.
       styles: [
diff --git a/docs/src/modules/components/GoogleAnalytics.js b/docs/src/modules/components/GoogleAnalytics.js
@@ -64,8 +64,8 @@ function GoogleAnalytics() {
   React.useEffect(() => {
     // Wait for the title to be updated.
     setTimeout(() => {
-      const { canonicalAs } = pathnameToLanguage(window.location.pathname);
-      window.ga('set', { page: canonicalAs });
+      const { canonicalAsServer } = pathnameToLanguage(window.location.pathname);
+      window.ga('set', { page: canonicalAsServer });
       window.ga('send', { hitType: 'pageview' });
     });
   }, [router.route]);
diff --git a/docs/src/modules/components/TopLayoutBlog.js b/docs/src/modules/components/TopLayoutBlog.js
@@ -215,7 +215,7 @@ function TopLayoutBlog(props) {
   const finalTitle = title || headers.title;
   const router = useRouter();
   const slug = router.pathname.replace(/\/blog\//, '');
-  const { canonicalAs } = pathnameToLanguage(router.asPath);
+  const { canonicalAsServer } = pathnameToLanguage(router.asPath);
   const card =
     headers.card === 'true'
       ? `https://mui.com/static/blog/${slug}/card.png`
@@ -328,7 +328,7 @@ function TopLayoutBlog(props) {
     ]
   },
   "headline": "${finalTitle}",
-  "url": "https://mui.com${canonicalAs}",
+  "url": "https://mui.com${canonicalAsServer}",
   "datePublished": "${headers.date}",
   "dateModified": "${headers.date}",
   "image": {
diff --git a/docs/src/modules/utils/helpers.ts b/docs/src/modules/utils/helpers.ts
@@ -78,6 +78,7 @@ export function getCookie(name: string): string | undefined {
 export function pathnameToLanguage(pathname: string): {
   userLanguage: string;
   canonicalAs: string;
+  canonicalAsServer: string;
   canonicalPathname: string;
 } {
   let userLanguage;
@@ -93,14 +94,15 @@ export function pathnameToLanguage(pathname: string): {
   }
 
   const canonicalAs = userLanguage === 'en' ? pathname : pathname.substring(3);
-  const canonicalPathname = canonicalAs
-    .replace(/^\/api/, '/api-docs')
-    .replace(/#(.*)$/, '')
-    .replace(/\/$/, '');
+  // Remove hash as it's never sent to the server
+  // https://github.com/vercel/next.js/issues/25202
+  const canonicalAsServer = canonicalAs.replace(/#(.*)$/, '');
+  const canonicalPathname = canonicalAsServer.replace(/^\/api/, '/api-docs').replace(/\/$/, '');
 
   return {
     userLanguage,
     canonicalAs,
+    canonicalAsServer,
     canonicalPathname,
   };
 }
