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: Optimize i18n instance caching in App Router #18309

Merged
merged 2 commits into from
Dec 23, 2024
+20 −11
Merged

perf: Optimize i18n instance caching in App Router #18309

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bc6ab1c
cache i18n instances
hbjORbj Dec 20, 2024
37b7ea9
Merge remote-tracking branch 'origin/main' into chore/cache-i18n-inst…
hbjORbj Dec 23, 2024
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
41 changes: 21 additions & 20 deletions apps/web/app/_utils.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,30 +9,41 @@ import { truncateOnWord } from "@calcom/lib/text";
//@ts-expect-error no type definitions
import config from "@calcom/web/next-i18next.config";

const create = async (locale: string, ns: string) => {
const i18nInstanceCache: Record<string, any> = {};

const createI18nInstance = async (locale: string, ns: string) => {
const cacheKey = `${locale}-${ns}`;
// Check module-level cache first
if (i18nInstanceCache[cacheKey]) {
return i18nInstanceCache[cacheKey];
}

const { _nextI18Next } = await serverSideTranslations(locale, [ns], config);

const _i18n = i18next.createInstance();
_i18n.init({
await _i18n.init({
lng: locale,
resources: _nextI18Next?.initialI18nStore,
fallbackLng: _nextI18Next?.userConfig?.i18n.defaultLocale,
});

// Cache the instance
i18nInstanceCache[cacheKey] = _i18n;
return _i18n;
};

export const getFixedT = async (locale: string, ns = "common") => {
const i18n = await create(locale, ns);

return i18n.getFixedT(locale, ns);
const getTranslationWithCache = async (locale: string, ns: string = "common") => {
const localeWithFallback = locale ?? "en";
const i18n = await createI18nInstance(localeWithFallback, ns);
return i18n.getFixedT(localeWithFallback, ns);
};

export const getTranslate = async () => {
const headersList = await headers();
// If "x-locale" does not exist in header,
// ensure that config.matcher in middleware includes the page you are testing
const locale = headersList.get("x-locale");
const t = await getFixedT(locale ?? "en");
const t = await getTranslationWithCache(locale ?? "en");
return t;
};

Expand All @@ -44,31 +55,21 @@ export const _generateMetadata = async (
const h = headers();
const canonical = h.get("x-pathname") ?? "";
const locale = h.get("x-locale") ?? "en";

const t = await getFixedT(locale, "common");
const t = await getTranslationWithCache(locale);
Copy link
Contributor

Choose a reason for hiding this comment

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

NIT: we could even replace this with getTranslate()


const title = getTitle(t);
const description = getDescription(t);

const metadataBase = new URL(IS_CALCOM ? "https://cal.com" : WEBAPP_URL);

const image =
SEO_IMG_OGIMG +
constructGenericImage({
title,
description,
});

const image = SEO_IMG_OGIMG + constructGenericImage({ title, description });
const titleSuffix = `| ${APP_NAME}`;
const displayedTitle =
title.includes(titleSuffix) || excludeAppNameFromTitle ? title : `${title} ${titleSuffix}`;

return {
title: title.length === 0 ? APP_NAME : displayedTitle,
description,
alternates: {
canonical,
},
alternates: { canonical },
openGraph: {
description: truncateOnWord(description, 158),
url: canonical,
Expand Down
Loading