Generate SSG Page used as cache for user's third-party calendar

apps/web/next.config.js

@@ -76,7 +76,6 @@ if (process.env.ANALYZE === "true") {
 
 plugins.push(withTM);
 plugins.push(withAxiom);
-
 /** @type {import("next").NextConfig} */
 const nextConfig = {
   i18n,
@@ -98,7 +97,7 @@ const nextConfig = {
   images: {
     unoptimized: true,
   },
-  webpack: (config) => {
+  webpack: (config, { webpack, buildId }) => {
     config.plugins.push(
       new CopyWebpackPlugin({
         patterns: [
@@ -120,6 +119,8 @@ const nextConfig = {
       })
     );
 
+    config.plugins.push(new webpack.DefinePlugin({ "process.env.BUILD_ID": JSON.stringify(buildId) }));
+
     config.resolve.fallback = {
       ...config.resolve.fallback, // if you miss it, all the other options in fallback, specified
       // by next.js will be dropped. Doesn't make much sense, but how it is

apps/web/pages/[user]/calendar-cache/[month].tsx

@@ -0,0 +1,54 @@
+/**
+ * This page is empty for the user, it is used only to take advantage of the
+ * caching system that NextJS uses SSG pages.
+ * TODO: Redirect to user profile on browser
+ */
+import { GetStaticPaths, GetStaticProps } from "next";
+import { z } from "zod";
+
+import { getCachedResults } from "@calcom/core";
+import dayjs from "@calcom/dayjs";
+import prisma from "@calcom/prisma";
+
+type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;
+
+const CalendarCache = () => <div />;
+
+const paramsSchema = z.object({ user: z.string(), month: z.string() });
+export const getStaticProps: GetStaticProps<
+  { results: UnwrapPromise<ReturnType<typeof getCachedResults>> },
+  { user: string }
+> = async (context) => {
+  const { user: username, month } = paramsSchema.parse(context.params);
+  const user = await prisma.user.findUnique({
+    where: {
+      username,
+    },
+    select: {
+      id: true,
+      username: true,
+      credentials: true,
+      selectedCalendars: true,
+    },
+  });
+  const startDate = (
+    dayjs(month, "YYYY-MM").isSame(dayjs(), "month") ? dayjs() : dayjs(month, "YYYY-MM")
+  ).startOf("day");
+  const endDate = startDate.endOf("month");
+  const results = user?.credentials
+    ? await getCachedResults(user?.credentials, startDate.format(), endDate.format(), user?.selectedCalendars)
+    : [];
+  return {
+    props: { results, date: new Date().toISOString() },
+    revalidate: 1,
+  };
+};
+
+export const getStaticPaths: GetStaticPaths = () => {
+  return {
+    paths: [],
+    fallback: "blocking",
+  };
+};
+
+export default CalendarCache;

packages/core/CalendarManager.ts

@@ -2,9 +2,11 @@ import { SelectedCalendar } from "@prisma/client";
 import { createHash } from "crypto";
 import _ from "lodash";
 import cache from "memory-cache";
+import * as process from "process";
 
 import { getCalendar } from "@calcom/app-store/_utils/getCalendar";
 import getApps from "@calcom/app-store/utils";
+import dayjs from "@calcom/dayjs";
 import { getUid } from "@calcom/lib/CalEventParser";
 import logger from "@calcom/lib/logger";
 import { performance } from "@calcom/lib/server/perfObserver";
@@ -115,15 +117,15 @@ const cleanIntegrationKeys = (
 
 const CACHING_TIME = 30_000; // 30 seconds
 
-const getCachedResults = async (
+// here I will fetch the page json file.
+export const getCachedResults = async (
   withCredentials: CredentialPayload[],
   dateFrom: string,
   dateTo: string,
   selectedCalendars: SelectedCalendar[]
-) => {
+): Promise<EventBusyDate[][]> => {
   const calendarCredentials = withCredentials.filter((credential) => credential.type.endsWith("_calendar"));
   const calendars = calendarCredentials.map((credential) => getCalendar(credential));
-
   performance.mark("getBusyCalendarTimesStart");
   const results = calendars.map(async (c, i) => {
     /** Filter out nulls */
@@ -173,18 +175,40 @@ const getCachedResults = async (
   return awaitedResults;
 };
 
+/**
+ * This function fetch the json file that NextJS generates and uses to hydrate the static page on browser.
+ * If for some reason NextJS still doesn't generate this file, it will wait until it finishes generating it.
+ * @param username
+ * @param month
+ */
+const getNextCache = async (username: string, month: string): Promise<EventBusyDate[][]> => {
+  let localCache: EventBusyDate[][] = [];
+  try {
+    const { NEXT_PUBLIC_WEBAPP_URL, NODE_ENV } = process.env;
+    const cacheDir = `${NODE_ENV === "development" ? NODE_ENV : process.env.BUILD_ID}`;
+    const baseUrl = `${NEXT_PUBLIC_WEBAPP_URL}/_next/data/${cacheDir}/en`;
+    localCache = await fetch(
+      `${baseUrl}/${username}/calendar-cache/${month}.json?user=${username}&month=${month}`
+    )
+      .then((r) => r.json())
+      .then((json) => json?.pageProps?.results);
+  } catch (e) {
+    log.warn(e);
+  }
+  return localCache;
+};
+
 export const getBusyCalendarTimes = async (
+  username: string,
   withCredentials: CredentialPayload[],
-  dateFrom: string,
-  dateTo: string,
-  selectedCalendars: SelectedCalendar[]
+  dateFrom: string
+  // TODO: Make sure it's necessary
+  // selectedCalendars: SelectedCalendar[]
 ) => {
-  let results: EventBusyDate[][] = [];
-  try {
-    results = await getCachedResults(withCredentials, dateFrom, dateTo, selectedCalendars);
-  } catch (error) {
-    log.warn(error);
-  }
+  /* Fetch the cached JSON file on development environment it takes a long time because Next must compiles the whole
+  page and reduces the cache time,*/
+  const results: EventBusyDate[][] = await getNextCache(username, dayjs(dateFrom).format("YYYY-MM"));
+
   return results.reduce((acc, availability) => acc.concat(availability), []);
 };
 

packages/core/getBusyTimes.ts

@@ -10,6 +10,7 @@ import type { EventBusyDetails } from "@calcom/types/Calendar";
 export async function getBusyTimes(params: {
   credentials: Credential[];
   userId: number;
+  username: string;
   eventTypeId?: number;
   startTime: string;
   beforeEventBuffer?: number;
@@ -20,10 +21,11 @@ export async function getBusyTimes(params: {
   const {
     credentials,
     userId,
+    username,
     eventTypeId,
     startTime,
     endTime,
-    selectedCalendars,
+    //selectedCalendars,
     beforeEventBuffer,
     afterEventBuffer,
   } = params;
@@ -75,7 +77,12 @@ export async function getBusyTimes(params: {
   performance.mark("prismaBookingGetEnd");
   performance.measure(`prisma booking get took $1'`, "prismaBookingGetStart", "prismaBookingGetEnd");
   if (credentials?.length > 0) {
-    const calendarBusyTimes = await getBusyCalendarTimes(credentials, startTime, endTime, selectedCalendars);
+    const calendarBusyTimes = await getBusyCalendarTimes(
+      username,
+      credentials,
+      startTime
+      // selectedCalendars
+    );
     busyTimes.push(
       ...calendarBusyTimes.map((value) => ({
         ...value,

packages/core/getUserAvailability.ts

@@ -145,6 +145,7 @@ export async function getUserAvailability(
     endTime: dateTo.toISOString(),
     eventTypeId,
     userId: currentUser.id,
+    username: `${currentUser.username}`,
     selectedCalendars,
     beforeEventBuffer,
     afterEventBuffer,

turbo.json

@@ -236,6 +236,7 @@
     "$NEXTAUTH_SECRET",
     "$NEXTAUTH_URL",
     "$NODE_ENV",
+    "$BUILD_ID",
     "$PLAYWRIGHT_HEADLESS",
     "$PLAYWRIGHT_TEST_BASE_URL",
     "$PRISMA_FIELD_ENCRYPTION_KEY",