治白癜风最好的医院 http://www.kstejiao.com/m/最近组内在学习next.js,里面涉及到客户端渲染和服务端渲染中使用的不同的技术。我把学习过程中了解到的这些技术点逐个进行分析、比较和总结，咱不废话了，开始吧。CSR（ClientSideRendering）客户端渲染
CSR就是客户端渲染，如常见的SPA所使用的渲染方式，所有的主流框架都支持，或者说：只要是在客户端渲染过程中使用到了JS，数据是通过客户端发送请求获取并渲染的都可以算作客户端渲染。
CSR主要流程图
在Next.js中想要使用客户端渲染也很简单，只要上述的这些API，例如getStaticProps、getServerSideProps...都没使用，数据都是通过在组件内部使用axios或者fetch去发送请求获取并渲染的，那么我们使用的就是纯客户端渲染了，与直接使用Vue或React并无差别。所以其实没必要单独起一个服务来做这些。
以React项目打包编译后的HTML为例
!DOCTYPEhtmlhtmllang="en"headmetacharset="UTF-8"/linkrel="icon"type="image/svg+xml"href="/vite.svg"/metaname="viewport"content="width=device-width,initial-scale=1.0"/titleReactApp/titlescripttype="module"crossoriginsrc="/assets/index-c7e05d32.js"/scriptlinkrel="stylesheet"href="/assets/index-da0c5.css"/headbodydivid="root"/div/body/html可以很清楚的看到页面内容中只有divid="root"/div元素，没有其他的元素，然后通过加载index-c7e05d32.js、index-da0c5.css来执行渲染。整个渲染过程包括，生成DOM节点，注入样式，交互事件绑定，数据获取等等。
优点
服务器压力变轻了，让渲染工作在客户端进行，后端专注于API开发真正的前后端分离，服务器直接返回不加工的html
用户在后续访问操作体验好，（首屏渲染慢）可以将网站做成SPA，可以增量渲染
缺点
不利于SEO，因为搜索引擎不执行JS相关操作，无法获取渲染后的最终html。
首屏渲染时间比较长，因为大部分与网页生命周期相关的任务都由JS处理，这导致页面的首次内容绘制(FCP)和交互时间(TTI)较差。这取决于应用程序的复杂性和大小，这会增加更多的时间。这意味着用户在首次绘制(FP)和FCP之间的时间内几乎看不到任何内容。
SSR（ServerSideRendering）服务端渲染
SSR也就是服务端渲染，是指在服务器端将页面渲染成HTML后再返回给客户端。
SSR主要流程图
在Next.js中，如果启用了SSR，那么每次的每次请求都会重新生成页面。想要开启SSR，我们可以在定义组件的那个文件中暴露一个异步函数getServerSideProps，这个方法类似于getStaticProps，只是执行的时机不同，getServerSideProps会在每次页面接受请求时都调用。
根据getServerSideProps的调用时机，我们可以知道这个方法适用于展示需要经常更新的数据。下面放个官方例子：
exportdefaultfunctionPage({data}){//渲染数据...}//这个方法每次请求时都会调用exportasyncfunctiongetServerSideProps(){//从外部API获取数据constres=awaitfetch(`
