perf: Remove ssrInit completely (#20439)

* remove ssrInit completely

* remove instances of dehydratedState

* fix

* refactor

* fix type checks

* fix linting

* Refactor

* Refactor

* remove log

apps/web/server/lib/[user]/[type]/getServerSideProps.ts

@@ -1,4 +1,4 @@
-import type { DehydratedState } from "@tanstack/react-query";
+import { getTRPCContext } from "app/_trpc/context";
 import { type GetServerSidePropsContext } from "next";
 import type { Session } from "next-auth";
 import { z } from "zod";
@@ -13,6 +13,8 @@ import { UserRepository } from "@calcom/lib/server/repository/user";
 import slugify from "@calcom/lib/slugify";
 import prisma from "@calcom/prisma";
 import { RedirectType } from "@calcom/prisma/client";
+import { publicViewerRouter } from "@calcom/trpc/server/routers/publicViewer/_router";
+import { createCallerFactory } from "@calcom/trpc/server/trpc";
 
 import { getTemporaryOrgRedirect } from "@lib/getTemporaryOrgRedirect";
 
@@ -40,7 +42,6 @@ type Props = {
   bookingUid: string | null;
   user: string;
   slug: string;
-  trpcState: DehydratedState;
   isBrandingHidden: boolean;
   isSEOIndexable: boolean | null;
   themeBasis: null | string;
@@ -103,8 +104,6 @@ async function getDynamicGroupPageProps(context: GetServerSidePropsContext) {
   const { user: usernames, type: slug } = paramsSchema.parse(context.params);
   const { rescheduleUid, bookingUid } = context.query;
 
-  const { ssrInit } = await import("@server/lib/ssr");
-  const ssr = await ssrInit(context);
   const { currentOrgDomain, isValidOrgDomain } = orgDomainConfig(context.req, context.params?.orgSlug);
   const org = isValidOrgDomain ? currentOrgDomain : null;
   if (!org) {
@@ -135,7 +134,10 @@ async function getDynamicGroupPageProps(context: GetServerSidePropsContext) {
 
   // We use this to both prefetch the query on the server,
   // as well as to check if the event exist, so we c an show a 404 otherwise.
-  const eventData = await ssr.viewer.public.event.fetch({
+  const trpcContext = await getTRPCContext();
+  const createCaller = createCallerFactory(publicViewerRouter);
+  const caller = createCaller(trpcContext);
+  const eventData = await caller.event({
     username: usernames.join("+"),
     eventSlug: slug,
     org,
@@ -171,7 +173,6 @@ async function getDynamicGroupPageProps(context: GetServerSidePropsContext) {
     },
     user: usernames.join("+"),
     slug,
-    trpcState: ssr.dehydrate(),
     isBrandingHidden: false,
     isSEOIndexable: true,
     themeBasis: null,
@@ -215,8 +216,6 @@ async function getUserPageProps(context: GetServerSidePropsContext) {
     }
   }
 
-  const { ssrInit } = await import("@server/lib/ssr");
-  const ssr = await ssrInit(context);
   const [user] = await UserRepository.findUsersByUsername({
     usernameList: [username],
     orgSlug: isValidOrgDomain ? currentOrgDomain : null,
@@ -231,7 +230,10 @@ async function getUserPageProps(context: GetServerSidePropsContext) {
   const org = isValidOrgDomain ? currentOrgDomain : null;
   // We use this to both prefetch the query on the server,
   // as well as to check if the event exist, so we can show a 404 otherwise.
-  const eventData = await ssr.viewer.public.event.fetch({
+  const trpcContext = await getTRPCContext();
+  const createCaller = createCallerFactory(publicViewerRouter);
+  const caller = createCaller(trpcContext);
+  const eventData = await caller.event({
     username,
     eventSlug: slug,
     org,
@@ -270,7 +272,6 @@ async function getUserPageProps(context: GetServerSidePropsContext) {
     },
     user: username,
     slug,
-    trpcState: ssr.dehydrate(),
     isBrandingHidden: user?.hideBranding,
     isSEOIndexable: allowSEOIndexing,
     themeBasis: username,

apps/web/server/lib/[user]/getServerSideProps.ts

@@ -1,4 +1,3 @@
-import type { DehydratedState } from "@tanstack/react-query";
 import type { EmbedProps } from "app/WithEmbedSSR";
 import type { GetServerSideProps } from "next";
 import { encode } from "querystring";
@@ -20,11 +19,8 @@ import type { UserProfile } from "@calcom/types/UserProfile";
 
 import { getTemporaryOrgRedirect } from "@lib/getTemporaryOrgRedirect";
 
-import { ssrInit } from "@server/lib/ssr";
-
 const log = logger.getSubLogger({ prefix: ["[[pages/[user]]]"] });
 type UserPageProps = {
-  trpcState: DehydratedState;
   profile: {
     name: string;
     image: string;
@@ -74,7 +70,6 @@ type UserPageProps = {
 } & EmbedProps;
 
 export const getServerSideProps: GetServerSideProps<UserPageProps> = async (context) => {
-  const ssr = await ssrInit(context);
   const { currentOrgDomain, isValidOrgDomain } = orgDomainConfig(context.req, context.params?.orgSlug);
 
   const usernameList = getUsernameList(context.query.user as string);
@@ -197,7 +192,6 @@ export const getServerSideProps: GetServerSideProps<UserPageProps> = async (cont
       profile,
       // Dynamic group has no theme preference right now. It uses system theme.
       themeBasis: user.username,
-      trpcState: ssr.dehydrate(),
       markdownStrippedBio,
       isOrgSEOIndexable: org?.organizationSettings?.allowSEOIndexing ?? false,
     },

apps/web/server/lib/auth/login/getServerSideProps.tsx

@@ -9,13 +9,11 @@ import { getSafeRedirectUrl } from "@calcom/lib/getSafeRedirectUrl";
 import prisma from "@calcom/prisma";
 
 import { IS_GOOGLE_LOGIN_ENABLED } from "@server/lib/constants";
-import { ssrInit } from "@server/lib/ssr";
 
 export async function getServerSideProps(context: GetServerSidePropsContext) {
   const { req, query } = context;
 
   const session = await getServerSession({ req });
-  const ssr = await ssrInit(context);
 
   const verifyJwt = (jwt: string) => {
     const secret = new TextEncoder().encode(process.env.CALENDSO_ENCRYPTION_KEY);
@@ -91,7 +89,6 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
   return {
     props: {
       csrfToken: await getCsrfToken(context),
-      trpcState: ssr.dehydrate(),
       isGoogleLoginEnabled: IS_GOOGLE_LOGIN_ENABLED,
       isSAMLLoginEnabled,
       samlTenantID,

apps/web/server/lib/auth/sso/[provider]/getServerSideProps.tsx

@@ -12,8 +12,6 @@ import prisma from "@calcom/prisma";
 
 import { asStringOrNull } from "@lib/asStringOrNull";
 
-import { ssrInit } from "@server/lib/ssr";
-
 export const getServerSideProps = async (context: GetServerSidePropsContext) => {
   // get query params and typecast them to string
   // (would be even better to assert them instead of typecasting)
@@ -28,7 +26,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
   const { req } = context;
 
   const session = await getServerSession({ req });
-  const ssr = await ssrInit(context);
+
   const { currentOrgDomain } = orgDomainConfig(context.req);
 
   if (session) {
@@ -93,7 +91,6 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
 
   return {
     props: {
-      trpcState: ssr.dehydrate(),
       provider: providerParam,
       isSAMLLoginEnabled,
       hostedCal,

apps/web/server/lib/setup/getServerSideProps.tsx

@@ -5,12 +5,9 @@ import { getDeploymentKey } from "@calcom/features/ee/deployment/lib/getDeployme
 import prisma from "@calcom/prisma";
 import { UserPermissionRole } from "@calcom/prisma/enums";
 
-import { ssrInit } from "@server/lib/ssr";
-
 export async function getServerSideProps(context: GetServerSidePropsContext) {
   const { req } = context;
 
-  const ssr = await ssrInit(context);
   const userCount = await prisma.user.count();
 
   const session = await getServerSession({ req });
@@ -45,7 +42,6 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
 
   return {
     props: {
-      trpcState: ssr.dehydrate(),
       isFreeLicense,
       userCount,
     },

apps/web/server/lib/ssr.ts

@@ -1,72 +0,0 @@
-import type { GetServerSidePropsContext } from "next";
-import superjson from "superjson";
-
-import { forms } from "@calcom/app-store/routing-forms/trpc/procedures/forms";
-import { getLocale } from "@calcom/features/auth/lib/getLocale";
-import { map } from "@calcom/features/flags/server/procedures/map";
-import { createContext } from "@calcom/trpc/server/createContext";
-import { teamsAndUserProfilesQuery } from "@calcom/trpc/server/routers/loggedInViewer/procedures/teamsAndUserProfilesQuery";
-import { event } from "@calcom/trpc/server/routers/publicViewer/procedures/event";
-import { session } from "@calcom/trpc/server/routers/publicViewer/procedures/session";
-import { get } from "@calcom/trpc/server/routers/viewer/eventTypes/procedures/get";
-import { meRouter } from "@calcom/trpc/server/routers/viewer/me/_router";
-import { hasTeamPlan } from "@calcom/trpc/server/routers/viewer/teams/procedures/hasTeamPlan";
-import { mergeRouters, router } from "@calcom/trpc/server/trpc";
-
-import { createServerSideHelpers } from "@trpc/react-query/server";
-
-// Temporary workaround for OOM issue, import only procedures that are called on the server side
-const routerSlice = router({
-  viewer: mergeRouters(
-    router({
-      me: meRouter,
-      features: router({
-        map,
-      }),
-      public: router({
-        session,
-        event,
-      }),
-      teams: router({
-        hasTeamPlan,
-      }),
-      appRoutingForms: router({
-        forms,
-      }),
-      teamsAndUserProfilesQuery: router({
-        teamsAndUserProfilesQuery,
-      }),
-      eventTypes: router({
-        get,
-      }),
-    })
-  ),
-});
-
-/**
- * Initialize server-side rendering tRPC helpers.
- * Provides a method to prefetch tRPC-queries in a `getServerSideProps`-function.
- * Automatically prefetches i18n based on the passed in `context`-object to prevent i18n-flickering.
- * Make sure to `return { props: { trpcState: ssr.dehydrate() } }` at the end.
- */
-export async function ssrInit(context: GetServerSidePropsContext, options?: { noI18nPreload: boolean }) {
-  const ctx = await createContext(context);
-  const locale = await getLocale(context.req);
-
-  const ssr = createServerSideHelpers({
-    router: routerSlice,
-    transformer: superjson,
-    ctx: { ...ctx, locale },
-  });
-
-  await Promise.allSettled([
-    // So feature flags are available on first render
-    ssr.viewer.features.map.prefetch(),
-    // Provides a better UX to the users who have already upgraded.
-    ssr.viewer.teams.hasTeamPlan.prefetch(),
-    ssr.viewer.public.session.prefetch(),
-    ssr.viewer.me.get.prefetch(),
-  ]);
-
-  return ssr;
-}