Стили компонентов не перерисовываются после загрузки страницы на сайте next.js
Я использую хук под названием useScrollPosition для анимации определенных вещей на моих страницах (непрозрачность, высота и т. Д.) В зависимости от положения прокрутки. Проблема в том, что если страница прокручивается вниз, а затем вы обновляете ее, то при загрузке страницы Next.js отображает ее на сервере и не обновляет при попадании на страницу, поэтому позиция прокрутки (и, следовательно, анимированные компоненты) все не так.
Хук предназначен для того, чтобы ничего не делать на сервере, поэтому сервер выполняет рендеринг со значением по умолчанию, после чего он должен корректно обновляться, когда компонент впервые попадает на страницу, но по какой-то причине он этого не делает.
Я установил простую кодовую коробку, чтобы проиллюстрировать это, но включил важный код ниже.
https://codesandbox.io/s/p5y6262qzm
import React, { useState, useEffect } from "react";
const useScrollPosition = () => {
if (typeof window === "undefined") return 500;
// Store the state
const [scrollPos, setScrollPos] = useState(window.pageYOffset);
// On Scroll
const onScroll = () => {
setScrollPos(window.pageYOffset);
};
// Add and remove the window listener
useEffect(() => {
window.addEventListener("scroll", onScroll);
return () => {
window.removeEventListener("scroll", onScroll);
};
});
return scrollPos;
};
export default useScrollPosition;
Как видите, при рендеринге на сервере он устанавливает произвольное значение 500, чтобы я мог продемонстрировать проблему.
import useScrollPosition from "../hooks/useScrollPosition.js";
const boxStyles = {
position: "fixed",
width: "100%",
top: 0,
backgroundColor: "hotpink"
};
const Box = () => {
const scrollPos = useScrollPosition();
const headerHeight = scrollPos;
return (
<div style={{ height: headerHeight, ...boxStyles }}>
Height: {headerHeight}
</div>
);
};
export default Box;
Розовое поле должно отображаться на высоте 500 на сервере, но как только страница попадает в браузер и отображается, ее следует установить на высоту, равную позиции прокрутки, но этого не происходит, пока вы не переместите полосу прокрутки.
Что еще более странно, так это то, что я использую значение прокрутки для обновления высоты поля И для обновления текстовой метки. Запустив песочницу кода, вы увидите, что метка всегда правильная, а высота поля - нет.
Любая помощь будет принята с благодарностью.