Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

perf: run ssrInit() at root layout #19460

Merged
merged 6 commits into from
Feb 25, 2025
+25 −38
Merged

perf: run ssrInit() at root layout #19460

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
8cf0db7
wip
hbjORbj Feb 21, 2025
b5c76aa
remove ssrInit unneeded
hbjORbj Feb 21, 2025
385d1d8
refactor
hbjORbj Feb 21, 2025
5224e70
revert unneeded changes
hbjORbj Feb 23, 2025
92d9eb8
Merge remote-tracking branch 'origin/main' into perf/run-ssrInit-at-r…
hbjORbj Feb 23, 2025
42a18e5
update booking-page-wrapper layout
hbjORbj Feb 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 2 additions & 13 deletions apps/web/app/(booking-page-wrapper)/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,13 @@
import { cookies, headers } from "next/headers";

import { buildLegacyCtx } from "@lib/buildLegacyCtx";
import { headers } from "next/headers";

import PageWrapper from "@components/PageWrapperAppDir";

import { ssrInit } from "@server/lib/ssr";

export default async function BookingPageWrapperLayout({ children }: { children: React.ReactNode }) {
const h = headers();
const nonce = h.get("x-nonce") ?? undefined;
const context = buildLegacyCtx(h, cookies(), {}, {});
const ssr = await ssrInit(context);

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

removed

return (
<PageWrapper
isBookingPage={true}
requiresLicense={false}
nonce={nonce}
themeBasis={null}
dehydratedState={ssr.dehydrate()}>
<PageWrapper isBookingPage={true} requiresLicense={false} nonce={nonce} themeBasis={null}>
{children}
</PageWrapper>
);
Expand Down
11 changes: 2 additions & 9 deletions apps/web/app/(use-page-wrapper)/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,13 @@
import { cookies, headers } from "next/headers";

import { buildLegacyCtx } from "@lib/buildLegacyCtx";
import { headers } from "next/headers";

import PageWrapper from "@components/PageWrapperAppDir";

import { ssrInit } from "@server/lib/ssr";

export default async function PageWrapperLayout({ children }: { children: React.ReactNode }) {
const h = headers();
const nonce = h.get("x-nonce") ?? undefined;

const context = buildLegacyCtx(headers(), cookies(), {}, {});
const ssr = await ssrInit(context);

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

removed

return (
<PageWrapper requiresLicense={false} nonce={nonce} themeBasis={null} dehydratedState={ssr.dehydrate()}>
<PageWrapper requiresLicense={false} nonce={nonce} themeBasis={null}>
{children}
</PageWrapper>
);
Expand Down
10 changes: 7 additions & 3 deletions apps/web/app/_trpc/trpc-provider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { type DehydratedState, QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { HydrateClient } from "app/_trpc/HydrateClient";
import { trpc } from "app/_trpc/client";
import { useState } from "react";
import superjson from "superjson";
Expand Down Expand Up @@ -42,9 +43,10 @@ const isTRPCClientError = (cause: unknown): cause is TRPCClientError<AppRouter>

type Props = {
children: React.ReactNode;
dehydratedState: DehydratedState;
};

export const TrpcProvider = ({ children }: Props) => {
export const TrpcProvider = ({ children, dehydratedState }: Props) => {
const [queryClient] = useState(
() =>
new QueryClient({
Expand Down Expand Up @@ -126,7 +128,9 @@ export const TrpcProvider = ({ children }: Props) => {

return (
<trpc.Provider client={trpcClient} queryClient={queryClient}>
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
<QueryClientProvider client={queryClient}>
<HydrateClient state={dehydratedState}>{children}</HydrateClient>
</QueryClientProvider>
</trpc.Provider>
);
};
6 changes: 5 additions & 1 deletion apps/web/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,11 @@ import React from "react";
import { getLocale } from "@calcom/features/auth/lib/getLocale";
import { IconSprites } from "@calcom/ui";

import { buildLegacyCtx } from "@lib/buildLegacyCtx";
import { prepareRootMetadata } from "@lib/metadata";

import { ssrInit } from "@server/lib/ssr";

import "../styles/globals.css";
import { SpeculationRules } from "./SpeculationRules";
import { Providers } from "./providers";
Expand Down Expand Up @@ -56,6 +59,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
? getFallbackProps()
: await getInitialProps(fullUrl);

const ssr = await ssrInit(buildLegacyCtx(h, cookies(), {}, {}));
Copy link
Contributor Author

@hbjORbj hbjORbj Feb 23, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

added here (higher level in hierarchy)

return (
<html
lang={locale}
Expand Down Expand Up @@ -159,7 +163,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
"/insights",
]}
/>
<Providers>{children}</Providers>
<Providers dehydratedState={ssr.dehydrate()}>{children}</Providers>
</body>
</html>
);
Expand Down
9 changes: 7 additions & 2 deletions apps/web/app/providers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,23 @@
"use client";

import { type DehydratedState } from "@tanstack/react-query";
import { TrpcProvider } from "app/_trpc/trpc-provider";
import { SessionProvider } from "next-auth/react";
import CacheProvider from "react-inlinesvg/provider";

import useIsBookingPage from "@lib/hooks/useIsBookingPage";
import PlainChat from "@lib/plain/dynamicProvider";

export function Providers({ children }: { children: React.ReactNode }) {
type ProvidersProps = {
children: React.ReactNode;
dehydratedState: DehydratedState;
};
export function Providers({ children, dehydratedState }: ProvidersProps) {
const isBookingPage = useIsBookingPage();

return (
<SessionProvider>
<TrpcProvider>
<TrpcProvider dehydratedState={dehydratedState}>
{!isBookingPage ? <PlainChat /> : null}
{/* @ts-expect-error FIXME remove this comment when upgrading typescript to v5 */}
<CacheProvider>{children}</CacheProvider>
Expand Down
2 changes: 0 additions & 2 deletions apps/web/components/PageWrapperAppDir.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
"use client";

import { type DehydratedState } from "@tanstack/react-query";
import type { SSRConfig } from "next-i18next";
// import I18nLanguageHandler from "@components/I18nLanguageHandler";
import { usePathname } from "next/navigation";
Expand All @@ -17,7 +16,6 @@ export type PageWrapperProps = Readonly<{
requiresLicense: boolean;
nonce: string | undefined;
themeBasis: string | null;
dehydratedState?: DehydratedState;
isBookingPage?: boolean;
i18n?: SSRConfig;
}>;
Expand Down
10 changes: 2 additions & 8 deletions apps/web/lib/app-providers-app-dir.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { TooltipProvider } from "@radix-ui/react-tooltip";
import { HydrateClient } from "app/_trpc/HydrateClient";
import { dir } from "i18next";
import type { Session } from "next-auth";
import { useSession } from "next-auth/react";
Expand Down Expand Up @@ -281,20 +280,15 @@ const AppProviders = (props: PageWrapperProps) => {
</CustomI18nextProvider>
</EventCollectionProvider>
);
const Hydrated = props.dehydratedState ? (
<HydrateClient state={props.dehydratedState}>{RemainingProviders}</HydrateClient>
) : (
RemainingProviders
);

if (props.isBookingPage || isBookingPage) {
return Hydrated;
return RemainingProviders;
}

return (
<>
<DynamicHelpscoutProvider>
<DynamicPostHogProvider>{Hydrated}</DynamicPostHogProvider>
<DynamicPostHogProvider>{RemainingProviders}</DynamicPostHogProvider>
</DynamicHelpscoutProvider>
</>
);
Expand Down
Loading