不知道有没有小伙伴和我一样，一直想学 Next.js，又不知道从何开始。看官网的 API 和 Demo 根本看不下去，一看就困，而且看完也记不住！
自己去写代码？那更难！ Next.js 和 React 还不太一样，每个页面里都有一些奇怪的函数，比如 getStaticProps 和 getServerSideProps。真是麻烦，但不学吧，似乎又跟不上时代了。毕竟现在投简历，人均 Next.js 服务端渲染啊！
动起来，学 Next.js！
想想还是得加把劲，借着摸鱼和休息的时间，动起来！（不努力怎么让老板开上保时捷呢？）
我不喜欢看视频，因为 B 站视频太长。看官网又无处实操，所以我买了 yayu 的 Next.js 掘金小册。前面主要讲的是 Next.js 基础和官网 API，讲得挺全的，后面一半内容是实操。对于像我这种学习比较茫然，学习完不知道怎么用的人，会比较有帮助。
不过整篇小册如果顺着看下来，还是会感觉枯燥，因为前面很多都是官网 API 的中文版讲解，能实操的不多。新学 Next.js 的小伙伴，我的建议是可以先了解一下 Next.js 服务端渲染是做什么的，大概是怎么做到的。有了基本认知之后，再看小册或者文档，边实操边查文档，有些 API 的作用可能就会豁然开朗了！
当然，晚上睡得好也很重要，毕竟文档还是有些无聊，不然就是豁然醒来了（狗头）。
Next.js 服务端渲染的基本概念
OK，这里简单跟大家分享一下 Next.js 的服务端渲染的基本概念。我会尽可能用通俗的语言讲出来。
首先，我们知道传统的 SPA 单页面应用，不管是 React 还是 Vue，都有一个缺点：首屏加载慢，而且优化的空间也有限。导致这种情况的原因是，传统 SPA 请求的 HTML 是一个空文件，里面通过链接引入单独拆分的 JS 模块。用户需要先加载 HTML，再根据 JS 模块的依赖关系，按顺序请求链接，最后还要请求后端 API、图片资源等等。如果用户网络不太好，这样来来回回请求时间就比较长了。
索性不如换成服务端渲染。在服务器上（可以暂时理解成后端），直接把首屏需要用到的 JS 都加载好，变成模板字符串塞进 HTML 里返回给前端。因为服务端的网络环境和设备性能通常优于客户端，所以加载速度会更快。
懂了这个核心概念，再看看服务器这块。服务器拿到了 HTML，结果后端的 Java 和 Python 大哥一看懵逼了：怎么还需要我用 Node.js 把 React 的语法编译转化到 HTML 里啊？看不懂啊！
所以这块就需要前端自己来处理，也就有了 Web 服务器。注意，Web 服务器也是需要让后端大哥部署到服务器上的，只是代码是前端写的。可以把它看作为一个中间商，不赚差价只转发请求。
Web 服务器会把客户端的请求转发给后端大哥，收到响应之后，把返回的数据和 React 代码编译成 DOM 装进 HTML 里，返回给客户端。而组装的过程 Next.js 已经帮我们做了，我们只需要调用 Next.js 的 getStaticProps、getServerSideProps 等等 API 就好。
渐进式掌握 Next.js API
服务端渲染的核心概念就是上面这些，网上也有更详细的讲解。对于刚开始学习 Next.js 的同学，建议先看懂 SSR 核心概念即可，再把围绕核心概念的 API 跟着做一遍代码实操。
之后跟着去做一个基础的项目，把项目里遇到的问题、看不明白的进行查缺补漏，会比直接抓着官网文档或者小册开始看效率高很多（泪目，我踩过的坑）。
SSR 的项目做完，相信也会有更加清晰的理解，再回过头来看什么 SSG、RSC，也会很好懂咯。
至于 Next.js 很烦人的缓存问题，也可以先简单了解，记不住也无所谓，然后在做项目中去补全。这需要实操才能记住，而且 Next.js 的 15 版本也把缓存做成了手动打开，问题可能会更少。
Next.js 推荐学习顺序
最后和大家分享一下我比较推荐的 Next.js 学习顺序吧。你可以看看 yayu 的 Next.js 开发指南，当然也可以自学，现在网上资料也很多。
-
首先看这 3 节，对服务端渲染有个概念，并且能帮助看懂 Next.js 文件夹目录，因为 Next.js 对文件的命名是有约定的：
- CSR、SSR、SSG 概念
- Next.js 的 App Router 和 Page Router
- 动态路由、路由组、平行路由
- 服务端和客户端组件
-
接下来看看 Web 服务器，也就是前面说到的那个中间商，看看它是怎么干活的：
- 路由处理程序
- 中间件
-
接着了解一下这些内容，过一遍就行，记不住，看不懂真的无所谓：
- RSC 与 SSR 区别
- Suspense 和 Streaming
- Next.js 缓存
到这里基本可以进入开发了。推荐用 Next.js 官方的 Demo 来练手，有详细的操作流程。在过程中遇到不明白的概念再查缺补漏。
完成这个 Demo 后，大家可以试试找一个博客的开源仓库学习，使用 SSG 和 SSR 进行渲染，这类开源的项目也很多。
OK，那今天的分享就差不多到这里了。如果对大家有帮助的话，辛苦点个赞，毕竟我先踩坑了（继续泪目）！
