diff --git a/pages/venue/venueMap.vue b/components/venue/VenueMap.vue
similarity index 100%
rename from pages/venue/venueMap.vue
rename to components/venue/VenueMap.vue
diff --git a/nuxt.config.js b/nuxt.config.js
index 12f13734e6..c9bf93493c 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -1,9 +1,68 @@
+import axios from 'axios'
 const DEFAULT_BASE_URL = 'https://tw.pycon.org/prs'
 const DEFAULT_ROUTER_BASE = '/2023/'
 const DEFAULT_BUILD_TARGET = 'static'
 const DEFAULT_VUE_DEVTOOL = false
 
 export default {
+    generate: {
+        async routes() {
+            const config = {
+                headers: {
+                    authorization: `Token ${process.env.AUTH_TOKEN}`,
+                },
+            }
+            const talks = await axios.get(
+                `${DEFAULT_BASE_URL}/api/events/speeches/?event_types=talk,sponsored`,
+                config,
+            )
+            const tutorials = await axios.get(
+                `${DEFAULT_BASE_URL}/api/events/speeches/?event_types=tutorial`,
+                config,
+            )
+            const getAllDetailTalks = async () => {
+                const data = await Promise.all(
+                    talks.data.map(async (talk) => {
+                        return await axios
+                            .get(
+                                `${DEFAULT_BASE_URL}/api/events/speeches/${talk.event_type}/${talk.id}/`,
+                                config,
+                            )
+                            .then((response) => response.data)
+                    }),
+                )
+                return data
+            }
+            const getAllDetailTutorials = async () => {
+                const data = await Promise.all(
+                    tutorials.data.map(async (tutorial) => {
+                        return await axios
+                            .get(
+                                `${DEFAULT_BASE_URL}/api/events/speeches/${tutorial.event_type}/${tutorial.id}/`,
+                                config,
+                            )
+                            .then((response) => response.data)
+                    }),
+                )
+                return data
+            }
+
+            const detailTalks = await getAllDetailTalks()
+            const detailTutorials = await getAllDetailTutorials()
+
+            const routes = [
+                ...detailTalks.map((talk) => ({
+                    route: `/conference/${talk.event_type}/${talk.id}`,
+                    payload: talk,
+                })),
+                ...detailTutorials.map((tutorial) => ({
+                    route: `/conference/${tutorial.event_type}/${tutorial.id}`,
+                    payload: tutorial,
+                })),
+            ]
+            return routes
+        },
+    },
     vue: {
         config: {
             devtools: process.env.VUE_DEVTOOL || DEFAULT_VUE_DEVTOOL,
diff --git a/package-lock.json b/package-lock.json
index 8e5ce9bba4..5b6eb2ba80 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4789,8 +4789,7 @@
         "asynckit": {
             "version": "0.4.0",
             "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-            "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
-            "dev": true
+            "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k="
         },
         "at-least-node": {
             "version": "1.0.0",
@@ -4816,6 +4815,27 @@
                 "postcss-value-parser": "^4.1.0"
             }
         },
+        "axios": {
+            "version": "0.27.2",
+            "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
+            "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+            "requires": {
+                "follow-redirects": "^1.14.9",
+                "form-data": "^4.0.0"
+            },
+            "dependencies": {
+                "form-data": {
+                    "version": "4.0.0",
+                    "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+                    "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+                    "requires": {
+                        "asynckit": "^0.4.0",
+                        "combined-stream": "^1.0.8",
+                        "mime-types": "^2.1.12"
+                    }
+                }
+            }
+        },
         "babel-code-frame": {
             "version": "6.26.0",
             "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -6167,7 +6187,6 @@
             "version": "1.0.8",
             "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
             "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-            "dev": true,
             "requires": {
                 "delayed-stream": "~1.0.0"
             }
@@ -7178,8 +7197,7 @@
         "delayed-stream": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-            "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
-            "dev": true
+            "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
         },
         "delegates": {
             "version": "1.0.0",
diff --git a/package.json b/package.json
index f15674cf77..1117faab77 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
         "dev": "nuxt",
         "build": "nuxt build",
         "start": "nuxt start",
-        "generate": "nuxt generate",
+        "preview": "nuxt preview",
         "serve": "npm run build && npm run start",
         "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
         "lint": "npm run lint:js",
@@ -23,6 +23,7 @@
         "@nuxtjs/markdownit": "^2.0.0",
         "@nuxtjs/sitemap": "^2.4.0",
         "@tailwindcss/aspect-ratio": "^0.2.1",
+        "axios": "^0.27.2",
         "core-js": "^3.6.5",
         "dayjs": "^1.10.6",
         "leaflet": "^1.9.4",
diff --git a/pages/about/sponsor.vue b/pages/about/sponsor.vue
index 24f071d369..7b45ab1311 100644
--- a/pages/about/sponsor.vue
+++ b/pages/about/sponsor.vue
@@ -37,7 +37,6 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
 import I18nPageWrapper from '@/components/core/i18n/PageWrapper'
 import CoreH1 from '@/components/core/titles/H1'
 import i18n from '@/i18n/about/sponsor.i18n'
@@ -59,18 +58,20 @@ export default {
         const ccip = context.query.ccip // to determine if it's opass mobile app
         return ccip ? 'ccip' : 'default'
     },
+    async asyncData({ store, payload }) {
+        if (payload) return { sponsorsData: payload }
+        await store.dispatch('$getSponsorsData')
+        const sponsorsData = store.state.sponsorsData
+        return {
+            sponsorsData,
+        }
+    },
     data() {
         return {
             isOpened: false,
             selectedSponsor: {},
         }
     },
-    computed: {
-        ...mapState(['sponsorsData']),
-    },
-    created() {
-        this.$store.dispatch('$getSponsorsData')
-    },
     methods: {
         showModal(sponsor) {
             this.isOpened = true
diff --git a/pages/conference/_eventType/_id.vue b/pages/conference/_eventType/_id.vue
index eb2b15401b..7434055d91 100644
--- a/pages/conference/_eventType/_id.vue
+++ b/pages/conference/_eventType/_id.vue
@@ -184,6 +184,19 @@ export default {
         MarkdownRenderer,
         RelatedCardCollection,
     },
+    async asyncData({ store, params, payload }) {
+        if (payload && Object.keys(payload).length !== 0) {
+            return {
+                speechData: payload,
+            }
+        }
+        await store.dispatch('$getSpeechData', {
+            eventType: params.eventType,
+            eventId: params.id,
+        })
+        const speechData = store.state.speechData
+        return { speechData }
+    },
     data() {
         return {
             eventType: '',
@@ -207,10 +220,6 @@ export default {
         ...mapState(['speechData']),
     },
     async created() {
-        await this.$store.dispatch('$getSpeechData', {
-            eventType: this.$route.params.eventType,
-            eventId: this.$route.params.id,
-        })
         await this.processData()
         this.$root.$emit('initTabs')
         await this.$store.dispatch('$getRelatedData', this.data.category)
diff --git a/pages/conference/_eventType/index.vue b/pages/conference/_eventType/index.vue
index 06a2416942..609c7e6d6e 100644
--- a/pages/conference/_eventType/index.vue
+++ b/pages/conference/_eventType/index.vue
@@ -73,16 +73,25 @@ export default {
         SpeechCardCollection,
         Banner,
     },
-    asyncData({ redirect, params }) {
+    async asyncData({ redirect, store, params, payload }) {
         const eventType = params.eventType
         if (!['talks', 'tutorials'].includes(eventType)) {
             redirect('/')
         }
+        if (payload && Object.keys(payload).length !== 0)
+            return { eventType, speechesData: payload }
+        await store.dispatch('$getSpeechesData', eventType)
+        const speechesData = store.state.speechesData.map((speech) => ({
+            ...speech,
+            begin_time: speech.begin_time ? new Date(speech.begin_time) : null,
+        }))
+        return {
+            eventType,
+            speechesData,
+        }
     },
     data() {
         return {
-            eventType: '',
-            speechesData: [],
             checkedCategories: [],
             aboutBanner: AboutBanner,
         }
@@ -133,14 +142,6 @@ export default {
             return false
         },
     },
-    async mounted() {
-        this.eventType = this.$route.params.eventType
-        await this.$store.dispatch('$getSpeechesData', this.eventType)
-        this.speechesData = this.$store.state.speechesData.map((speech) => ({
-            ...speech,
-            begin_time: speech.begin_time ? new Date(speech.begin_time) : null,
-        }))
-    },
     methods: {
         metaInfo() {
             return {
diff --git a/pages/conference/keynotes.vue b/pages/conference/keynotes.vue
index b7d46a2d31..cc7cd378e8 100644
--- a/pages/conference/keynotes.vue
+++ b/pages/conference/keynotes.vue
@@ -141,9 +141,19 @@ export default {
         GithubIcon,
         TwitterIcon,
     },
+    async asyncData({ store, app, payload }) {
+        if (payload) return { keynotesData: payload }
+        await store.dispatch('$getKeynotesData')
+        const keynotesData = store.state.keynotesData.map((keynote) => ({
+            ...keynote,
+            id: app.$makeId(),
+        }))
+        return {
+            keynotesData,
+        }
+    },
     data() {
         return {
-            keynotesData: [],
             aboutBanner: AboutBanner,
         }
     },
@@ -159,13 +169,6 @@ export default {
             }
         },
     },
-    async mounted() {
-        await this.$store.dispatch('$getKeynotesData')
-        this.keynotesData = this.$store.state.keynotesData.map((keynote) => ({
-            ...keynote,
-            id: this.$makeId(),
-        }))
-    },
     methods: {
         getKeynoteId(keynote) {
             if (keynote.speaker.name_en_us) {
diff --git a/pages/conference/schedule.vue b/pages/conference/schedule.vue
index e003263931..01f3141ea3 100644
--- a/pages/conference/schedule.vue
+++ b/pages/conference/schedule.vue
@@ -101,6 +101,12 @@ export default {
         ScheduleEvent,
         ScheduleTick,
     },
+    async asyncData({ store, payload }) {
+        if (payload) return { schedulesData: payload }
+        await store.dispatch('$getSchedulesData')
+        const schedulesData = store.state.schedulesData
+        return { schedulesData }
+    },
     data() {
         return {
             selectedDayIndex: 0,
@@ -132,8 +138,7 @@ export default {
             this.makeRooms()
         },
     },
-    async created() {
-        await this.$store.dispatch('$getSchedulesData')
+    created() {
         this.processData()
     },
     activated() {
diff --git a/pages/events/jobs-gather.vue b/pages/events/jobs-gather.vue
index 08165ae478..c3c2882482 100644
--- a/pages/events/jobs-gather.vue
+++ b/pages/events/jobs-gather.vue
@@ -45,19 +45,22 @@ export default {
         JobsCardCollection,
         JobsPanel,
     },
+    async asyncData({ store, app, payload }) {
+        if (payload) return { jobsData: payload }
+        await store.dispatch('$getJobsData')
+        const jobsData = store.state.jobsData.map((sponsor) => ({
+            ...sponsor,
+            id: app.$makeId(),
+        }))
+        return { jobsData }
+    },
     data() {
         return {
             selectedSponsor: {},
-            jobsData: [],
             pivot: 0,
         }
     },
-    async mounted() {
-        await this.$store.dispatch('$getJobsData')
-        this.jobsData = this.$store.state.jobsData.map((sponsor) => ({
-            ...sponsor,
-            id: this.$makeId(),
-        }))
+    mounted() {
         this.setSelectedSponsor(this.jobsData[0])
         this.setPivot()
     },
diff --git a/pages/events/jobs.vue b/pages/events/jobs.vue
index ce9ad79cd1..9787844e5b 100644
--- a/pages/events/jobs.vue
+++ b/pages/events/jobs.vue
@@ -39,19 +39,22 @@ export default {
         JobsCardCollection,
         JobsPanel,
     },
+    async asyncData({ store, app, payload }) {
+        if (payload) return { jobsData: payload }
+        await store.dispatch('$getJobsData')
+        const jobsData = store.state.jobsData.map((sponsor) => ({
+            ...sponsor,
+            id: app.$makeId(),
+        }))
+        return { jobsData }
+    },
     data() {
         return {
             selectedSponsor: {},
-            jobsData: [],
             pivot: 0,
         }
     },
-    async mounted() {
-        await this.$store.dispatch('$getJobsData')
-        this.jobsData = this.$store.state.jobsData.map((sponsor) => ({
-            ...sponsor,
-            id: this.$makeId(),
-        }))
+    mounted() {
         if (this.jobsData.length > 0) {
             this.setSelectedSponsor(this.jobsData[0])
         }
diff --git a/pages/index.vue b/pages/index.vue
index 707189db0a..3a16512c5e 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -145,6 +145,14 @@ export default {
         I18nPageWrapper,
         Intro,
     },
+    async asyncData({ store, payload }) {
+        if (payload) return { sponsorsData: payload }
+        await store.dispatch('$getSponsorsData')
+        const sponsorsData = store.state.sponsorsData
+        return {
+            sponsorsData,
+        }
+    },
     data() {
         return {
             isOpened: false,
@@ -178,9 +186,6 @@ export default {
             return this.$store.state.configs.showIndexSponsorSection
         },
     },
-    created() {
-        this.$store.dispatch('$getSponsorsData')
-    },
     methods: {
         showModal(sponsor) {
             this.isOpened = true
diff --git a/pages/venue/index.vue b/pages/venue/index.vue
index 2142b64df1..40c2d22ff2 100644
--- a/pages/venue/index.vue
+++ b/pages/venue/index.vue
@@ -51,6 +51,7 @@ import VenueTab from '@/components/venue/VenueTab.vue'
 import VenuePublicTransporterTab from '@/components/venue/VenuePublicTransporterTab.vue'
 import VenueDriveTab from '@/components/venue/VenueDriveTab.vue'
 import VenueShuttleServiceTab from '@/components/venue/VenueShuttleServiceTab.vue'
+import VenueMap from '@/components/venue/VenueMap.vue'
 export default {
     i18n,
     name: 'PageVenue',
@@ -62,7 +63,7 @@ export default {
         VenuePublicTransporterTab,
         VenueDriveTab,
         VenueShuttleServiceTab,
-        VenueMap: () => import('./venueMap.vue'),
+        VenueMap,
     },
     data() {
         return {