这是我参与「第五届青训营」伴学笔记创作活动的第 8 天，今天学习了 Next.js 相关的基础知识，比如 CSR (客户端渲染) 和 SSR (服务端渲染) 的区别以及它们的优势和缺点，还有 Next.js 是什么、如何使用 Next.js 等。
静态站点生成 SSG
静态站点生成 (SSG, static site generator) 是指由服务器返回纯静态的 HTML 内容。HTML 内容在编译时就已经渲染好了，无需服务器或者客户端再次渲染。
静态站点生成 SSG 的缺点在于无法根据不同用户动态生成内容。
CSR 和 SSR
为了解决静态站点生成 SSG 的问题，出现了两种生成动态网页的方法， 分别是客户端渲染 CSR 和服务端渲染 SSR 。
客户端渲染 CSR
客户端渲染 (CSR, Client Site Rendering) 是指页面初始未加载 HTML 内容，而是在 JavaScript 文件加载完成后，由浏览器进行 HTML 内容的渲染，动态生成页面。现在流行的 Vue 和 React 这类单页面应用 (SPA, single page web application) 就是使用了 CSR 客户端渲染完成工作的。
单页面应用是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的 Web 应用程序。单页面应用具有更好的用户体验，用户无需刷新整个页面就可以切换页面的内容。
但是客户端渲染和单页面也给搜索引擎优化 (SEO) 带来了困难，因为搜索引擎使用的爬虫难以正确解析单页面应用的内容。
客户端渲染同时也会给客户端应用程序带来压力，通常会使得页面首屏加载速度较慢，而且用户不能一次性看到加载完整的首屏内容，需要浏览器动态渲染各个组件。
服务端渲染 SSR
服务端渲染 (SSR, Server Site Rendering) 是指后端返回的页面为已经加载好 HTML 内容，浏览器无需借助 JavaScript 就能完整展示首屏内容，动态生成页面的工作由后端服务器完成。早期的 JSP 和 PHP 就是使用了 SSR 服务端渲染完成工作的。
服务端渲染 SSR 在用户切换页面时会重新加载整个页面，用户体验不如客户端渲染 CSR
服务端渲染 SSR 代码耦合度高，会使模板语言 (HTML等) 中混杂编程语言 (PHP等)，使得代码变得难以维护。
服务端渲染 SSR 在用户大量请求时会对服务器产生较大的压力。
同构渲染
为了解决客户端渲染 CSR 和服务端渲染 SSR 两者的缺点，出现了同构渲染。同构渲染将前后端一体化，一套代码既可以在服务端运行也可以在客户端运行，这样在首次加载时采用服务端渲染，后续加载使用客户端渲染可以同时解决客户端渲染 CSR 和服务端渲染 SSR 两者的缺点。
Next.js
Next.js 是一款 React 开发框架，通过 Next.js 框架开发的 React 应用无需配置就可以如服务端渲染 SSR、编译时渲染 SSG 等功能。
Next.js 支持在一个项目中同时支持构建时预渲染页面 SSG 和请求时渲染页面 SSR。
