Static component in Next.js 13 and /src/app even when I set headers: { Authorization: 'x'} in fetch

Question

I'm using Next.js 13 in its experimental mode with the /src/app folder and I have the following component

@/components/LinkList.jsx

const readLinks = async () => {
  return fetch(process.env.URL, { headers: { Authorization: '' })
    .then(response => response.json());
};

const Footer = async () => {
  const links = await readLinks();
  return (
    <ul>
      <li>Lista</li>
    </ul>
  );
};

export default Footer;

which I use in the RootLayout. @/app/layout.jsx

import Footer from '@/components/common/sections/Footer';
import Header from '@/components/common/sections/Header';
import { metaRootLayout } from '@/utils/meta';
import './globals.css';

export const metadata = metaRootLayout();

export default async function RootLayout({ children }) {
  return (
    <html lang="es">
      <body className="body">
        <Header />
        <main>
          {children}
        </main>
        <Footer />
      </body>
    </html>
  );
};

when executing the command 'npm run build' it generates static routes

Route (app)                                Size     First Load JS
┌ λ /                                      1.8 kB          113 kB
├ ○ /api/thanks                            0 B                0 B
├ ○ /notas                                 1.91 kB        87.4 kB
├ λ /notas/[slug]                          1.11 kB         113 kB
├ ○ /noticias                              1.91 kB        87.4 kB
├ ○ /videos                                1.91 kB        87.4 kB
└ λ /videos/[slug]                         1.11 kB         113 kB

However, if you add a value to Authorization (it's needed to send the token).

const readLinks = async () => {
  return fetch(process.env.URL, { headers: { Authorization: TOKEN })
    .then(response => response.json());
};

It generates Server's routes for me ┌ λ

Is there a way to make static routes persist but using the new Next.js 13 syntax and the app folder?

I tried that when sending an authorization token it generates server routes for me, however, when I remove it from the layout and start using it per page, it no longer affects everything.

score 1 · Accepted Answer · answered Mar 30 '23 at 00:47

I achieved it by adding { cache: 'force-cache' }

const staticData = await fetch(`https://...`, { cache: 'force-cache' });

More information:

export default async function Page() {
  // This request should be cached until manually invalidated.
  // Similar to `getStaticProps`.
  // `force-cache` is the default and can be omitted.
  const staticData = await fetch(`https://...`, { cache: 'force-cache' });

  // This request should be refetched on every request.
  // Similar to `getServerSideProps`.
  const dynamicData = await fetch(`https://...`, { cache: 'no-store' });

  // This request should be cached with a lifetime of 10 seconds.
  // Similar to `getStaticProps` with the `revalidate` option.
  const revalidatedData = await fetch(`https://...`, {
    next: { revalidate: 10 },
  });

  return <div>...</div>;
}

https://beta.nextjs.org/docs/upgrade-guide#step-6-migrating-data-fetching-methods

Static component in Next.js 13 and /src/app even when I set headers: { Authorization: 'x'} in fetch

1 Answers1