了解没有 SSR 或 SSG 方法的 Next.js 中的预渲染

Question

js 社区，

我目前正在探索 Next.js 及其渲染功能，我对在既不使用 SSR (

getServerSideProps

) 也不使用 SSG (

getStaticProps

/

getStaticPaths

) 方法的情况下预渲染的行为有一些疑问.

1. 如果我在不使用

   getServerSideProps

   或

   getStaticProps

   的情况下创建 Next.js 页面，Next.js 是否仍会预渲染该页面？这与典型的客户端渲染 (CSR) 应用程序有何不同？

// pages/main/index.tsx
export default function MainPage() {

return \<div\>Main Page....\</div\>
}

2. 如果没有这些 SSR 或 SSG 方法，Next.js 构建过程中到底会发生什么？服务器是否仍然将预渲染的 HTML 传递给客户端，而不是 HTML 几乎为空且内容完全在浏览器中渲染的纯 CSR？

3. 与传统的 CSR 方法相比，在此类页面上使用 Next.js 时，在 SEO 和初始页面加载性能方面是否有切实的好处？

4. 最后，即使没有涉及特定的数据获取或动态内容，在页面中包含“虚拟”

   getServerSideProps

   功能以启用SSR是否有必要或有益？

我试图了解 Next.js 如何在不同场景下优化渲染过程的细微差别，以及它如何影响应用程序的性能和 SEO。

感谢您的见解！

在使用 Next.js 时，我构建并部署了一个网站，并在访问该页面时检查了下载的 HTML 文档。根据我的观察，该页面似乎是预先渲染并从服务器传送的。我很好奇我对这个过程的理解和观察是否正确。

Answer 1

1. 如果我创建 Next.js 页面而不使用 getServerSideProps 或 getStaticProps，Next.js 是否仍然预渲染页面？这是 与典型的客户端渲染 (CSR) 应用程序不同吗？

是的！现在默认静态渲染：https://nextjs.org/docs/app/building-your-application/rendering/server-components#static-rendering-default

静态渲染（默认） 使用静态渲染，路线在构建时渲染，或者在数据重新验证后在后台渲染。结果被缓存并可以推送到内容交付网络 (CDN)。这种优化允许您在用户和服务器请求之间共享渲染工作的结果。

是的，它现在呈现在服务器上，而不是在浏览器（客户端）中。

2. 如果没有这些 SSR 或 SSG 方法，Next.js 构建过程中到底会发生什么？服务器是否仍然将预渲染的 HTML 传递给客户端，而不是 HTML 几乎为空且内容完全在浏览器中渲染的纯 CSR？

点对点！使用 RSC 和 Nextjs 将服务器渲染的 HTML 推送到客户端进行反应：https://nextjs.org/docs/app/building-your-application/rendering/server-components#how-are-server-components-rendered

3. 与传统的 CSR 方法相比，对此类页面使用 Next.js 时，在 SEO 和初始页面加载性能方面是否有切实的好处？

吨！速度、Lighthouse Javascript 包大小、初始页面加载和首次内容绘制 (FCP) 等。查看服务器渲染的更多好处：https://nextjs.org/docs/app/building-your-application/rendering/server-components#benefits-of-server-rendering

4. 最后，即使不涉及特定的数据获取或动态内容，在页面上包含“虚拟”getServerSideProps 函数以启用 SSR 是否有必要或有益？

因为是默认的，所以没有必要。如果您愿意，您可以继续命名您的获取函数

getServerSideProps

，但它不应该也不可能是像 NextJS v13 中那样的导出函数

希望这有帮助。