小编Νίκ*_*λος的帖子

首先,这里是我网站的链接,有我要描述的问题:

http://themes.roussounelosweb.gr/cassiopeia/

在Firefox,IE 9,Opera,Safari,iOS中,该网站看起来很完美,并且运行顺畅.问题在于Chrome和Android设备,其中滚动非常滞后,并且使用视差效果的背景图像以笨重的方式制作动画.

我怀疑问题在于背景大小:封面和背景附件:我的图像的固定属性,但我还没有找到解决这个问题的方法.

您可以直接看到它,并在上面的链接上获得更好的主意.请帮忙; 我正在完成这个项目的最后一步,这个错误实际上阻碍了我.

section{

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment:fixed;
overflow:hidden;
}

section.section1{

background-image:url(../img/section1.jpg);
background-repeat:no-repeat;
color:#dedede;
text-shadow:1px 1px 5px rgba(0,0,0,0.8);
position:relative;
padding:20px 0px;
z-index:1;
overflow:hidden;
}

我正在构建一个 Next.js 无头应用程序，通过对 Umbraco 后端的 API 调用来获取数据。我使用getServerSideProps加载每个页面的数据，然后将其作为“数据”传递到功能组件和页面中。

我遇到的问题是，我对网站的页眉/页脚部分有单独的端点，并且在所有页面之间共享。因此，每页调用 3 次（页眉、数据、页脚）是一种耻辱，而且是不好的做法。

为了获取页眉/页脚一次，然后将其保留在多个页面中，同时保持 SSR，可以做什么？（重要的）。我尝试过使用cookie，但它们无法保存这么多数据。下面是一些代码：

页面获取数据：

export async function getServerSideProps({ locale }) {
    const footer = await Fetcher(footerEndPoint, locale);

    return {
        props: {
            locale: locale,
            footer: footer
        }
    }
}

布局

const Layout = (props) => {
    const { children, footer } = props;

    return (
        <>
            <Header />
            <main>
                {children}
            </main>
            <Footer footer={footer} />
        </>
    );
};

export default Layout;