NextJS中基于日期查询参数的页面渲染方案咨询

针对你提出的场景——无预设日期列表，用户通过选择日期跳转至动态路径页面并拉取对应数据，以下是几种可行方案的分析：

1. SSR（服务器端渲染）方案 #

这是最直接适配动态未知路径的方案，无需预生成任何静态页面。通过getServerSideProps在每次用户请求时，实时获取路由参数（日期）并调用接口拉取数据，完成服务器端渲染后返回完整HTML页面。

代码示例：

// tasks/[id].js
export async function getServerSideProps(context) {
  const { id: date } = context.params;
  // 生产环境建议使用绝对URL，或直接在服务端调用业务逻辑而非请求API
  const res = await fetch(`https://your-domain.com/api/reports/daily?day=${date}`);
  const data = await res.json();

  return {
    props: { data }
  };
}

export default function DailyTasks({ data }) {
  // 直接通过props拿到数据，无需客户端请求
  return (
    <div>
      {/* 渲染你的任务数据 */}
    </div>
  );
}

优势：首屏有完整内容，SEO友好；数据实时性高，适合需要展示最新数据的场景。

2. ISR（增量静态再生）方案 #

如果想兼顾静态页面的性能优势，同时支持动态日期，可以结合getStaticPaths的fallback: 'blocking'配置：

• 先返回空的paths数组（因为无预设日期），设置fallback: 'blocking'；
• 用户首次访问某个日期路径时，服务器会实时渲染该页面并生成静态文件；
• 后续访问同一日期时直接返回静态缓存，还能通过revalidate参数设置自动更新缓存的时间。

代码示例：

// tasks/[id].js
export async function getStaticPaths() {
  return {
    paths: [],
    fallback: 'blocking'
  };
}

export async function getStaticProps(context) {
  const { id: date } = context.params;
  const res = await fetch(`https://your-domain.com/api/reports/daily?day=${date}`);
  const data = await res.json();

  return {
    props: { data },
    revalidate: 86400 // 24小时后自动重新生成静态文件，可按需调整
  };
}

export default function DailyTasks({ data }) {
  return <div>{/* 渲染数据 */}</div>;
}

优势：首次访问后复用静态缓存，性能优于SSR；适合数据不会频繁变动的场景（比如历史日期报表）。

3. 客户端渲染（useEffect）方案 #

如果对SEO要求不高，或者开发优先级更高，客户端渲染是最简便的方式——在组件挂载后通过useEffect发起请求获取数据。

代码示例：

// tasks/[id].js
import { useEffect, useState } from 'react';
import { useRouter } from 'next/router';

export default function DailyTasks() {
  const router = useRouter();
  const { id: date } = router.query;
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (!date) return;

    const fetchData = async () => {
      const res = await fetch(`/api/reports/daily?day=${date}`);
      const result = await res.json();
      setData(result);
      setLoading(false);
    };

    fetchData();
  }, [date]);

  if (loading) return <div>加载中...</div>;
  if (!data) return <div>未找到该日期的数据</div>;

  return <div>{/* 渲染数据 */}</div>;
}

优势：实现简单，无需服务端逻辑改造；缺点是首屏会有加载状态，搜索引擎可能无法抓取到动态加载的数据。

方案选择建议 #

• 若需SEO友好+首屏快速渲染：优先选SSR或ISR（fallback: 'blocking'）；
• 若数据变动频率低、希望复用缓存：选ISR；
• 若无需SEO、追求开发效率：选客户端渲染。

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