algorithm/tech-interview-handbook
1
0
Fork 0
mirror of https://github.com/yangshun/tech-interview-handbook.git synced 2025-07-29 05:02:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

website: use <BrowserOnly> to fix SSR mismatch bug

Browse Source
This commit is contained in:
Yangshun
2021-09-02 13:09:49 +08:00
parent 9084053aab
commit 44b6e0584a
2 changed files with 110 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
website/src/components/SidebarAd/index.js
View File

@ -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,35 +18,45 @@ export default React.memo(function SidebarAd() {
const backgroundClass =
BACKGROUNDS[Math.floor(Math.random() * BACKGROUNDS.length)];
return Math.random() > 0.5 ? (
<a
className={clsx(styles.container, backgroundClass)}
href="https://www.moonchaser.io/?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=website_docs_sidebar"
key={Math.random()}
target="_blank"
rel="noreferrer noopener"
onClick={() => {
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.
</p>
</a>
) : (
<a
className={clsx(styles.container, backgroundClass)}
href="https://www.levels.fyi/services/?ref=TechInterviewHandbook&utm_source=techinterviewhandbook&utm_medium=referral&utm_content=website_docs_sidebar"
key={Math.random()}
target="_blank"
rel="noreferrer noopener"
onClick={() => {
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.
</p>
</a>
// 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"
key={Math.random()}
target="_blank"
rel="noreferrer noopener"
onClick={() => {
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.
</p>
</a>
) : (
<a
className={clsx(styles.container, backgroundClass)}
href="https://www.levels.fyi/services/?ref=TechInterviewHandbook&utm_source=techinterviewhandbook&utm_medium=referral&utm_content=website_docs_sidebar"
key={Math.random()}
target="_blank"
rel="noreferrer noopener"
onClick={() => {
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.
</p>
</a>
)
}
</BrowserOnly>
);
});