React.js和Next.js的差别是什么？圣诞节日历第一天
首先
第一天的圣诞日历
今天的文章将讨论React.js和Next.js之间的区别。
对于那些觉得“嗯，我已经看过这类东西太多次了！”的人，
我也有同感。
我想，作为一个概念，尽可能地贴近初学者会更好。
只需要一种选择：
条件
在解释React和Next之间的区别之前，我们需要先提前说明SPA和MPA、SSR和CSR以及SSG的概念。
什么是SPA？
SPA指的是“单页面应用”。
那什么是单页面应用呢，
就是文字上意思上只有一个页面的应用。
与之相对的对比词是MPA（多页面应用），通过对比来解释会更容易理解。
首先，SPA是指当用户访问页面时（忽略DNS等细节），一次性获取使用的所有页面信息的Web应用程序。
因此，虽然首次访问需要花费时间，但页面切换等时间较短是其特点。
MPA即使页面可能不同，但它仍然会针对每个页面获取所需的信息。无论访问哪个页面，只需花费相应的时间。
作为SPA的例子，可以举出Github和X（之前的Twitter）等。
作为MPA的例子，可能是Amazon等。
传统的网站大部分都是MPA。
SSR CSR SSG是什么？
以下是关于SSR、CSR和SSG的讲解。
它们分别是：
服务器端渲染（SSR）
客户端渲染（CSR）
静态网站生成器（SSG）
接下来我们来看它们分别有什么不同。
超级稀有
将生成的HTML和部分JavaScript从服务器端返回给客户端，然后在客户端浏览器中执行部分JavaScript。由于在服务器端进行了一定程度的渲染，所以受到客户设备性能的影响较小。
企业社会责任
从服务器返回Javascript到客户端并在客户端浏览器上进行渲染。由于全部在客户端进行渲染，所以减轻了服务器的负载。
三星电子
在构建时生成HTML，并在从客户端收到请求时返回预先生成的HTML。它通常用于不需要用户干预的网站，如博客和帮助页面。尽管客户端和服务器的性能都很好，但用途受到一些限制。
※企业推广
这是一个实验性的方法，被称为Partial Pre Rendering，在后面的Next.js中会详细介绍。关于这个，我也还不太清楚，但大致上看起来是将ISR和SSR结合在一起的方法。
React.js是一种JavaScript库
我现在要谈一下一个当前在前端界非常流行的技术——React.js，你们知道它是什么吗？
React的开发公司是Facebook。
它是创造Facebook的那家公司。
它是GAFA中的F部分。
查看React仓库的第一个发布版本，我们可以得知它发布于2013年6月3日。换句话说，这意味着在撰写此内容时，React已经有大约10年的历史了。
所以，React是什么？
React是JavaScript的UI库。
UI库指的是构建用户界面（即浏览器屏幕）的库。
React单独作为SPA（单页面应用程序）运行。
它具有非常优秀的性能和可读性，编写起来也很有趣（主观）。
然而，与其他框架相比，它的学习成本通常被认为很高。
Next.js 是什么？
在前端领域中，与React类似且备受欢迎的Next.js。
開發者
Next.js是由Vercel進行開發的。
Vercel是一家經營web虛擬主機服務的公司。
一般情况下，要想将网站公开，需要获取全球IP地址和域名，然后将服务器设置在全球IP地址上，并将域名和全球IP地址注册到DNS上。
而提供这些服务的就是Web托管服务。
通过使用这些服务，不需要购买域名、获取全球IP地址或准备服务器，就能将网站作为一个整体发布出去。
可以说，这就像出版社一样。自己写的书只有自己能读到，但是如果交给出版社，就能让更多的人看到。
下一个看到的是Next存储库的首个发布版本。
根据发布日期，可以看出该版本于2016年10月28日发布。
在撰写时，开发期约为7年左右。
与React相比，历史短了大约3年。
那么，关于Next.js是什么呢？
Next.js是一个包含了React的Web框架。
在目前的Next.js版本14中，我们同时采用了SSR和CSR。可以在服务器端进行渲染的部分将在服务器端执行，而只能在客户端进行渲染的部分将在客户端执行。这样做既不会在服务器端进行全部渲染，从而降低了服务器的规格要求，又不会在客户端进行全部渲染，从而减轻了客户端的负担。
这有什么不同之处？
在中文中重述以上内容时，只需一个选择。我的回答如下：
那么，有什么不同呢？
当被问到有什么不同时，我感到困惑，因为几乎没有React可以实现而Next却不可以的事情。
那么Next相比于React有什么可以做的呢？
我首先想到的是文件系统路由。Next默认采用了文件系统路由。
例如，创建一个名为app/hoge/page.tsx的文件，此文件将成为访问https://example.com/hoge时返回的元素。
通过这样做，可以直观地将文件与页面关联起来。
React的路由需要开发者以代码的形式进行定义，这对我个人而言相对繁琐。
在Next中，还有许多自己独特的函数和组件。
举个例子，Next中实现了Image组件。
Image组件对应的是HTML中的img元素。
如果没有指定width和height，这个组件会发出警告。
img元素即使没有指定width和height，也不会有特殊的警告。
（在Next中，使用img会导致警告出现）
這可能是為了避免產生CLS（Cumulative Layout Shift），以提高性能。
CLS是指Cumulative Layout Shift的縮寫。
當我們訪問網站時，一開始會看到文字，但圖片的加載需要一些時間對吧？
此時如果不提前為圖片保留足夠的屏幕空間，當圖片加載完成時，布局就會崩壞。
這種情況就稱為布局位移（不僅僅是圖片，而是在整個網站從訪問到完全加載期間發生的布局變化）。關於性能優化，
如果在圖片元素很小的情況下添加了4K圖片，會導致即使看不見的細小區域也以高質量顯示，增加了數據量。
為了避免這種情況，在Next.js中進行了圖片的最優化處理。
參考：https://nextjs.org/docs/pages/api-reference/components/image#loader
如果考虑将Web应用部署到除了Vercel之外的地方，实际上可能会有一些麻烦的事情。
只需传送静态文件即可，因为React是单页面应用（SPA）。
与此不同，由于Next支持SSR，需要一个服务器来进行服务器端渲染。（如果用于SSG，则不需要）
我记得以前有一个以AWS概念为基础的黑客马拉松活动，那次让我思考了如果不使用 Vercel 的情况下该怎么办，我记得当时我遇到了一些困惑。
作为候选方案，我们考虑了使用AWS Amplify和使用S3与Lambda的方法。由于时间不足，我们最终选择了将应用部署到Vercel，这给我们留下了美好的回忆（我们计划不久后重新尝试）。
使用Vercel服务，只需点击几下按钮就可以完成，但是如果要自行构建基础设施，则会感觉相当麻烦。
除此之外，版本更新的速度非常快，对吧。追赶进度很辛苦。（虽然增加了新内容让我很开心）
最后
这次我写了React和Next的区别。虽然话有点长，但我个人认为基本上用Next应该不错的。
只要与vercel结合起来，就可以在公司等企业使用Next，或者说有一些限制或许不存在。
我个人很喜欢并使用Next的文件系统基础路由。听说React也有一些风闻中的库可以实现文件系统基础路由，我很想试一试。
