swr

components/Loading.tsx

@@ -0,0 +1,7 @@
+export const Loading = () => {
+    return(
+        <div className='fixed h-[85vh] w-screen flex justify-center items-center'>
+            <div className='animate-spin w-16 h-16 border-4 border-t-transparent border-l-transparent border-r-black border-b-black dark:border-r-white dark:border-b-white rounded-full' role='status' />
+        </div>
+    )
+}

package-lock.json

@@ -22,6 +22,7 @@
         "react-hot-toast": "^2.3.0",
         "react-icons": "^4.4.0",
         "sass": "^1.54.4",
+        "swr": "^1.3.0",
         "tailwindcss": "^3.1.8",
         "typescript": "4.7.4"
       }
@@ -1283,6 +1284,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/swr": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-1.3.0.tgz",
+      "integrity": "sha512-dkghQrOl2ORX9HYrMDtPa7LTVHJjCTeZoB1dqTbnnEDlSvN8JEKpYIYurDfvbQFUUS8Cg8PceFVZNkW0KNNYPw==",
+      "dev": true,
+      "peerDependencies": {
+        "react": "^16.11.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.1.8",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.8.tgz",
@@ -2203,6 +2213,13 @@
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
       "dev": true
     },
+    "swr": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-1.3.0.tgz",
+      "integrity": "sha512-dkghQrOl2ORX9HYrMDtPa7LTVHJjCTeZoB1dqTbnnEDlSvN8JEKpYIYurDfvbQFUUS8Cg8PceFVZNkW0KNNYPw==",
+      "dev": true,
+      "requires": {}
+    },
     "tailwindcss": {
       "version": "3.1.8",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.8.tgz",

package.json

@@ -23,6 +23,7 @@
     "react-hot-toast": "^2.3.0",
     "react-icons": "^4.4.0",
     "sass": "^1.54.4",
+    "swr": "^1.3.0",
     "tailwindcss": "^3.1.8",
     "typescript": "4.7.4"
   }

pages/index.tsx

@@ -1,17 +1,23 @@
 import Image from 'next/image'
 import Link from 'next/link'
 import React from 'react'
+import useSWR from 'swr'
 
 import { socials } from 'components/data/socials'
 import { Icon } from 'components/Icon' 
 import { Footer } from 'components/Footer'
+import { Loading } from 'components/Loading'
 
 import { Toaster } from 'react-hot-toast'
 import { FaSpotify } from 'react-icons/fa'
 
-import { GetServerSideProps } from 'next'
+const fetcher = (url: RequestInfo) => fetch(url).then(r => r.json())
+
+export default function() {
+    const { data: spotify } = useSWR('/api/spotify', fetcher)
+
+    if(!spotify) return <Loading />
 
-export default function({ spotify }: any) {
     return(
         <>
             <div className='px-8 w-11/12 m-auto rounded-lg max-w-4xl'>
@@ -39,7 +45,6 @@ export default function({ spotify }: any) {
 
                             : <a className='text-[#32a866]'> nothing</a>
                         }
-
                     </p>
                 </div>
 
@@ -55,13 +60,3 @@ export default function({ spotify }: any) {
         </>
     )
 }
-
-export const getServerSideProps: GetServerSideProps = async () => {
-    const spotify = await fetch(`${process.env.PRODUCTION}/api/spotify`, {
-        method: 'GET'
-    }).then((res) => res.json())
-
-    return {
-        props: { spotify }
-    }
-}