译者|布加迪评论家|孙书娟Rendering是将React代码转换成HTML的过程。用户选择的渲染方法取决于正在处理的数据以及用户对性能的关注程度。Next.js中的渲染非常灵活。用户可以静态或增量呈现客户端或服务器端页面。查看这些方法的工作原理以及每种方法的性能。服务器端呈现使用服务器端呈现(SSR)，当用户访问网页时，浏览器会向服务器发送对该页面的请求。服务器从数据库中获取必要的数据（如果需要）并将其与页面内容一起发送到浏览器。然后浏览器将其显示给用户。浏览器为用户单击的每个链接发出此请求，这意味着服务器每次都会处理该请求。这可能会降低网站的性能。但是，服务器端呈现非常适合使用动态数据的页面。每当用户请求时，使用getServerSideProps重建页面。exportdefaultfunctionHome({data}){return(//使用数据);}exportasyncfunctiongetServerSideProps(){//从外部api获取数据constres=awaitfetch('https://.../data')constdata=awaitres.json()//将作为props传递给页面组件当用户直接访问页面时，它会根据请求运行，并使用它返回的属性预呈现页面。当用户通过Next链接访问页面时，浏览器会向运行它的服务器发送请求。在新版本中，用户可以选择在页面或布局中使用动态数据获取来享受服务器端呈现。动态数据获取是一个fetch()请求，它通过将缓存选项设置为“no-store”来选择退出缓存。获取（https://...',{缓存:'无存储'});或者，将revalidate设置为0：fetch(https://...',{next:{revalidate:0}});此功能目前处于测试阶段，请记住这一点。您可以在Next.js13Beta文档中阅读有关动态数据获取的更多信息。当用户需要频繁更新数据或不想预渲染页面时，应使用客户端渲染(CSR)。用户可以在页面级别或组件级别实施CSR。在页面层面，Next.js在运行时获取数据；而在组件级别，它会在页面加载时获取数据。因此，CSR会导致性能下降。使用useEffect()挂钩在客户端呈现页面，如下所示：useState(false)useEffect(()=>{setLoading(true)fetch('/api/get-data').then((res)=>res.json()).then((data)=>{setData(data)setLoading(false)})},[])if(isLoading)return
Loading...
if(!data)返回
Nodata
return(
//使用数据
)}也可以使用SWR钩子。它缓存数据并在数据过时后重新验证数据。从'swr'导入useSWRconstfetcher=(...args)=>fetch(...args).then((res)=>res.json())functionHome(){const{data,error}=useSWR('/api/data',fetcher)if(error)return
加载失败
if(!data)return
Loading...
return(
//使用数据
)}在Next.js13中，用户需要使用客户端组件，为此在文件顶部添加“使用客户端”指令。"useclient";exportdefault()=>{return(
//客户端组件
);};SSR和CSR的区别在于，在SSR中，数据是从服务器上的每个页面请求中获取的；在CSR中，从客户端获取数据。静态站点生成使用静态站点生成(SSG)，页面在构建期间仅获取一次数据。静态生成的页面非常快并且性能良好，因为所有页面都是预先构建的。因此，SSG非常适合包含静态内容的页面，例如销售页面或博客。在Next.js中，用户必须从他们想要静态呈现的页面中导出getStaticProps函数。exportdefaultfunctionHome({data}){return(
//使用数据);}exportasyncfunctiongetStaticProps(){//在构建时从外部API获取数据constres=awaitfetch('https://.../data')constdata=awaitres.json()//会作为props传递给页面组件return{props:{data}}}用户也可以在getStaticProps中查询数据库。exportasyncfunctiongetStaticProps(){//调用函数从数据库中获取数据constdata=awaitgetDataFromDB()return{props:{data}}}在Next.js13中，静态渲染是默认操作，内容被获取并缓存，除非用户关闭了缓存。asyncfunctiongetData(){constres=awaitfetch('https://.../data');returnres.json();}导出默认异步函数Home(){constdata=awaitgetData();return(
//使用数据);}从文档中了解有关Next.js13中静态渲染的更多信息。增量静态生成增量静态生成(ISG)在用户想要使用SSG但又想定期更新内容时很有用。ISG允许用户在构建后的指定时间间隔后创建或更新静态页面。这样，用户不需要重建整个站点，只需重建需要它的页面。ISG保留了SSG的优势，并增加了为用户提供最新内容的好处。ISG非常适合您网站上使用不断变化的数据的页面。例如，用户可以使用ISR呈现博客文章，以便博客在编辑文章或添加新文章后保持更新。要使用ISR，请将revalidate属性添加到页面上的getStaticProps函数。exportasyncfunctiongetStaticProps(){constres=awaitfetch('https://.../data')constdata=awaitres.json()return{props:{data,},revalidate:60}}这里，当请求在60秒后到来时，Next.js将尝试重建页面。下一个请求将产生一个带有更新页面的响应。在Next.js13中，在fetch中使用revalidate，像这样：fetch(https://.../data',{next:{revalidate:60}});用户可以设置时间间隔以最适合其数据的任何时间间隔。如何选择渲染方式？到目前为止，用户已经了解了Next.js中的四种渲染方式：CSR、SSR、SSG和ISG。每种方法适用于不同的情况。CSR适用于需要新数据的页面。SSR适用于使用动态数据的页面，但对SEO更友好。SSG适用于主要包含静态数据的页面，而ISG最适合包含用户希望定期更新数据的页面。SSG和ISG在性能和SEO方面都很出色，因为数据是预取的，用户也可以缓存数据。原标题：UnderstandingNext.jsRenderingMethods:CSR,SSR,SSG,ISR，作者：MaryGathoni
