Restarted static page generation for / because it took more than 60 seconds
Unanswered
LazeyLove posted this in #help-forum
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)
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:
}
});
}
return {
paths,
fallback: false
};
};
export const getStaticProps: GetStaticProps<{
post: Post;
relatedPosts: PostFormatToPostConnection;
messages: IntlMessages;
locale: string;
}> = async context => {
const lang =
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
}
};
};
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?