使用NextJS getServerSideProps时AgGridReact无法渲染SEO友好HTML的问题

你遇到的问题本质是AgGridReact默认仅在客户端渲染DOM——哪怕你通过getServerSideProps在服务端拿到了数据，表格的HTML结构还是会在浏览器中动态生成，所以查看页面源码时看不到对应的表格内容。而直接输出staff数组到div能在源码显示，是因为这部分是Next.js服务端渲染时直接生成的静态HTML。

要让Ag-Grid在服务端渲染出可被SEO抓取的HTML，需要开启Ag-Grid的SSR支持，具体配置步骤如下：

• 开启Ag-Grid的SSR模式：给AgGridReact组件添加enableSSR和ssrInitialRows属性，前者启用SSR功能，后者确保初始行数据在服务端渲染阶段就被渲染为HTML。
• 确保依赖版本兼容：使用支持SSR的Ag-Grid版本（建议@ag-grid-community/react v27及以上）。
• 可选：限制SSR行数：如果数据量较大，可通过ssrMaxRows属性限制服务端渲染的行数，避免性能损耗。

修改后的代码示例：

export default function Home({ staff }) {
  const gridRef = useRef();
  const defaultColDef = {
    resizable: true,
    sortable: true,
  };

  const [columnDefs] = useState([
    { headerName: 'First Name', field: 'first_name' },
    { headerName: 'Last Name', field: 'last_name' },
    { headerName: 'Job Title', field: 'job_title' },
    { field: 'office' },
    { field: 'email' },
    { field: 'phone' },
  ]);

  return (
    <>
      <main>
        <div style={{ height: '600px' }}>
          <AgGridReact
            id='staff_grid'
            ref={gridRef}
            rowData={staff}
            defaultColDef={defaultColDef}
            columnDefs={columnDefs}
            rowSelection={'single'}
            style={{ height: '100%', width: '100%' }}
            // 新增SSR相关配置
            enableSSR={true}
            ssrInitialRows={true}
            // 可选：数据量大时限制服务端渲染行数
            // ssrMaxRows={100}
          ></AgGridReact>
        </div>
      </main>
    </>
  );
}

export async function getServerSideProps() {
  const staff = [];

  for (let id = 1; id <= 3; id++) {
    staff.push({
      id: id,
      first_name: 'first' + id,
      last_name: 'last' + id,
      email: 'member' + id + '@company.com',
      phone: '12345' + id,
      office: 'place' + id,
      job_title: 'Worker ' + id,
    });
  }

  return { props: { staff } };
}

添加上述配置后，Next.js在服务端渲染页面时，Ag-Grid会根据传入的rowData生成完整的表格HTML结构（包括thead、tbody、行数据等），你就能在页面源码中看到对应的内容了。另外需要注意：Ag-Grid的SSR模式仅渲染初始数据的静态结构，后续的交互操作（如排序、筛选）依然会在客户端处理，不会影响用户体验。

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