Я пытаюсь создать макет, очень похожий на Pinterest с реактивно-виртуализированными компонентами Masonry, WindowScroller и AutoSizer.На самом деле, это не сильно отличается от образца, приведенного на их официальном сайте .Кроме того, я использую nextjs и предпочитаю включать рендеринг на стороне сервера для этого макета.
Для генерации элементов сетки на стороне сервера, согласно документации по виртуализированной реакции, я установил некоторые случайные значения вРеквизиты serverHeight и serverWidth WindowScroller, а также реквизиты defaultHeight и defaultWidth AutoSizer.Однако, поскольку эти значения отличаются от фактической ширины и высоты браузера, сервер и клиент генерируют разное количество элементов сетки при первоначальной визуализации.Это делает несоответствие между сгенерированными сервером и сгенерированными клиентом HTML-разметками, и React выдает следующее предупреждение:
Warning: Did not expect server HTML to contain a <div> in <div>.
Как можно избавиться от этого предупреждения, заставив сервер и клиент генерироватьтакое же количество элементов сетки при начальном рендеринге или инструктировании React просто вносит необходимые изменения, необходимые для сопоставления сгенерированной сервером разметки с сгенерированной клиентом разметкой?