如何使用GetServerSideProps控制前端渲染内容实现按时间展示指定文本

核心逻辑是把时间判断、内容筛选逻辑全部放在服务端的getServerSideProps中执行，仅将最终需要渲染的内容通过props传递给页面组件，这样返回给前端的HTML只会包含待展示的内容，不会残留需要隐藏的文本。

代码示例 #

1. 编写getServerSideProps逻辑 #

export async function getServerSideProps() {
  // 定义指定的时间节点，可根据需求自行修改
  const targetTimestamp = new Date('2024-12-31T23:59:59').getTime()
  // 取服务器当前时间作为判断基准，避免客户端本地时间篡改
  const currentTimestamp = Date.now()

  let showContent = ''
  if (currentTimestamp < targetTimestamp) {
    // 指定时间前需要展示的内容
    showContent = '第一阶段专属文本内容'
  } else {
    // 指定时间后需要展示的内容
    showContent = '第二阶段专属文本内容'
  }

  return {
    props: {
      showContent
    }
  }
}

2. 页面组件直接渲染传入的props #

export default function TimeControlPage({ showContent }) {
  return (
    <div className="text-area">
      {/* 无需在组件内做任何条件判断，直接渲染拿到的内容即可 */}
      {showContent}
    </div>
  )
}

注意事项 #

• 必须使用服务器时间做判断基准，不要依赖客户端本地时间，避免用户修改本地时间获取未到展示期的内容
• 如果待渲染的是复杂组件结构，可在getServerSideProps中返回内容类型标识，组件内仅根据标识做对应渲染即可，核心是所有条件判断逻辑都提前在服务端完成，不要在前端留存未筛选的全量内容
• 该方案返回的HTML源码中只会包含当前需要展示的内容，完全不会出现需要隐藏的另一部分文本，不会有信息泄露的问题

内容的提问来源于stack exchange，提问作者Patrick Yen