Next.js Discord

Discord Forum

Restarted static page generation for / because it took more than 60 seconds

Unanswered
LazeyLove posted this in #help-forum
Open in Discord
I’m building a Next.js website that fetches blog posts from WordPress via GraphQL (WPGraphQL).

The problem is that my site contains hundreds of blog posts. Each time I run next build, it triggers hundreds of GraphQL requests in getStaticPaths and getStaticProps.

As a result, my WordPress server gets overloaded — CPU usage jumps to 90–100%, the build takes a very long time, and sometimes the GraphQL API even times out.

I’ve tried pagination and caching, but I still need to statically generate many blog pages for SEO reasons.
Here my block code

(Tech stack: Next.js 14, WordPress 6.x, WPGraphQL, AWS Lightsail)

2 Replies

here is my code related

export const getStaticPaths: GetStaticPaths = async () => {
const paths = [] as any;
const lang = i18n.defaultLocale;
const catSlug = i18n.blogCats[lang as BlogCatsLocale];
const { data }: { data: { posts: PostFormatToPostConnection } } =
await client.query({
query: QUERY_GET_ALL_POSTS,
variables: {
lang,
categoryName: catSlug
}
});

for (const p of data?.posts?.nodes) {
paths.push({
params: {
slug: ${p?.slug ?? ''}
}
});
}

return {
paths,
fallback: false
};
};

export const getStaticProps: GetStaticProps<{
post: Post;
relatedPosts: PostFormatToPostConnection;
messages: IntlMessages;
locale: string;
}> = async context => {
const lang = ${context?.params?.lang ?? i18n.defaultLocale};
const offset = 0;

const { data }: { data: { postWpml: Post } } = await client.query({
query: QUERY_POST_BY_SLUG,
variables: {
id: context?.params?.slug,
lang
}
});

// get all categories name
const category = data.postWpml?.categories?.nodes
.map(cat => cat.name)
.join(',');

// query all post by categories
const { data: postsData }: { data: { posts: PostFormatToPostConnection } } =
await client.query({
query: QUERY_POSTS_BY_CATEGORY,
variables: {
offset,
limit: configWordpress.limit,
lang: i18n.defaultLocale,
categoryName: category
}
});

return {
// Passed to the page component as props
props: {
post: data.postWpml,
relatedPosts: postsData.posts,
messages: getMessages(lang),
locale: lang
}
};
};
what caching methods have you employed?