如何在不缓存CSS样式的情况下有条件地在Next.js中呈现组件

Question

我对Next.js很陌生，不完全了解缓存的功能。

给出以下简化示例：

呈现组件Test1或Test2的索引页，具体取决于当前分钟是偶数还是奇数：

import { Test2 } from '@src/components/test2'
import React from 'react'
const conditionallyChooseComponent = () => {
const d = new Date()
if (d.getMinutes() % 2 === 0) return <Test1 />
else return <Test2 />
}
export default function Home() {
return <div>{conditionallyChooseComponent()}</div>
}

并具有以下组件。测试1:

export const Test1 = () => {
const d = new Date()
return (
<div className={`${utilStyles.redContainer}`}>
<h1>It's {d.toISOString()} and I'm Test1 component. My background should be red</h1>
</div>
)
}

和测试2:

export const Test2 = () => {
const d = new Date()
return (
<div className={`${utilStyles.blueContainer}`}>
<h1>It's {d.toISOString()} and I'm Test2 component. My background should be blue</h1>
</div>
)
}

这个CSS：

.redContainer {
background-color: red;
}
.blueContainer {
background-color: blue;
}

当代码通过构建和从传输的代码中服务来执行时，背景颜色被缓存。当使用yarn dev运行时，它运行得很好。

以下是意想不到的结果：

用蓝色背景渲染Test1组件的屏幕截图

PS：我使用getInitialProps来防止Next.js缓存该页面中的任何内容，这是一个解决方案，但对于我的真实用例，该选项无效，因为我需要在客户端计算渲染条件，因为它将取决于浏览器的本地日期。

Answer 1

Next将自动缓存所有不依赖外部数据的静态页面，也许您可以实现useEffect来更新日期变量或使用一个简单的状态，因此它应该按照您期望的工作

https://nextjs.org/docs/basic-features/pages#static-无数据生成

Answer 2

要实现这一点，您需要添加一些客户端代码(通过useEffect(，因此React组件每分钟更新一次。有趣的是，这并不像听起来那么简单，甚至Dan Abramov也发表了一篇长文，解释了为什么像setInterval这样的东西可能无法直观地与React(特别是React Hooks(配合使用。

假设您使用Dan在上面的文章中解释的自定义钩子，这应该会起作用：

export default function Home() {
const [date, setDate] = useState(new Date());
useInterval(() => {
// this will update the component's date every second
setDate(new Date()); 
}, 1000);
return <div>{date.getMinutes() % 2 === 0 ? <p>Test 1</p> : <p>Test 2</p>}</div>;
}

注意，您的代码示例只执行conditionallyChooseComponent一次，就在Next尝试在服务器端呈现页面时。