Next.js Discord

Discord Forum

Static Site still trying to fetch() force-cache calls when deployed

Unanswered
Paper wasp posted this in #help-forum
Open in Discord
Avatar
Paper waspOP
Hey folks, I'm on Next13 and I've got a route that searches my /blog/ pages for frontmatter data and returns them so I can render a preview widget.

From what I've been reading I'm supposed to use force-cache in conjunction with fetch and that will memoize the result of the call at build time.

Whenever I deploy the application (using export for static gen) the app is still trying to make a call to localhost which is failing. I would expect this to just return the value cached at build time.

I'm fairly new so any help appreciated as to the best way to do this for a static site.

Where the call is being made:
async function get_posts(){
    let res = await fetch("http://localhost:3000/api/blog", {cache: 'force-cache'}); //TODO: SET THIS TO FORCE-CACHE
    if(!res.ok) {
        throw new Error('Failed to fetch Posts');
    }

    return res.json();
}


The API Route and method

import { getSortedPosts } from "@/lib/blog_lib";

export async function GET(){
    const allPostsData: any = getSortedPosts();

    return new Response(JSON.stringify(allPostsData));
}

getSortedPosts
const postsDirectory = path.join(process.cwd(), 'src/app/blog')

export function getSortedPosts() {
    const posts = fs.readdirSync(postsDirectory, {withFileTypes: true});
    const mappedPosts = posts.filter(dirent => {
        return dirent.isDirectory();
    }).map((dirent => {
        const finalDir = path.join(postsDirectory, dirent.name);
        const fileContents = fs.readFileSync(path.join(finalDir, "page.mdx"));
        const sections = fileContents.toString().split("export const meta = ");
        const meta = sections[1].split("//END META")[0];
        var metadata = JSON.parse(meta);
        console.log(meta);
        return {
            id: dirent.name,
            ...metadata
        }
    }));

    return mappedPosts.sort((a, b) => {
        if (a.date <= b.date) {
            return 1;
        }else{
            return -1;
        }
    })
}

Next Config:
```ts
const withMDX = require('@next/mdx')()

/ @type {import('next').NextConfig} */
const nextConfig = {
// Configure `pageExtensions`` to include MDX files
pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
// Optionally, add any other Next.js config below
eslint: {
ignoreDuringBuilds: true,
},

output: 'export',
images: { unoptimized: true }
}

module.exports = withMDX(nextConfig)
```

0 Replies