11、Next.js与REST、GraphQL API开发指南

Next.js与REST、GraphQL API开发指南

1. Next.js客户端渲染与静态HTML导出

在Next.js开发中，客户端渲染（CSR）是一种重要的渲染方式。以下是一个客户端渲染页面 page/names-csr.tsx 的示例代码：

};
export default NamesCSR;

此代码与之前的示例有显著不同，它导入了 useState 和 useEffect 钩子。 useEffect 钩子会在页面可用后获取数据，当 fetchNames 函数返回数据时，使用 useState 钩子和响应式数据状态变量更新浏览器DOM。需要注意的是，不能将 useEffect 钩子声明为异步函数，因为它返回 undefined 或一个函数，而异步函数返回一个Promise，这会导致TSC报错。为避免此问题，需将 await 调用包装在异步函数 fetchData 中，然后调用该函数。

当访问 http://localhost:3000/names-csr 时，可能会看到一个白色闪烁，这是页面在等待异步API请求。为更好地理解不同的渲染类型，可以修改本节中每个示例的代码，使用 https://www.usemodernfull