NextJS渲染动态项最优方式？getStaticProps与getServerSideProps解析

先把两个方法的本质讲清楚：

• getStaticProps：在项目构建阶段就把数据和页面一起渲染成静态文件，用户访问时直接加载静态资源，速度快，但数据更新后必须重新构建才能同步到页面，适合数据变动频率极低的场景。
• getServerSideProps：每次用户请求页面时，服务器都会重新读取最新数据并渲染页面，能实时展示数据变化，但性能比静态预渲染稍弱，适合像你这种提交表单后需要立刻看到新内容的场景。

针对你的场景优化方案 #

你目前直接导入db.json的方式，只有在构建时会读取一次数据，提交新事件后页面不会自动更新，必须重新构建才能看到新内容。推荐用getServerSideProps实现实时数据展示，以下是具体示例和步骤：

步骤1：替换直接导入逻辑，改用getServerSideProps读取数据 #

原来的代码可能是这样：

// pages/events.js
import events from '../db.json';

export default function EventsPage() {
  return (
    <div>
      {events.map(event => (
        <div key={event.id}>
          <h3>{event.title}</h3>
          <p>{event.date}</p>
        </div>
      ))}
    </div>
  );
}

改成用getServerSideProps的版本：

// pages/events.js
import fs from 'fs';
import path from 'path';

export default function EventsPage({ events }) {
  return (
    <div>
      {events.map(event => (
        <div key={event.id}>
          <h3>{event.title}</h3>
          <p>{event.date}</p>
        </div>
      ))}
    </div>
  );
}

export async function getServerSideProps() {
  // 拼接db.json的绝对路径
  const dbPath = path.join(process.cwd(), 'db.json');
  // 读取文件内容并转成JSON对象
  const dbContent = fs.readFileSync(dbPath, 'utf-8');
  const data = JSON.parse(dbContent);

  return {
    props: {
      events: data.events // 将事件数据传递给页面组件
    }
  };
}

步骤2：验证实时更新效果 #

提交新事件到db.json后，刷新页面就能立刻看到新增的事件，无需重新构建项目。

可选优化：数据更新频率低时用getStaticProps+增量再生 #

如果你的事件数据不是实时变动（比如每天更新一次），可以用getStaticProps搭配revalidate参数，既保留静态页面的性能优势，又能自动更新数据：

export async function getStaticProps() {
  const dbPath = path.join(process.cwd(), 'db.json');
  const dbContent = fs.readFileSync(dbPath, 'utf-8');
  const data = JSON.parse(dbContent);

  return {
    props: {
      events: data.events
    },
    revalidate: 3600 // 每3600秒（1小时）自动重新生成页面，检查数据更新
  };
}

代码简化建议 #

把读取db.json的逻辑抽成工具函数，提升代码复用性：

// utils/db.js
import fs from 'fs';
import path from 'path';

export function getEvents() {
  const dbPath = path.join(process.cwd(), 'db.json');
  const dbContent = fs.readFileSync(dbPath, 'utf-8');
  const data = JSON.parse(dbContent);
  return data.events;
}

然后在页面中导入使用：

// pages/events.js
import { getEvents } from '../utils/db';

export default function EventsPage({ events }) {
  return (
    <div>
      {events.map(event => (
        <div key={event.id}>
          <h3>{event.title}</h3>
          <p>{event.date}</p>
        </div>
      ))}
    </div>
  );
}

export async function getServerSideProps() {
  const events = getEvents();
  return { props: { events } };
}

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