lazy-loading-next-js

[utterances-bot]

Lazy Loading in Next.js --- Better Dev

Lazy loading is a great way to make our sites more performant. Next.js comes with next/dynamic to help with lazy loading.

https://www.better.dev/lazy-loading-next-js

[IshanKBG]

Awesome tutorial

[harelpanker]

Hi! Nice one!

One question regard, is it good for SEO? Let's say I want to lazy-load all the sections under the hero section, is it will be good SEO wise?

[chris-sev]

I wouldn't lazy load any content sections. I would use Next's ability to statically generate pages with getStaticPaths() and getStaticProps() and make a site fast that way. Only lazy load things that aren't critical to a page like search boxes, comment boxes, and sidebar things like popular posts.

[Seyolas]

Thanks for sharing. But as i understand it's not possible to use lazy-loading for more than one component at once with using react-cool-inview. Of course im not sure. If there is a way to do that i would love to learn it.

[nezzard]

What abou seo?

[kumbu132]

@Seyolas Perhaps it isn't the cleanest of fixes, but what I did is create a buffer component which can be reused many times. All you do is pass it which component you want to load on scroll.

const LazyLoadBuffer = ({ lazyComponent }) => {
    const { observe, inView } = useInView({
        onEnter: ({ unobserve }) => unobserve(),
    });
    return <div ref={observe}>{inView && lazyComponent}</div>;
};

export default LazyLoadBuffer;

[amitnitjsr]

Suppose if I have 10 component in Home page, then how we can use inView?