介绍
我正在我的业务中使用 Next.js x Laravel 开发一个应用程序，其中我在 Next.js 中使用了 CSR、SSG 和 SSR。
由于有机会再次思考这些是影响部署方法的深刻的东西，我将总结以下我在本文中学到的东西。
①关于CSR,SSG,SSR
② 关于Next.js的两种部署方式
（部署流程，每种部署方式可以使用什么CSR、SSG、SSR，需要什么样的环境）
*这是我自己研究的总结，但我打算接触实际在业务中使用的know-how，所以我想补充我将来通过实际操作学到的东西。
①关于CSR/SSG/SSR
CSR（客户端渲染）
概述
当有来自浏览器的请求时从服务器
・几乎是空的HTML
・CSS
・内置JavaScript
作为响应返回。
在那之后浏览器端然后使用HTML,CSS,JavaScript 为用户呈现 HTML。
优点（相比SSG、SSR，不是普通的静态页面）
-
对于不关心 SEO、数据更新频繁、不需要静态预渲染（pre-rendered）的页面很有用。
-
易于部署。 （只要静态托管是可能的）
过失
-
由于 JavaScript 是发送到客户端的，所以当应用程序变大时，JavaScript 的数量就会变大，渲染所需的时间，即直到页面显示出来的时间也会增加。
-
此时的显示时间取决于用户使用的设备的处理能力和通信环境。
评论
- Next.js 文档指出，如果您不需要预渲染数据，建议在客户端获取数据这是
getServerSideProps仅在您需要预渲染需要根据请求获取数据的页面时使用。由于服务器必须计算每个请求的结果，到第一个字节的时间 (TTFB)很长，结果只能由 CDN 使用标头缓存（可能需要额外配置）。如果您不需要预渲染数据，客户端您应该考虑使用
数据获取：getServerSideProps | Next.js
- 还建议使用
SWR库进行客户端数据获取。Next.js 背后的团队是驻波比我创建了一个用于获取数据的 React hooks 库。如果要在客户端获取数据，请使用此我强烈推荐它。
数据获取：客户端 | Next.js固态硬盘（服务器端渲染）
概述
当有来自浏览器的请求时，在服务器端动态生成 HTML 并将渲染的 HTML 作为响应返回。
换句话说，页面逻辑和渲染是在 CSR 中的客户端（浏览器）上完成的，而在 SSR 中，它在
Node.js的服务器上运行。这可以弥补上述企业社会责任的缺点。
优点
- 与企业社会责任相比
避免了向客户端发送大量 JavaScript 的问题。 （与用户环境无关）
在浏览器中接收呈现的 HTML所以它在搜索引擎优化方面也很强大。
- 与 SSG 相比
它可以处理数据的频繁更新。
过失
部署需要一个可以执行**SSR**的环境（Node.js）。
由于对于来自用户的每个请求都在服务器端进行计算，因此服务器端可能会变得很重。
SSG（静态站点生成器）
概述
部署时（在构建时），提前渲染并生成嵌入必要数据的 HTML。
当有来自用户的请求时，已经生成的 HTML 作为来自服务器的响应返回。
优点
与CSR和SSR不同，渲染不是根据用户的要求在现场进行的，所以性能很好。
易于部署。 (您只需要静态托管)
过失
- 在网页上反映数据更新需要重建因此，它不适合更新频繁的网站。
评论
与每次用户请求时从应用服务器返回预先生成的 HTML 不同，将 HTML 文件缓存放置在 CDN 上并从靠近每个用户的 CDN 返回该缓存可以更有效地使用 SSG。
*
Vercel默认有一个名为Vercel Edge Network的 CDN。（2）Next.js的两种部署方式
部署 Next.js 创建的应用程序有两种方法。
（1）部署到SSR环境（Node.js）
(2)静态输出静态文件和主机(1)部署到 SSR 环境 (Node.js)
Next.js 文档指出
・Vercel（官方推荐）
・Node.js 服务器
・码头工人形象介绍了三种方法。
部署过程
粗略总结下Next.js官方文档中描述的三种方法。
[对于维塞尔]
- 将源代码部署到 Vercel。
- Vercel 自动检测 Next.js，执行
next build，并进行部署。[对于 Node.js 服务器]
- 将源代码部署到服务器并运行
next build。
（这会优化 HTML、CSS 和 JS 并将它们输出到.next文件夹。）2、执行
next start启动Node.js服务器。[对于 Docker 映像]
准备一个 Dockerfile。
构建 Docker 映像。 （此时指示
Dockerfile执行next build）部署到可以部署容器的环境，启动容器。
关于需要部署的文件
官方文档中介绍的上述过程似乎部署了所有 Next.js 源代码。
但是，由于
.next是通过运行next build创建的针对部署优化的目录，所以实际部署只需要以下文件，不需要部署所有的源代码，可想而知。・
.next
・node_modules
・package.json
(・.env) *如果浏览器端没有使用环境变量，则不需要。
(・public) *如果部署不需要图像，则不需要。（当我通过在已经部署在 Node.js 环境中的应用程序中仅部署上述文件和文件夹来检查操作时，它可以正常工作。）
为了尽可能降低风险，我认为最好只在服务器上部署必要的文件，但我没有接触到实际使用的know-how，所以我想知道各个公司是如何操作的. 我想知道......
你可以做什么
企业社会责任,SSG,SSR你可以做任何
*我想说“您可以充分利用Next.js的功能”，但本文不涉及它。中断服务（增量静态再生)至全力支持截至 2022 年 3 月 29 日，只有
Vercel和Netlify正在这样做。
（可以部署在其他托管服务上，但是不支持吗？我这里学习还欠缺。）关于部署环境
总之，你需要一个
Node.js的执行环境，但具体一点，
VercelNode.js服务器- 可以部署容器的环境（部署
Node.js容器）这意味着有三种方式。
Vercel 被省略，因为它是相同的。
- Node.js 服务器
Next.js 文档说：
Next.js 可以部署在任何支持 Node.js 的托管服务提供商上。例如，AWSEC2或者数字海洋水滴是。
部署 | Next.js
- 可以部署容器的环境
这也是从 Next.js 文档中引用的。
Next.js 是 Docker您可以部署到任何支持容器的托管服务提供商。这种方法Kubernetes或者HashiCorp Nomad它可以在部署到容器编排器时使用，例如，或在任何云提供商的单个节点内运行。
部署 | Next.js(2) 静态托管
Next.js 文档说：
next exportNext.js 您可以将应用程序导出为静态 HTML。这可以独立运行而无需 Node.js 服务器。
我是高级功能：静态 HTML 导出 | Next.js部署过程
所需步骤如下。
在
next build之后执行next export生成.out目录将
.out目录部署到具有静态托管的服务器*通过下面文章中的方法，可以很方便的查看静态HTML在本地环境下的运行情况。
Next.js 静态站点生成 (SSG) 的确认 - Waku Waku 银行
如何使用 Next.js 在本地检查静态 HTML 导出的应用程序 - Qiita
你可以做什么
CSR,SSG,SSR,企业社会责任什么时候SSG也可以与静态托管一起使用。
不允许 SSR.
部署环境
您所需要的只是静态托管。
当我阅读各种部署文章时，具体使用了以下平台。
・网络化
・AWS Amplify 控制台
・火力基地托管
・GitHub页面
・亚马逊S3最后
如果你再次阅读 Next.js 文档，
如果您不需要预渲染数据，请执行 CSR 而不是 SSR
・使用名为 SWR 的库在客户端获取数据
有些事情我不知道，比如被推荐。
还
・如果您不使用 SSR，您可以使用仅具有静态托管功能的 Web 服务器进行部署。
・Next.js 还推荐 CSR 而不是 SSR，除非是最低要求
考虑到这一点，我认为选择使用 SSR 的情况会少得多。
我了解到CSR/SSG/SSR之间的区别仅仅是在客户端渲染还是在服务器端渲染，不仅仅是性能方面，还有如何部署以及随之而来的运营成本，我想继续研究。
参考文章
原创声明：本文系作者授权爱码网发表，未经许可，不得转载;
原文地址：https://www.likecs.com/show-308629801.html