How to solve "Large Page Data" issue with Nextjs?

[nonoumasy]

I get this error for my site https://history-maps.com/ :
Warning: data for page "/" is 1.05 MB which exceeds the threshold of 128 kB, this amount of data can reduce performance.

I'm getting this on my main index page as well as my dynamic pages. Note: I'm using getStaticProps for both as a fetching method.
As I add more data, the performance has gone down and I'm now getting that error message. Are there solutions with Nextjs to solve this? The only thing it recommends is to:

Reduce the amount of data returned from getStaticProps, getServerSideProps, or getInitialProps to only the essential data to render the page.

I'm not sure how to do that since the largest load (i suspect) are the images being loaded. If you visit my site, the images are a key component in the UX. Are there other methods or solutions to solve this problem?

Also, this has an adverse effect on the Lighthouse performance. I'm currently getting a 62 on mobile. Strangely enough, I'm getting high 90s on Desktop so I'm not sure whats going on there.

[ijjk]

Hi, this warning is specific to the amount of data returned in the props object from getStaticProps, images shouldn't affect this unless they are being serialized and returned inside of props.

To reduce this you should only return the data that is needed to hydrate the page (first render) any additional data can be loaded client-side or on client-transition.

[nonoumasy]

Thanks for replying.
When you say 'serializing', what do you mean exactly?
I am returning the data into props which includes some metadata like title, and images are part of the data since that is what's being rendered on the homepage : https://history-maps.com/
There are atleast 150 items in this data, and each item contains atleast 1 image, so that's atleast 150 images being passed to props. Is that what's causing the bloat? There are some metadata that I'm not using for the homepage but these are mostly text.

`export const getStaticProps = async () => {
const res = await getStories() // gets data from Firestore
const data = res.map((item) => JSON.stringify(item))

return {
props: { data },
revalidate: 60 * 60 * 24,
}
}`

Is there a way I can check what's causing the 1mb error? Can I run a npm run build and look at a certain file?
Is this simply that my data is too big and I have to rethink on how to design each page?

[gaston-flores]

I think @ijjk was asking if your images are encoded as part of data passed as props, but it looks like you are using a third party host.

The metadata you mentioned seems to be the culpruit. Open your site and run this on the console:

document.getElementById("__NEXT_DATA__").text

This will show you the data that you are passing as props to the page. In my browser that comes around to 1.3MB of text 🤯

You may want to transform that data before you return it in getStaticProps to keep only the values you need on this page.

(BTW, your site is pretty cool!)

[nonoumasy]

Thanks @gaston-flores . That was it.
Yes, I'm using Firestore as a data store. I reduced the data to essentials before passing it as data as props and reduced it from 1mb to 44kb. Thanks for the insight and that one-liner to check the size.
I was able to increase my mobile lighthouse score from around 60 to around 80 now. Desktop before was 95 so that didn't change much. I'm still hoping to increase the mobile score ot high 90s as well.

cheers

[ryparker]

The metadata you mentioned seems to be the culpruit. Open your site and run this on the console:

	document.getElementById("__NEXT_DATA__").text

This is very helpful and should be added to the docs. At least on this page: https://nextjs.org/docs/messages/large-page-data.

PR here

[nonoumasy]

thanks @ryparker
the size is down to 46kb now on the homepage.
My site is still not getting good performance metrics on page speed insights. so its probably another issue, but the original post issue has been solved.

[maifumei]

Hey buddy,It seems that you have already resolved it. my page is like your situation: Warning: The data on the page "/product/[slug]" (path "/product/uyouyou lower sea pattern flower series printed Curtain fabric 203003") is 158 kB, exceeding the threshold of 128 kB, and this amount of data may reduce performance. Can you please advise me on a careful optimization plan, dear? How can I optimize it so that the page size can be reduced to below 100kb?

product/index.js

import { useRef, useState } from "react";
import { AiOutlineClose } from "react-icons/ai";
import { MdMarkEmailUnread } from "react-icons/md";
import { RiWhatsappFill } from "react-icons/ri";
import { useRouter } from "next/router";
import Link from "next/link";

import emailjs from "@emailjs/browser";
import ProductDetailsCarousel from "@/components/ProductDetailsCarousel";
import Wrapper from "@/components/wrapper";
import { fetchDataFromApi } from "@/utils/api";

const ProductDetails = ({ product, products, whatsapp }) => {
	const [email, setEmail] = useState("");
	const [message, setMessage] = useState("");
	const [showForm, setShowForm] = useState(false);
	const router = useRouter();
	const formRef = useRef();
	const handleCloseForm = () => setShowForm(false);
	const handleEmail = (e) => {
		e.preventDefault();

		// service id, template id, public key
		emailjs
			.sendForm(
				"service_r1y667c",
				"template_xawu22j",
				formRef.current,
				"IchOEgLgYWg5ok6ar"
			)
			.then(
				() => {
					toast.success(
						"Email has been sent succcessfully to your email " + email
					);
					handleCloseForm();
				},
				(err) => {
					toast.error(err.text);
				}
			);
	};
	const p = product?.data?.[0]?.attributes;
	return (
		<div className="w-full md:py-20 relative">
			<Wrapper>
				<div className="flex flex-col lg:flex-row md:px-10 md:gap-[50px] lg:gap-[20px] ">
					{/* left colum start */}
					<div className="w-full md:w-auto flex-[1.5] max-[350px] lg:max-w-full mx-auto lg:mx-0">
						<ProductDetailsCarousel images={p.image.data} />
					</div>

					{/* left colum end */}

					{/* right colum start*/}
					<div className="flex-[1] py-3">
						<div></div>
						{/* product title */}
						<div className="text-sm md:text-xl lg:text-2xl font-semibold mb-2">
							{p.name}
						</div>

						{/* product subtitle */}
						<div className="text-xs md:text-md text-gray-400  mb-5">
							{p.subtitle}
						</div>
						{/* product desc */}
						{/* product Weight(Grams) */}
						<div className="py-4">
							<div className="text-xs md:text-md  mb-2">
								<span className="font-bold">Weight(GRAMS):</span> {p.weight}
							</div>
							{/* product height */}
							<div className="text-xs md:text-md   mb-2">
								<span className="font-bold">Composition:</span> {p.composition}
							</div>
							<div className="text-xs md:text-md   mb-2">
								<span className="font-bold">Goods number:</span> {p.procode}
							</div>
						</div>

						<hr />
						{/* product desc */}
						<div className="text-xs md:text-md mt-2 mb-5 py-3">
							{p.description}
						</div>

						{/*Email whatsapp contact start */}
						<div className="flex justify-center items-center gap-20">
							<button
								className="py-4 bg-amber-500 p-4 text-white shadow-md rounded-md flex justify-center items-center gap-2"
								onClick={() => setShowForm(true)}
							>
								<p>
									<MdMarkEmailUnread className="w-6 h-6" />
								</p>
								<p>Email Now</p>
							</button>
							<Link
								href={"https://api.whatsapp.com/send?phone=18758887700"}
								target={"_blank"}
								className="py-4 bg-green-500 p-4 text-white shadow-md rounded-md flex justify-center items-center gap-2"
							>
								<p>
									<RiWhatsappFill className="w-6 h-6" />
								</p>
								<p>Whatsapp</p>
							</Link>
						</div>
						{/*Email whatsapp contact end*/}
					</div>
					{/* right colum end*/}
				</div>
				{/* <RelatedProducts /> */}
				{showForm && (
					<div
						className="absolute m-auto top-0 inset-x-0 left-0 bottom-9 w-full md:w-[480px] h-full flex justify-center items-center z-10"
						onClick={handleCloseForm}
					>
						<div
							className="flex flex-col justify-center items-center bg-white shadow-md rounded-md relative w-full h-[680px]"
							onClick={(e) => e.stopPropagation()}
						>
							<h2 className="text-2xl py-4">Email me</h2>
							<form
								className="flex flex-col justify-center items-center w-full  gap-12 p-2"
								onSubmit={handleEmail}
								ref={formRef}
							>
								<input
									className="w-full py-4 border border-gray-500 p-2"
									type="email"
									placeholder="Your Email"
									name="from_name"
									onChange={(e) => setEmail(e.target.value)}
								/>
								<textarea
									className="w-full py-4 border border-gray-500 p-2"
									type="text"
									placeholder="Message..."
									name="message"
									onChange={(e) => setMessage(e.target.value)}
								/>
								<button
									onClick={() => setShowForm(true)}
									className="w-full py-2 bg-lime-400 text-white"
								>
									Send
								</button>
							</form>
							<AiOutlineClose
								onClick={handleCloseForm}
								className="absolute top-8 right-8 w-6 h-6 text-red-600"
							/>
							<div className=""></div>
						</div>
					</div>
				)}
			</Wrapper>
		</div>
	);
};

export default ProductDetails;

export async function getStaticPaths() {
	const products = await fetchDataFromApi("/api/products?populate=*");
	const paths = products?.data?.map((p) => ({
		params: {
			slug: p.attributes.slug,
		},
	}));

	return {
		paths,
		fallback: false,
	};
}

export async function getStaticProps({ params: { slug } }) {
	const product = await fetchDataFromApi(
		`/api/products?populate=*&filters[slug][$eq]=${slug}`
	);
	const products = await fetchDataFromApi(
		`/api/products?populate=*&[filters][slug][$ne]=${slug}`
	);

	return {
		props: {
			product,
			products,
		},
	};
}

ProductDetailsCarousel.js

import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
import { Carousel } from "react-responsive-carousel";

const ProductDetailsCarousel = ({ images }) => {
	return (
		<div className="text-white text-[20px] w-full max-w-[1360px] mx-auto sticky top-[50px]">
			<Carousel
				infiniteLoop={true}
				showIndicators={false} //显示指标（白色点）
				showStatus={false}
				showArrows={false}
				thumbWidth={60}
				className="productCarousel"
			>
				{images?.map((img) => (
					<img
						fill="true"
						key={img.id}
						src={img.attributes.url}
						alt={img.attributes.name}
					/>
				))}
			</Carousel>
		</div>
	);
};

export default ProductDetailsCarousel;

笔记

[nonoumasy]

Actually, I haven't solved this yet. Some of my pages are over 1mb. I would suggest using next/dynamic to split the bundle. That might help. If you have a lot of content on your page, you need to think of other solution to reduce the data, such pagination and only calling part of your data. If you solve this yourself, do pls let us know.

[acatzk]

This is my suggestion.

To solve this particular problem we need to ensure to reduce the overall render page which means that some part of your content might also render even though user may not see or view it yet. I have a hooks here to to render only the particular section or component when the user tries to scroll in the bottom.

import React, { ComponentProps, ReactNode, useEffect, useRef, useState } from 'react';

type LazyLoadComponentProps = {
  children: ReactNode;
  threshold?: number; // Threshold for loading the component, default is 0
  fallback?: JSX.Element | null; // Fallback component to display while loading
} & ComponentProps<'div'>;

export const LazyLoadComponent = ({
  children,
  threshold = 0,
  fallback = null,
  ...rest
}: LazyLoadComponentProps): JSX.Element => {
  const [isVisible, setIsVisible] = useState<boolean>(false);
  const componentRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting || entry.intersectionRatio > threshold) {
          setIsVisible(true);
          observer.unobserve(entry.target);
        }
      },
      {
        threshold: threshold
      }
    );

    if (componentRef.current) {
      observer.observe(componentRef.current);
    }

    return () => {
      if (componentRef.current) {
        observer.unobserve(componentRef.current);
      }
    };
  }, [threshold]);

  return (
    <div {...rest} ref={componentRef}>
      {isVisible ? children : fallback}
    </div>
  );
};

Please use it with caution

<LazyLoadComponent fallback={<Skeleton />} className={'h-100'}>
  // Component inside here the render only when seen in viewport height
</LazyLoadComponent>