Fix SSG not generating the actual page content on initial load

components/Loader/Preloader.tsx

@@ -1,23 +1,38 @@
-import useLoader from 'hooks/useLoader'
+import { useEffect, useState } from 'react'
 import { Spinner } from './Spinner'
 
+const LOADER_TIMEOUT = 2000
+
 export const Preloader = ({
   backgroundColor,
   children,
-  ...rest
+  ...spinnerProps
 }: {
   children: JSX.Element
   backgroundColor: string
   color: string
   size: number
 }): JSX.Element => {
-  const { loader } = useLoader()
-  if (!loader) return children
+  const [showLoader, setShowLoader] = useState(true)
+
+  useEffect(() => {
+    const timerId = setTimeout(() => {
+      setShowLoader(false)
+    }, LOADER_TIMEOUT)
+
+    return () => {clearTimeout(timerId)}
+  }, [])
+
   return (
-    <div
-      className={`loader ${backgroundColor} fixed top-0 left-0 w-full h-screen flex justify-center items-center`}
-    >
-      <Spinner {...rest} />
-    </div>
+    <>
+      {children}
+      {showLoader && (
+        <div
+          className={`loader ${backgroundColor} fixed z-30 top-0 left-0 w-full h-screen flex justify-center items-center`}
+        >
+          <Spinner {...spinnerProps} />
+        </div>
+      )}
+    </>
   )
 }

database/data.ts

@@ -75,7 +75,7 @@ export const sidebarData: ISidebar[] = [
       },
       { name: 'database', url: '/database', resources: DB.database },
       {
-        name:'APIs',
+        name: 'APIs',
         url: '/api',
         resources: DB.api,
       }
@@ -123,7 +123,7 @@ export const sidebarData: ISidebar[] = [
       {
         name: 'Videos',
         url: '/open-source-videos',
-        resources: DB.openSourceVideos, 
+        resources: DB.openSourceVideos,
       },
     ],
   },
@@ -269,3 +269,5 @@ export const sidebarData: ISidebar[] = [
     ],
   },
 ]
+
+export const subCategories = sidebarData.flatMap(({ subcategory }) => subcategory.map(({ url }) => url.replace('/', '')))

hooks/useFilterDB.ts

@@ -1,18 +1,20 @@
 import { database } from 'database/data'
 import { useRouter } from 'next/router'
-import { IData, IUseFilterDBResponse } from 'types'
+import { IData } from 'types'
+import { useResults } from './ResultsContext'
 
-const useFilterDB = (): IUseFilterDBResponse => {
+const useFilterDB = (subcategory: string) => {
   const router = useRouter()
-  const { subcategory } = router.query
-  if (typeof subcategory !== 'string') {
-    throw new Error(
-      'UseFilterDB Error: Response of Router Query is not a string'
-    )
+  const { results } = useResults()
+
+  let pageCategory = subcategory
+  if (typeof window !== 'undefined') {
+    pageCategory = router.asPath.slice(1)
   }
+
   // This filters trough the DB with the subcategory which results in an array of arrays
   const filterSubCat = database?.map((item) =>
-    item?.filter((cat: IData) => cat.subcategory.includes(subcategory))
+    item?.filter((cat: IData) => cat.subcategory.includes(pageCategory))
   )
 
   // This filters out an empty array from the filterSubCat
@@ -21,6 +23,8 @@ const useFilterDB = (): IUseFilterDBResponse => {
   return {
     filterSubCat,
     filterDB,
+    results,
+    pageCategory
   }
 }
 

pages/[subcategory]/index.tsx

@@ -1,20 +1,23 @@
 import React from 'react'
 import { TopBar } from 'components/TopBar/TopBar'
-import { useRouter } from 'next/router'
 import Head from 'next/head'
 import useFilterDB from 'hooks/useFilterDB'
 import CardsList from 'components/Cards/CardsList'
 import ComingSoon from 'components/NewIssue/NewIssue'
-import { useResults } from 'hooks/ResultsContext'
 
-const SubCategory = () => {
-  const router = useRouter()
-  const { results } = useResults()
-  const title = `LinksHub - ${router.asPath
-    .charAt(1)
-    .toUpperCase()}${router.asPath.slice(2)}`
-  const { filterDB } = useFilterDB()
+import { subCategories } from 'database/data'
+import { GetStaticProps, NextPage } from 'next'
+import { ParsedUrlQuery } from 'querystring'
 
+interface PageProps {
+  subcategory: string
+}
+
+interface Params extends ParsedUrlQuery, PageProps{}
+
+const SubCategory: NextPage<PageProps> = ({subcategory}) => {
+  const {filterDB, results, pageCategory} = useFilterDB(subcategory)
+  const title = `LinksHub - ${pageCategory[0].toUpperCase() + pageCategory.slice(1)}`
   let content: JSX.Element[] | JSX.Element
 
   if (filterDB.length > 0) {
@@ -95,4 +98,20 @@ const SubCategory = () => {
   )
 }
 
+export const getStaticPaths = async () => {
+  const paths  = subCategories.map(subcategory => ({
+    params: {subcategory}
+  }))
+
+  return {paths, fallback: false}
+}
+
+export const  getStaticProps: GetStaticProps = async (context) => {
+  const {subcategory} = context.params as Params
+
+  return {props: {
+    subcategory
+  }}
+}
+
 export default SubCategory

pages/index.tsx

@@ -3,6 +3,7 @@ import Head from 'next/head'
 import Logo from 'components/logo/logo'
 import TypewriterComponent from 'typewriter-effect'
 import { sidebarData } from '../database/data'
+
 export default function Home() {
   //storing sub categories names for using in typewriter effect
   const subCategoriesNames: string[] = []

types/index.ts

@@ -68,11 +68,6 @@ export interface IContext {
   toggleNav?: () => void
 }
 
-export interface IUseFilterDBResponse {
-  filterSubCat: IData[][]
-  filterDB: IData[][]
-}
-
 export const subcategoryArray = [
   // devops
   'cicd',