"use server";

import _ from "lodash";
import "server-only";
import en from "./en.json" assert { type: "json" };
import { headers } from "next/headers";
import { getLocale } from "@/lib/utils";
import { locales } from "@/constants/i18n";

export const getDictionary = async () => {
  const locale = await headers().then(headersVal => {
    const nextUrl = headersVal.get('x-next-url')
    if(!nextUrl) return getLocale(headersVal)
    
    const pathname = new URL(nextUrl).pathname
    const localeInPathName = locales.find(
        (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
      );

    return localeInPathName

  })

  const defaultLocale = await import("./en.json").then(
    (module) => module.default
  );
  const targetLocale = await import(`./${String(locale)}.json`).then(
    (module) => module.default
  );

  return _.merge(defaultLocale, targetLocale) as typeof en;
};

why is targetLocale still cached even though the locale is changed? I tried console.log both targetLocale as well as locale, locale gets changed but not targetLocale!!!!