我想为我的用户对我的应用进行 SSR。
但我的应用程序代码使用 useEffect
来检测用户屏幕宽度的大小,然后才呈现应用程序。
类似于:
App.js
// THE LAYOUT INITIAL STATE IS NULL
useEffect(() => {
// CHECK FOR window.innerWidth AND DECIDE LAYOUT
// UPDATE LAYOUT STATE
});
return(
layout && <AppComponents> // IF THERE IS NO LAYOUT, NOTHING IS RENDERED
);
Component.js
// I SERVE THE LAYOUT THROUGH CONTEXT AND I ACCESS IT INSIDE OF THE COMPONENTS
const layout = useLayout();
return(
layout === "MOBILE" ? ComponentMobile : ComponentDesktop
);
问题
我不能依赖 useEffect
中的代码来在服务器上呈现内容。因此,我需要以某种方式“决定”要在服务器上首次且仅呈现哪种布局。
所以我的选择,至少我到目前为止的选择是:
选项#1
尝试猜测用户的设备屏幕尺寸,并呈现可能不适合其屏幕尺寸的内容。
因为现在,我呈现的 CSS 样式取决于用户的屏幕尺寸。
选项#2
完全转移到媒体查询来处理响应,因此 CSS 将始终相同,并且它会自动适应正在使用的任何屏幕尺寸。
到目前为止,我还没有使用过媒体查询。我所有的布局决定都是在渲染期间做出的,所有组件都根据 App.js 状态决定的布局渲染样式。
处理此问题的最佳方法是什么?有这方面的最佳做法吗?
注意:
我正在使用 styled-components
,所以这基本上就是我所做的:
这是一个粗略的例子,但就是这个想法。
// THIS IS MUCH EASIER TO WRITE THAN A BUNCH OF MEDIA QUERIES (IMO)
const Styled_DIV = styled.div`
font-size: ${props =>
props.layout === "MOBILE" ? "16px"
: props.layout === "TABLET" ? "18px"
: "20px"
};
`;
最佳答案
太好了,您已经在使用 styled-components
。添加媒体查询现在变得微不足道,实际上比您建议的方法更直接 (IMO)。
一般来说,使用 CSS 配置布局比使用 JS 性能更好。对于 SSR,正如您所说,服务器无法使用 JS 和 useEffect
确定屏幕尺寸。
如果你是移动优先,你可以用这样的媒体查询来写上面的逻辑:
const Styled_DIV = styled.div`
font-size: 16px;
@media (min-width: 768px) {
font-size: 18px;
}
@media (min-width: 1024px) {
font-size: 20px;
}
`
我写了一个辅助对象导出,所以我不必记住像素大小甚至媒体查询的语法:
export const size = {
tablet: 768,
desktop: 1024,
}
export const device = {
tablet: `@media (min-width: ${size.tablet}px)`,
desktop: `@media (min-width: ${size.desktop}px)`,
}
所以现在我只需要写:
const Styled_DIV = styled.div`
font-size: 16px;
${device.tablet} {
font-size: 18px;
}
${device.desktop} {
font-size: 20px;
}
`
由于 device
是一个导出对象,我的 VSCode 编辑器会在我开始输入时自动帮助我导入它。
关于reactjs - 如何在事先不知道设备屏幕尺寸的情况下为响应式应用程序执行 SSR?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61678264/