I get this warning on many routes when building the site. The warning is explained on Next.js docs here.
I have deep-dived into this and figured out that the JSON file that is used in the Next.js for SSG is quite big… I wen’t further and analysed the JSON file to see where the big amount of data is and as seen from image below, most of the data is taken by pageProps
, which comes from GraphQL and DatoCMS.
Looking further into pageProps
object I see that most of the data is in the responsiveImage
object(s) used by <Image />
component of the react-datocms
package. At least 50% of all payload.
I would love to reduce this in order to avoid Time to First Byte penalty (TTFB). How are you approaching this?
No-one else experiencing this issue?
Hello @primoz.rome,
Can you show us what you are fetching on getStaticProps in the page issuing this error?
Here is the whole query, but as mentioned, almost half of the data is for the Responsive Image queries:
`
query ProductBySlug($locale: SiteLocale = ${process.env.DEFAULT_SITE_LOCALE}, $eq: String = "") {
product(locale: $locale, filter: {slug: {eq: $eq}}) {
__typename
_allSlugLocales {
locale
value
}
seo: _seoMetaTags {
...metaTagsFragment
}
id
slug
name
title
subtitle
image {
responsiveImage(imgixParams: {auto: format, w: 800}) {
...responsiveImageFragment
}
}
description {
blocks
value
links {
__typename
... on ProductRecord {
id
slug
title
subtitle
}
... on ProductCategoryRecord {
id
slug
name
}
... on SolutionRecord {
id
slug
title
subtitle
}
... on SolutionCategoryRecord {
id
slug
}
... on BlogPostRecord {
id
slug
title,
category {
slug
}
}
... on BlogCategoryRecord {
id
slug
name
}
... on PageRecord {
id
slug
title
}
}
}
category {
__typename
_allSlugLocales {
locale
value
}
name
shortName
slug
}
measurementIcons {
name
image {
url
}
}
highlights {
__typename
id
name
content {
value
links {
__typename
... on ProductRecord {
id
slug
title
subtitle
}
}
}
}
features {
__typename
... on FeatureColumnRecord {
id
anchor
content {
value
links {
__typename
... on ProductRecord {
id
slug
title
subtitle
}
... on ProductCategoryRecord {
id
slug
name
}
... on SolutionRecord {
id
slug
title
subtitle
}
... on SolutionCategoryRecord {
id
slug
}
... on TechSpecRecord {
id
slug
}
... on BlogPostRecord {
id
slug
title,
category {
slug
}
}
... on BlogCategoryRecord {
id
slug
name
}
... on PageRecord {
id
slug
title
}
}
}
contentBottom {
value
blocks {
__typename
id
table
}
links {
__typename
... on TechSpecRecord {
id
slug
product {
slug
}
}
... on ProductRecord {
id
slug
}
}
}
columnsConfiguration
columns {
__typename
id
content {
value
blocks {
__typename
... on ImageBlockRecord {
id
image {
responsiveImage(imgixParams: {auto: format, w: 500}) {
...responsiveImageFragment
}
}
}
}
}
}
}
... on FeatureRecord {
id
anchor
video
content {
value
blocks {
__typename
... on SimpleTableRecord {
id
table
}
}
links {
__typename
... on ProductRecord {
id
slug
title
subtitle
}
... on ProductCategoryRecord {
id
slug
name
}
... on SolutionRecord {
id
slug
title
subtitle
}
... on SolutionCategoryRecord {
id
slug
}
... on BlogPostRecord {
id
slug
title,
category {
slug
}
}
... on BlogCategoryRecord {
id
slug
name
}
... on PageRecord {
id
slug
title
}
}
}
images {
responsiveImage(imgixParams: {auto: format, w: 800}) {
...responsiveImageFragment
}
}
}
... on FeatureTitleRecord {
id
anchor
title
subtitle
colorClass
}
}
software {
title
feature1 {
value
}
feature6 {
value
}
feature5 {
value
}
feature4 {
value
}
feature3 {
value
}
feature2 {
value
}
excerpt {
value
}
image {
responsiveImage(imgixParams: {auto: format, w: 1280}) {
...responsiveImageFragment
}
}
}
testimonials {
author
company
occupation
text
companyLink {
name
logo {
responsiveImage(imgixParams: {auto: format, sat:-100, w: 300}) {
...responsiveImageFragment
}
}
}
}
downloads {
id
name
description
version
language
fileType
asset {
url
}
}
faq {
question
answer
}
relatedProducts {
__typename
slug
title
subtitle
image {
responsiveImage(imgixParams: {auto: format, w: 300}) {
...responsiveImageFragment
}
}
}
subpages {
__typename
... on TechSpecRecord {
id
slug
buttonLabel
}
... on ProductSubpageRecord {
id
buttonLabel
slug
}
}
}
}
${metaTagsFragment}
${responsiveImageFragment}
`,
@primoz.rome
Seems like there isn’t much we can do on our end, as you are fetching a lot of data (more than 128kb) in getStaticProps, as it seems like all product images are being returned from there, so the warning is pretty much warranted, maybe some delay on parts of the request (ones that would require some scrolling to be viewed) and not just request everything on getStaticProps should be the way to go here