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

Jump to bottom

useLocale() disables fetch tags cache ( next tags ) #1015

Closed
3 tasks done
islamBelabbes opened this issue Apr 23, 2024 · 1 comment
Closed
3 tasks done

useLocale() disables fetch tags cache ( next tags ) #1015

islamBelabbes opened this issue Apr 23, 2024 · 1 comment
Labels
bug Something isn't working unconfirmed Needs triage.

Comments

@islamBelabbes
Copy link

islamBelabbes commented Apr 23, 2024 •
edited
Loading

Description

hey,
there is a bug ( or maybe expected behavior ) when using useLocale()
it makes all my fetch requests with tag param not cached,
but only the first fetch in that page will be cached with the associated tag

export default async function Home({
  searchParams: { test },
}: {
  searchParams: { test: string };
}) {
  const res = await fetch("https://randomuser.me/api/", {
    next: { tags: ["tag1"] },
  });
  const json = await res.json(); // will be cached

  const res2 = await fetch("https://randomuser.me/api/?new=true", {
    next: { tags: ["tag2"] },
  });
  const json2 = await res2.json(); // will not be cached
  return;
}

one solution is to use unstable_setRequestLocale(locale) before useLocale()

export default async function LocaleLayout({
  children,
  params: { locale },
}: Props) {
  // this line will make fetch tag works
  unstable_setRequestLocale(locale);

  const dir = useTextDirection(locale); // removing this line will make fetch tag works
  return (
    <html lang={locale} dir={dir}>
      <head>
        <title>next-intl-bug-repro-app-router</title>
      </head>
      <body>{children}</body>
    </html>
  );
}

is this expected behavior ?

Verifications

  • I've verified that the problem I'm experiencing isn't covered in the docs.
  • I've searched for similar, existing issues on GitHub and Stack Overflow.
  • I've compared my app to a working example to look for differences.

Mandatory reproduction URL

https://github.com/islamBelabbes/next-intl-bug-repro-app-router

Reproduction description

Steps to reproduce:

  1. Open reproduction
  2. visit homepage
  3. see console log.

Expected behaviour

fetch with next :{tags} option caches both requests
or no request at all since I think useLocale() uses cookie() or header()
@islamBelabbes islamBelabbes added bug Something isn't working unconfirmed Needs triage. labels Apr 23, 2024
@amannn
Copy link
Owner

amannn commented Apr 24, 2024

Thanks for the report, this is a duplicate of #612.

As you've noticed, static rendering avoids this issue (with hopefully #663 being the general solution in this area). Alternatively, you can configure the fetchCache accordingly.

@amannn amannn closed this as completed Apr 24, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working unconfirmed Needs triage.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@amannn @islamBelabbes