这是我参与「第五届青训营」伴学笔记创作活动的第28天，之前学习的课题是:Next.js实战项目，以下内容就是我做的课堂笔记：

课程目标

在开始正课之前课堂老师说明了本节课的课程目标：具备C端Web应用开发的基本能力；C端是面向公共的，直接服务于用户。提到了C端就会想到B端，B端与C端不同，B端是内部的，面向企业，商家，业务部门，间接服务于用户。

CSR,SSR,SSG

这是三种渲染模式，其中的CSR,SSR都是基于SPA，SPA（single page application）：单页面应用。动态重写当前的页面来与用户交互，而不需要重新加载整个页面。单页应用做到了前后端分离，后端只负责处理数据提供接口，页面逻辑和页面渲染都交给前端（SPA它所需要的资源（HTML CSS JS等），在一次请求中就加载完成，不需刷新的动态加载，首屏时间更长）。下面分开来讲：

CSR

CSR是客户端渲染，名称全称是：Client-Side Rendering，常见的B端Web应用开发模式，前后端分离，服务器压力相对更轻，渲染工作在客户端进行，服务器直接返回不加工的HTML用户在后续访问操作

SSR

SSR（Server-Side Rendering）是服务端渲染。DOM树在服务端生成，而后返回给前端。即当前页面的内容是服务器生成好一次性给到浏览器的进行渲染的。同时SSR不是什么新鲜概念，从原先的JSP/PHP就已经体现了服务器端渲染。这里不得不提一下同构：客户端渲染与服务端渲染的结合，在服务器端执行一次，用于实现服务器端渲染（首屏直出），在客户端再执行一次，用于接管页面交互（绑定事件），核心解决SEOO和首屏渲染慢的问题。采用同构思想的框架：Nuxt.js（基于vue）、Next.js（基于React）。以上是在网络上搜获的，课堂上的是：前后端一体化，一套React代码，在服务器上运行一遍，到达浏览器又运行一遍。前后端都参与渲染，而且首次渲染出的HTML要一样。

SSG

SSG（Static Site Generation）静态站点生成：在构建的时候直接把结果页面输出html到磁盘，每次访问直接把html返回给客户端，相当于一个静态资源。

SSR与SSG他们有一个共同的优势：利于SEO(搜索引擎优化)。浏览器的推广程度，取决于搜索引擎对站点检索的排名，搜索引擎可以理解是一种爬虫，它会爬向指定页面的HTML，并根据用户输入的关键词对页面内容进行排序检索，最终形成我们看到的结果。还有一个优势：更短的首屏时间。

Next.js客户端开发

首先得先知道Next.js是什么？它是一个构建于Node.js之上的开源Web开发框架，支持基于React的Web应用程序功能，例如服务端渲染和生成静态网站。

开发之前得进行初始化：

开发客户端需要用到：getlnitialprops，getServerSideProps，getStaticProps，CSS Modules，Layout。这些东西大家可以上网进行详解（[next讲解]。(www.baidu.com/link?url=Av…

还要注意：文件式路由：Next.js有一个基于页面概念的基于文件系统的路由器。当一个文件被添加到pages目录中时,它会自动作为一个路径可用。需要注意的是：预定义路由优先级更高，预定义路由能直接匹配的路由就不会分发给下面的动态路由。BFF层的文件式路由：BFF，作为服务器构建包，不影响客户端构建bundle体积。相同的router生成方式，不过是作为Api层访问，而不是page。

路由跳转： header修改：

多媒体适配：

Next.js服务端开发

这部分用三张图来解释吧，我是没听懂的了。

小结

上面就是在课堂上学习的内容了，谢谢观看。有点糙，主要是没咋听会。只能靠自己理解和上网查资料了。