Improve landing page performance (#1180)

* Improve landing page performance

* fix build

nuxt.config.ts

@@ -104,8 +104,11 @@ export default defineNuxtConfig({
         donationPlatforms?: any[]
         reportTypes?: any[]
       } = {}
+      let homePageProjects: any[] = []
+
       try {
         state = JSON.parse(await fs.readFile('./generated/state.json', 'utf8'))
+        homePageProjects = JSON.parse(await fs.readFile('./generated/homepage.json', 'utf8'))
       } catch {
         // File doesn't exist, create folder
         await fs.mkdir('./generated', { recursive: true })
@@ -118,7 +121,8 @@ export default defineNuxtConfig({
         state.lastGenerated &&
         new Date(state.lastGenerated).getTime() + TTL > new Date().getTime() &&
         // ...but only if the API URL is the same
-        state.apiUrl === API_URL
+        state.apiUrl === API_URL &&
+        homePageProjects.length !== 0
       ) {
         return
       }
@@ -133,23 +137,25 @@ export default defineNuxtConfig({
         },
       }
 
-      const [categories, loaders, gameVersions, donationPlatforms, reportTypes] = await Promise.all(
-        [
+      const [categories, loaders, gameVersions, donationPlatforms, reportTypes, projects] =
+        await Promise.all([
           $fetch(`${API_URL}tag/category`, headers),
           $fetch(`${API_URL}tag/loader`, headers),
           $fetch(`${API_URL}tag/game_version`, headers),
           $fetch(`${API_URL}tag/donation_platform`, headers),
           $fetch(`${API_URL}tag/report_type`, headers),
-        ]
-      )
+          $fetch(`${API_URL}projects_random?count=40`, headers),
+        ])
 
       state.categories = categories
       state.loaders = loaders
       state.gameVersions = gameVersions
       state.donationPlatforms = donationPlatforms
       state.reportTypes = reportTypes
+      homePageProjects = projects
 
       await fs.writeFile('./generated/state.json', JSON.stringify(state))
+      await fs.writeFile('./generated/homepage.json', JSON.stringify(homePageProjects))
 
       console.log('Tags generated!')
     },

package.json

@@ -19,7 +19,7 @@
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-vue": "^9.9.0",
-    "nuxt": "^3.4.2",
+    "nuxt": "^3.5.3",
     "prettier": "^2.8.3",
     "sass": "^1.58.0",
     "typescript": "^4.9.5",

pages/index.vue

@@ -525,32 +525,30 @@ import PrismLauncherLogo from '~/assets/images/external/prism.svg'
 import ATLauncherLogo from '~/assets/images/external/atlauncher.svg'
 import Avatar from '~/components/ui/Avatar'
 import ProjectCard from '~/components/ui/ProjectCard'
+import homepageProjects from '~/generated/homepage.json'
 
 const searchQuery = ref('better')
 const sortType = ref('relevance')
 
-const [
-  { data: rows },
-  { data: searchProjects, refresh: updateSearchProjects },
-  { data: notifications },
-] = await Promise.all([
-  useAsyncData('projects', () => useBaseFetch('projects_random?count=40'), {
-    transform: (result) => {
-      const val = Math.ceil(result.length / 3)
-
-      return [result.slice(0, val), result.slice(val, val * 2), result.slice(val * 2, val * 3)]
-    },
-  }),
-  useAsyncData(
-    'demoSearchProjects',
-    () => useBaseFetch(`search?limit=3&query=${searchQuery.value}&index=${sortType.value}`),
-    {
+const [{ data: searchProjects, refresh: updateSearchProjects }, { data: notifications }] =
+  await Promise.all([
+    useAsyncData(
+      'demoSearchProjects',
+      () => useBaseFetch(`search?limit=3&query=${searchQuery.value}&index=${sortType.value}`),
+      {
+        transform: (result) => result.hits,
+      }
+    ),
+    useAsyncData('updatedProjects', () => useBaseFetch(`search?limit=3&query=&index=updated`), {
       transform: (result) => result.hits,
-    }
-  ),
-  useAsyncData('updatedProjects', () => useBaseFetch(`search?limit=3&query=&index=updated`), {
-    transform: (result) => result.hits,
-  }),
+    }),
+  ])
+
+const val = Math.ceil(homepageProjects.length / 3)
+const rows = shallowRef([
+  homepageProjects.slice(0, val),
+  homepageProjects.slice(val, val * 2),
+  homepageProjects.slice(val * 2, val * 3),
 ])
 </script>