css - 如何在初始服务器端渲染后立即使用 React + NextJS 重新渲染客户端？

Question

我使用 Next.js 和 React 创建了一个网站，并且非常喜欢声明一个 js 变量来定义这样的组件样式:

const foo = {
  fontSize: '12px',
};

在渲染方法中，我这样做:

render() {
  return (
    <div style={foo}>bar</div>
  );
}

使用 ESLint，我可以快速找到未使用的样式/变量(如果引用已消失)并保持代码整洁。因此我做 不是 使用 <style>或 styled-jsx像这样:

render() {
  return (
    <div>
      <style>
        .foo {
          font-size: '12px';
        }
      </style>
      <div className="foo">bar</div>
    </div>
  );
}

问题

仅使用 js 变量而不是 <style> 的问题是我无法应用媒体查询来定位不同的屏幕尺寸，所以我想我可以使用 javascript 解决这个问题:

render() {
  // Bigger font size for smaller devices
  if (windowWidth < 768) foo.fontSize = '24px';

  return (
    <div style={foo}>bar</div>
  );
}

我收到 windowWidth通过此解决方法:Get viewport/window height in ReactJS .只要渲染发生在客户端，这就会很好地工作。这种方法的问题在于 Next.js 将首先在服务器端呈现 View 。此时，窗口/屏幕大小未知，因此 windowWidth = 0 .因此，我认为客户端在从服务器接收到初始渲染页面后必须重新渲染。

问题):

如何强制客户端在服务器初始渲染后立即重新渲染以确定 windowWidth 的值?

这是一个好的做法/解决方案还是会导致性能问题或元素闪烁？

Answer 1

找到了解决方案。服务端渲染后，NextJS 会自动重新渲染客户端。添加一些控制台输出显示:

const foo = {
  fontSize: '12px',
};

渲染方法:

render() {
  if (windowWidth < 768) {
    foo.fontSize = '24px';
    console.log('24px');
  } else {
    console.log('12px');
  }

  return (
    <div style={foo}>bar</div>
  );
}

在小屏幕上查看，这将打印:

12px
24px

然而，按下浏览器的重新加载按钮，尽管样式变量的值明显改变了，但字体大小并没有改变。

解决方案是创建原始对象的副本并对其进行操作:

render() {
  let foo2;
  if (windowWidth < 768) {
    foo2 = Object.assign({}, foo, { fontSize: '24px' });
  } else {
    foo2 = Object.assign({}, foo);
  }

  return (
    <div style={foo2}>bar</div>
  );
}

这将在运行时更改字体大小。但是，当页面加载时，您将在几分之一秒内看到旧的 12px 字体大小，当客户端渲染完成时，它将跳转到 24px 的新字体大小。不确定我是否会从 UX 的 Angular 使用它，但从技术上讲，这是一个可行的解决方案。虽然不是很喜欢:-(