我正在尝试对我的React + Next.js应用程序进行SSR。我在渲染动态模块时遇到问题。在window.addEventListener('click', setMousePos);
function setMousePos(e){
let diffX = game.offsetWidth-window.innerWidth;
let diffY = game.offsetHeight-window.innerHeight;
let leftoverX = game.offsetWidth - diffX;
let leftoverY = game.offsetHeight - diffY;
let nOffsetW = game.offsetWidth/2;
let nOffsetH = game.offsetHeight/2;
let mw = mouse.width; //250
let mh = mouse.height; //250
let newMX = (e.clientX*leftoverX/window.innerWidth)+(diffX/2);
let newMY = (e.clientY*leftoverY/window.innerHeight)+(diffY/2);
//let scaleOffsetUseW = leftoverX; let scaleOffsetUseH = leftoverY;
let scaleOffsetUseW = window.innerWidth; let scaleOffsetUseH = window.innerHeight;
//small is window.innerWidth = 908 && window.innerHeight = 656
//big is window.innerWidth = 1346 && window.innerHeight = 907
//need to get a 0.8 dynamic result (based on big)
//let addScaleOffset = 0.8;
let addScaleOffsetRatio = Math.min(leftoverX/leftoverY, leftoverY/leftoverX);
/*let scaleAdjustOffset = 300-Math.max(diffX-diffY, diffY-diffX);
//need to get numbers dynamic -V 6.2 -V 10
if(scaleAdjustOffset > 0){scaleAdjustOffset *= 6.2;}else{scaleAdjustOffset /= 10;}
scaleAdjustOffset /= 100;
// need 3 on small and -0.2 on big - V
let addScaleOffsetAdjust = (Math.max(leftoverX-leftoverY, leftoverY-leftoverX)/2000)+scaleAdjustOffset;*/
//let addScaleOffset = addScaleOffsetRatio+addScaleOffsetAdjust;
//todo: set sizeDiffOffset to dynamic 3 small to -0.2 big
let sizeDiffOffset = 0; //<-- need help setting this var (or a completely different function)
//small is window.innerWidth = 908 && window.innerHeight = 656
//big is window.innerWidth = 1346 && window.innerHeight = 907
// "- V" points at variable that needs change
// the needed numbers are things i've tested by replacing the variable with actual numbers, but need a proper equation to get dynamic
// need 3 on small and -0.2 on big - V
let addScaleOffset = addScaleOffsetRatio+(Math.max(leftoverX-leftoverY, leftoverY-leftoverX)/2000)+sizeDiffOffset;
//need to get a 7.5 dynamic result
//let scaleOffset = 7.5;
let scaleOffset = Math.round(((Math.min(leftoverX/leftoverY, leftoverY/leftoverX)*10)+addScaleOffset)*1000)/1000;
let centerX = ((newMX-nOffsetW)*scaleOffset)-(mw/2);
let centerY = ((newMY-nOffsetH)*scaleOffset)-(mh/2);
let mx = (centerX)+nOffsetW;
let my = (centerY)+nOffsetH;
mouse.object.style.left = mx+'px'; mouse.object.style.top = my+'px';
console.log('');
console.log(e.clientX, e.clientY);
console.log(mx, my);
console.log(centerX, centerY);
//console.log(scaleOffset, addScaleOffset); //need 7.5 scale offset dynamic
//console.log(addScaleOffsetRatio, addScaleOffsetAdjust);
//console.log(scaleAdjustOffset); //need 3 on small and -0.2 on big
console.log(addScaleOffset, sizeDiffOffset);
console.log(scaleOffset);
//console.log(diffX, diffY);
//console.log(leftoverX, leftoverY);
}
中，我正在加载数据并将其放入我的redux-saga。这可以正常工作，但是我的SSR不适用于该数据，因为Im试图使用redux数据而不是组件props渲染组件。
仅当我在getInitialProps中进行api调用并将这些请求通过getInitialProps放入我的组件时，SSR才有效。对我来说，这是奇怪的行为，但是随它去吧。这样做可以，但是现在我又遇到了另一个问题。
所有与我的内容有关的数据也列在页面视图源中。 WTF-为什么在HTML内容中有。也因为这个原因，我的页面源代码视图正在加载几分钟。
是否可以选择不将这些道具放入页面源代码视图中？