reactjs - 如何在事先不知道设备屏幕尺寸的情况下为响应式应用程序执行 SSR？

Question

我想为我的用户对我的应用进行 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"
  };
`;

Answer 1

太好了，您已经在使用 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 编辑器会在我开始输入时自动帮助我导入它。