延迟加载Next.js中的图像和/或其他形式的React服务器端呈现

Question

我正在使用Next.js进行新项目的服务器端呈现。我有一个基本的项目，路由和运行。我正在使用TypeScript，但我怀疑它很重要。

我想延迟加载图像，但我没有找到任何支持延迟加载图像的组件用于服务器端渲染。

这就是我现在看到的事情 -

服务器端呈现将使用第一次呈现页面的HTML模板响应客户端。

在客户端，一旦加载HTML，图像将根据客户端逻辑开始延迟加载。

我对服务器端渲染非常新，我想我会遇到类似的问题，其他功能应该在客户端运行时呈现。

我试图理解如何分离在服务器端发生的第一次渲染的逻辑和进一步的动态渲染，我想在客户端发生这种情况，就像任何其他单页面应用程序一样。

Answer 1

我认为你看待它的方式是对的，对于客户端代码（比如lazyload）我经常使用componentDidMount生命周期方法。

这样的HOC应该可以解决问题。

function lazyLoadImages(selector = 'img') {
    function createObserver() {
        const elements = document.querySelectorAll(selector);
        const observer = new window.IntersectionObserver((entries, observerChild) => {
            entries.forEach((entry) => {
                if (entry.isIntersecting && entry.target.getAttribute('data-src')) {
                    entry.target.src = entry.target.getAttribute('data-src');
                    entry.target.removeAttribute('data-src');
                    observerChild.unobserve(entry.target);
                }
            });
        }, {});

        Array.prototype.map.call(elements, function(item) {
            observer.observe(item);
        });
    }

    if (!('IntersectionObserver' in window)) {
        const polyfill = document.createElement('script');
        polyfill.src = 'https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver';
        document.head.appendChild(polyfill);

        polyfill.onload = () => {
            createObserver();
        };
        return;
    }

    createObserver();
}

const LazyLoadHOC = (Page) => {
    return class extends React.Component {
        static getInitialProps(ctx) {
            if(Page.getInitialProps)
                return Page.getInitialProps(ctx);
        }

        componentDidMount() {
           lazyLoadImages('img');
        }

        render() {
            return <Page {...this.props}/>
        }

    }
}

现在，您可以使用LazyLoadHOC包装页面，并将src替换为data-src，以用于所有要延迟加载的图像。