Next.js static 服務器端渲染和 Gatsby.js

Question

我想用 Next.js 建立一個網站，並試圖更好地了解他們的Automatic Static Optimization以及您可以使用它的不同方式。
首先， Gatsby.js是一個 static 站點生成器。 當您運行 Gatsby 的build命令時，您會得到一個完全是 static 的/public文件夾，並且可以在不需要某種后端的情況下進行部署。 如果我理解正確，這意味着整個 static 文件夾在第一次請求時被發送到客戶端，從那時起，包括路由在內的一切都發生在客戶端。
另一方面，使用 Next.js 生成 static，這意味着所有頁面在構建時都在服務器上預渲染（如 Gatsby），但應用程序仍然依賴於后端（成熟的服務器或無服務器功能）用於路由。 即，頁面是預渲染的，但與 Gatsby 不同的是，它們是按請求發送給客戶端的，即在導航時。 （我發現這個答案說只有 Next 的初始請求，但是，與 Gatsby 有什么區別？）
我在這一切中感到困惑的是，像 Next 的Static HTML Export的文檔。 他們首先說明

next export允許您將應用程序導出到 static HTML，它可以獨立運行，無需 Node.js 服務器。

所以，聽起來這個選項讓我們能夠像 Gatsby 一樣使用 Next，即完全是 static 文件夾。
但后來他們 go 評論說：

如果您的頁面沒有getInitialProps您可能根本不需要next export ； 由於Automatic Static Optimization ， next build已經足夠了。

但是自動 Static 優化僅指服務器端 static 預渲染，並且next build不會生成像 static 一樣的 Gatsby 文件夾，可以部署為獨立的文件夾。
那么我在這里錯過了什么？ Gatsby.js 和 Next.js 有什么區別？ 蓋茨比能做 Next 做不到的事情嗎？ 我可以在不使用export命令的情況下使用 Next 構建一個完整的 static 站點嗎？
最重要的是，我能否構建和部署一個 Next.js 應用程序，其中一些頁面完全為 static（如 Gatsby），一些頁面僅預渲染（ getStaticProps和getStaticPaths ），以及一些頁面呈現在服務器端（ getServerSideProps ）？

提前非常感謝！

Answer 1

第一個請求是針對<url>/index.html的，因此不會將整個public發送給客戶端。

Gatsby 優化了加載過程，以確保首先加載關鍵資源（HTML、CSS、JS），從而確保最佳的用戶體驗。 從那里它將加載呈現整個頁面所需的剩余資源，並且還將從主頁預取鏈接頁面。 當然，如果您已請求到不同頁面的路由，則客戶端最初會為該頁面獲取 HTML，但隨后的過程將類似。

Gatsby 在這方面仍然比 Next.js 更好（SSG 是 Next 的一個非常新的功能，這是 Gatsby 所做的核心） - 請參閱https://dev.to/notsidney/gatsby-won-against-next-js-in-這頭對頭 37ka 。

在回答您的問題時，是的，您可以使用 Next 進行完整 SSG、部分 SSR/SSG 和完整 SSR。 如果您想要完整的 SSG，則需要進行next export ，否則對於其他模式，您處於標准的 Next 領域，並且 Next 將同時處理 SSG/SSR，因為您運行的是傳統的 web 服務器，可以同時提供 static 內容並執行動態固態硬盤。