perf: /event-types/[type] — use server-fetched data to skip client-side trpc fetch (#20497)

apps/web/app/(use-page-wrapper)/event-types/[type]/page.tsx

@@ -1,4 +1,3 @@
-import { withAppDirSsr } from "app/WithAppDirSsr";
 import type { PageProps as _PageProps } from "app/_types";
 import { _generateMetadata } from "app/_utils";
 import { cookies, headers } from "next/headers";
@@ -7,7 +6,6 @@ import { z } from "zod";
 import { EventTypeRepository } from "@calcom/lib/server/repository/eventType";
 
 import { buildLegacyCtx } from "@lib/buildLegacyCtx";
-import type { PageProps as EventTypePageProps } from "@lib/event-types/[type]/getServerSideProps";
 import { getServerSideProps } from "@lib/event-types/[type]/getServerSideProps";
 
 import EventTypePageWrapper from "~/event-types/views/event-types-single-view";
@@ -40,11 +38,9 @@ export const generateMetadata = async ({ params }: _PageProps) => {
   );
 };
 
-const getData = withAppDirSsr<EventTypePageProps>(getServerSideProps);
-
 const ServerPage = async ({ params, searchParams }: _PageProps) => {
   const legacyCtx = buildLegacyCtx(await headers(), await cookies(), await params, await searchParams);
-  const props = await getData(legacyCtx);
+  const props = await getServerSideProps(legacyCtx);
 
   return <EventTypePageWrapper {...props} />;
 };

apps/web/lib/event-types/[type]/getServerSideProps.ts

@@ -1,15 +1,19 @@
 import { createRouterCaller } from "app/_trpc/context";
 import type { GetServerSidePropsContext } from "next";
+import { redirect, notFound } from "next/navigation";
 
 import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import logger from "@calcom/lib/logger";
 import { safeStringify } from "@calcom/lib/safeStringify";
+import type { RouterOutputs } from "@calcom/trpc";
 import { eventTypesRouter } from "@calcom/trpc/server/routers/viewer/eventTypes/_router";
 
 import { asStringOrThrow } from "@lib/asStringOrNull";
-import type { inferSSRProps } from "@lib/types/inferSSRProps";
 
-export type PageProps = inferSSRProps<typeof getServerSideProps>;
+export type PageProps = {
+  type: number;
+  data: RouterOutputs["viewer"]["eventTypes"]["get"];
+};
 
 export const getServerSideProps = async (context: GetServerSidePropsContext) => {
   const { req, query } = context;
@@ -19,48 +23,29 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
   const typeParam = parseInt(asStringOrThrow(query.type));
 
   if (Number.isNaN(typeParam)) {
-    const notFound = {
-      notFound: true,
-    } as const;
-
-    return notFound;
+    return notFound();
   }
 
   if (!session?.user?.id) {
-    const redirect = {
-      redirect: {
-        permanent: false,
-        destination: "/auth/login",
-      },
-    } as const;
-    return redirect;
+    return redirect("/auth/login");
   }
   const getEventTypeById = async (eventTypeId: number) => {
     const caller = await createRouterCaller(eventTypesRouter);
 
     try {
-      const { eventType } = await caller.get({ id: eventTypeId });
-      return eventType;
+      return await caller.get({ id: eventTypeId });
     } catch (e: unknown) {
       logger.error(safeStringify(e));
       // reject, user has no access to this event type.
       return null;
     }
   };
-  const eventType = await getEventTypeById(typeParam);
-  if (!eventType) {
-    const redirect = {
-      redirect: {
-        permanent: false,
-        destination: "/event-types",
-      },
-    } as const;
-    return redirect;
+  const data = await getEventTypeById(typeParam);
+  if (!data?.eventType) {
+    return redirect("/event-types");
   }
   return {
-    props: {
-      eventType,
-      type: typeParam,
-    },
+    data,
+    type: typeParam,
   };
 };

apps/web/modules/event-types/views/event-types-single-view.tsx

@@ -4,8 +4,8 @@ import { EventTypeWebWrapper as EventType } from "@calcom/atoms/event-types/wrap
 
 import type { PageProps } from "@lib/event-types/[type]/getServerSideProps";
 
-const EventTypePageWrapper = ({ type, ...rest }: PageProps) => {
-  return <EventType {...rest} id={type} />;
+const EventTypePageWrapper = ({ type, data }: PageProps) => {
+  return <EventType data={data} id={type} />;
 };
 
 export default EventTypePageWrapper;

packages/platform/atoms/event-types/wrappers/EventTypeWebWrapper.tsx

@@ -17,6 +17,7 @@ import { HttpError } from "@calcom/lib/http-error";
 import { telemetryEventTypes } from "@calcom/lib/telemetry";
 import { SchedulingType } from "@calcom/prisma/enums";
 import { trpc } from "@calcom/trpc/react";
+import type { RouterOutputs } from "@calcom/trpc/react";
 import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
 import { showToast } from "@calcom/ui/components/toast";
 
@@ -87,10 +88,11 @@ const EventAITab = dynamic(() =>
 
 export type EventTypeWebWrapperProps = {
   id: number;
+  data: RouterOutputs["viewer"]["eventTypes"]["get"];
 };
 
-export const EventTypeWebWrapper = ({ id }: EventTypeWebWrapperProps) => {
-  const { data: eventTypeQueryData } = trpc.viewer.eventTypes.get.useQuery({ id });
+export const EventTypeWebWrapper = ({ id, data }: EventTypeWebWrapperProps) => {
+  const { data: eventTypeQueryData } = trpc.viewer.eventTypes.get.useQuery({ id }, { initialData: data });
 
   if (!eventTypeQueryData) return null;