如何在初始服务器端渲染后立即使用 React + NextJS 重新渲染客户端? [英] How to immediately re-render client-side using React + NextJS after initial server-side render?

问题描述

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

const foo = {字体大小:'12px'，};

在渲染方法中我这样做:

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

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

render() {返回 (
<风格>.foo {字体大小:'12px'；}</风格><div className="foo">bar</div></div>);}

问题

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

render() {//较小设备的较大字体if (windowWidth < 768) foo.fontSize = '24px';返回 (<div style={foo}>bar</div>);}

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

问题:

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

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

解决方案

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

const foo = {字体大小:'12px'，};

渲染方法:

render() {if (windowWidth < 768) {foo.fontSize = '24px';控制台.log('24px');} 别的 {控制台.log('12px');}返回 (<div style={foo}>bar</div>);}

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

12px24像素

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

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

render() {让 foo2;if (windowWidth < 768) {foo2 = Object.assign({}, foo, { fontSize: '24px' });} 别的 {foo2 = Object.assign({}, foo);}返回 (<div style={foo2}>bar</div>);}

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

I created a website using Next.js with React and really like to declare a js variable to define component styles like this:

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

And in the render method I do:

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

Using ESLint I can quickly find unused styles/variables (if references are gone) and keep the code clean. Hence I do not use <style> or styled-jsx like this:

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

The problem

The problem with using only js variables instead of <style> is that I cannot apply media queries to target different screen sizes, so I thought I could fix this using javascript:

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

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

I get windowWidth through this workaround: Get viewport/window height in ReactJS. This works quite well as long as the rendering happens on the client. The problem with this approach is that Next.js will render the view first server-side. At this moment in time, the window/screen size is unknown, hence windowWidth = 0. Thus, I think that the client has to re-render after receiving the initial rendered page from the server.

Question(s):

1. How can I force the client to immediately re-render after initial render by the server in order to determine the value of windowWidth?

2. Would this be a good practice/solution or would it lead to performance problems or elements flickering?

解决方案

Found the solution to this. NextJS will automatically re-render client-side after doing server-side render. Adding some console output shows this:

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

Render method:

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

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

Viewing on a small screen, this will print:

12px
24px

However, pressing the browser's reload button, the font size doesn't change although the value of the style variable clearly changed.

The solution was to create a copy of the original object and manipulate that instead:

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

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

This will change the font size during runtime. However, when the page loads you will see the old 12px font size for the fraction of a second and when client-side render has finished, it will jump to the new font size of 24px. Not sure if I will go with this from a UX perspective but technically this is a working solution. Don't really like it though :-(

这篇关于如何在初始服务器端渲染后立即使用 React + NextJS 重新渲染客户端?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！