Fix ssr bug

the-kwisatz-haderach · Nov 20, 2023 · b4c7c4d · b4c7c4d · vercel · Nov 20, 2023
1 parent db4bca7
commit b4c7c4d
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/layouts/MainLayout/MainLayout.tsx b/layouts/MainLayout/MainLayout.tsx
@@ -1,24 +1,31 @@
 import { Flex } from '@chakra-ui/react'
-import React, { PropsWithChildren, ReactElement, useEffect } from 'react'
+import React, {
+  PropsWithChildren,
+  ReactElement,
+  useEffect,
+  useState,
+} from 'react'
 import { Footer } from '../../components/Footer'
 import { MainNavigation } from '../../components/MainNavigation'
 import useAppContext from '../../contexts/AppContext'
 
-let shouldRender = process.env.NODE_ENV !== 'production'
 const correct_pass = process.env.NEXT_PUBLIC_PROD_PASS
 
 export default function MainLayout({
   children,
 }: PropsWithChildren<any>): ReactElement {
   const { menuItems, logo, ...contactDetails } = useAppContext()
+  const [shouldRender, setShouldRender] = useState(
+    process.env.NODE_ENV !== 'production'
+  )
 
   useEffect(() => {
     const checkPassword = () => {
       const password =
         window.sessionStorage.getItem('pass') || window.prompt('Password')
       if (password === correct_pass) {
         window.sessionStorage.setItem('pass', correct_pass)
-        shouldRender = true
+        setShouldRender(true)
       } else {
         checkPassword()
       }

diff --git a/layouts/MainLayout/index.tsx b/layouts/MainLayout/index.tsx
@@ -1 +1,5 @@
-export { default as MainLayout } from './MainLayout'
+import dynamic from 'next/dynamic'
+
+export const MainLayout = dynamic(() => import('./MainLayout'), {
+  ssr: false,
+})
diff --git a/pages/[category]/[id].tsx b/pages/[category]/[id].tsx
@@ -31,7 +31,6 @@ export default function Obituary({ obituary }: Props): ReactElement {
     type,
   } = obituary
   const fullname = [firstname, surname, name_misc].join(' ')
-
   return (
     <div>
       <Head>
-Original file line number
+Diff line change
@@ Expand Up @@
         type,
       } = obituary
       const fullname = [firstname, surname, name_misc].join(' ')
       return (
         <div>
           <Head>
@@ Expand Down @@