Reactjs 仅为Next.js应用程序中的服务器端渲染(SSR)导入NPM包
我试图仅在第一次加载页面并且在服务器上进行渲染时使用一个专用NPM模块。我正在使用下面的代码,但是我仍然能够使用构建分析器在client.html中看到我的包Reactjs 仅为Next.js应用程序中的服务器端渲染(SSR)导入NPM包,reactjs,next.js,Reactjs,Next.js,我试图仅在第一次加载页面并且在服务器上进行渲染时使用一个专用NPM模块。我正在使用下面的代码,但是我仍然能够使用构建分析器在client.html中看到我的包 if (typeof window === 'undefined') { const content = await import('@abc/my-npm-package'); return conent(payload); } else { return null; } 很好的问题,我仔细研究了N
if (typeof window === 'undefined') {
const content = await import('@abc/my-npm-package');
return conent(payload);
} else {
return null;
}
很好的问题,我仔细研究了Next.js的代码,发现为了编写只存在于服务器上的代码,您需要使用一些变量,这些变量被传递到
webpack.DefinePlugin
(在构建时,它将用值替换用法,这就是允许树抖动工作的原因)
由此,有一个特殊变量process.browser
,它将仅在浏览器中为true
将代码更改为
if(!process.window){
const content=wait import(“@abc/my npm package”);
返回量(有效载荷);
}否则{
返回null;
}
感谢您的回复,但在分析未定义的.process.window时,我仍然在浏览器块中看到我的包。所以,我按照代码使用了process.browser。process.browser为SSR提供了false,但webpack仍在考虑将其用于浏览器。好吧,如果这是一个false值,这意味着在PROD build中,代码将不存在于捆绑包中(因为树抖动是缩小过程的一部分),但当我运行analyzer时,我可以在client.htmld中看到包您是否在生产模式下运行?Next.js中的Analyzer显示了客户端和服务器的两个结果,请确保您正在查看客户端结果为什么不在getServerSideProps
中导入模块?getServerSideProps中使用的导入不会捆绑到客户端。谢谢,Nico,请尝试您的建议