website: use <BrowserOnly> to fix SSR mismatch bug

website/src/components/SidebarAd/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import BrowserOnly from '@docusaurus/BrowserOnly';
 import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
 
 import clsx from 'clsx';
@@ -17,7 +18,12 @@ export default React.memo(function SidebarAd() {
   const backgroundClass =
     BACKGROUNDS[Math.floor(Math.random() * BACKGROUNDS.length)];
 
-  return Math.random() > 0.5 ? (
+  // Because the SSR and client output can differ and hydration doesn't patch attribute differences,
+  // we'll render this on the browser only.
+  return (
+    <BrowserOnly>
+      {() =>
+        Math.random() ? (
           <a
             className={clsx(styles.container, backgroundClass)}
             href="https://www.moonchaser.io/?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=website_docs_sidebar"
@@ -28,8 +34,9 @@ export default React.memo(function SidebarAd() {
               window.gtag('event', 'moonchaser.sidebar.click');
             }}>
             <p className={styles.tagline}>
-        <strong>Get paid more.</strong> Receive risk-free salary negotiation
-        help from Moonchaser. You pay nothing unless your offer is increased.
+              <strong>Get paid more.</strong> Receive risk-free salary
+              negotiation help from Moonchaser. You pay nothing unless your
+              offer is increased.
             </p>
           </a>
         ) : (
@@ -43,9 +50,13 @@ export default React.memo(function SidebarAd() {
               window.gtag('event', 'levelsfyi.sidebar.click');
             }}>
             <p className={styles.tagline}>
-        <strong>Get paid, not played.</strong> Chat with former tech recruiters
-        who'll guide you on exactly what to say to negotiate a higher offer.
+              <strong>Get paid, not played.</strong> Chat with former tech
+              recruiters who'll guide you on exactly what to say to negotiate a
+              higher offer.
             </p>
           </a>
+        )
+      }
+    </BrowserOnly>
   );
 });

website/src/pages/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import classnames from 'classnames';
 import Layout from '@theme/Layout';
 import Link from '@docusaurus/Link';
+import BrowserOnly from '@docusaurus/BrowserOnly';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import styles from './styles.module.css';
@@ -53,6 +54,10 @@ function Home() {
         </div>
       </header>
       <div>
+        {/* // Because the SSR and client output can differ and hydration doesn't patch attribute differences, 
+        we'll render this on the browser only. */}
+        <BrowserOnly>
+          {() => (
             <div
               className={classnames(
                 'margin-bottom--lg',
@@ -67,9 +72,9 @@ function Home() {
                         <div key={Math.random()}>
                           <h2 className={styles.sectionPrimaryTitle}>
                             <strong>
-                          Get paid more. Receive risk-free salary negotiation
-                          help from Moonchaser. You pay nothing unless your
-                          offer is increased.
+                              Get paid more. Receive risk-free salary
+                              negotiation help from Moonchaser. You pay nothing
+                              unless your offer is increased.
                             </strong>
                           </h2>
                           <div className="margin-vert--lg">
@@ -79,7 +84,10 @@ function Home() {
                               rel="noreferrer noopener"
                               target="_blank"
                               onClick={() => {
-                            window.gtag('event', 'moonchaser.homepage.click');
+                                window.gtag(
+                                  'event',
+                                  'moonchaser.homepage.click',
+                                );
                               }}>
                               Get Risk-free Negotiation Help&nbsp;&nbsp;→
                             </a>
@@ -89,9 +97,9 @@ function Home() {
                         <div key={Math.random()}>
                           <h2 className={styles.sectionPrimaryTitle}>
                             <strong>
-                          Get paid, not played. Chat with former tech recruiters
-                          who'll guide you on exactly what to say to negotiate a
-                          higher offer.
+                              Get paid, not played. Chat with former tech
+                              recruiters who'll guide you on exactly what to say
+                              to negotiate a higher offer.
                             </strong>
                           </h2>
                           <div className="margin-vert--lg">
@@ -101,7 +109,10 @@ function Home() {
                               rel="noreferrer noopener"
                               target="_blank"
                               onClick={() => {
-                            window.gtag('event', 'levelsfyi.homepage.click');
+                                window.gtag(
+                                  'event',
+                                  'levelsfyi.homepage.click',
+                                );
                               }}>
                               Get Negotiation Help&nbsp;&nbsp;→
                             </a>
@@ -113,6 +124,8 @@ function Home() {
                 </div>
               </div>
             </div>
+          )}
+        </BrowserOnly>
         <div className={classnames('margin-vert--lg', 'padding-vert--lg')}>
           <div className="container">
             <div className="row">