如何在 Next.js 中思考

让我给你讲一个关于客户的故事。

这位客户要求很高。他们想要所有东西，而且要立即得到。

服务员对这种顾客太了解了。当顾客进来，要求提供一切服务，甚至厨房水槽，服务员只能叹气。

“你知道，很多东西都会被浪费掉，”服务员轻声说道。

他们的评论没有被重视。

这位客户听起来熟悉吗？

此客户端是您的单页应用程序（SPA）。

不过，城里来了一位新客户，它只要求提供它需要的东西。

这个客户端是 Next.js。

它也恰好是服务器🤔

客户端、服务器和 Node Oh My

在处理完 SPA 之后开始使用 Next.js 可能会很有挑战性（至少对我来说是这样），因为整个服务器都在运行，更不用说 node.js 运行时了 😱

学习过程可能会感觉很陡峭，尤其是如果你之前很少使用 Node.js 的话，但最终请记住，客户端仍然是 React！我发现，要想熟练掌握 Next.js，主要需要理解以下三件事：

• 客户端与服务器上下文
• 页面类型
• API 路由

Next.js 功能强大，一旦掌握了它的工作原理，构建起来就会很有趣🏗它将传统和单页 Web 应用程序的一些最佳功能结合到一个混合应用程序中。

如果您想复习一下，请查看三种应用程序类型之间的高级差异！

⚠️ 预计学习过程会花费更多时间，至少一开始是这样。如果你没有按照自己的节奏学习，需要估算时间，记得提前做好时间安排，这样你就有足够的时间按照“Next”的方式正确地完成学习，而不是在“Next”的基础上又回到 SPA 模式。

⚠️ 不可避免地，当在服务器和浏览器上下文（如Redux或CSS-In-JS ）中进行渲染时，添加功能会变得更加复杂。

SPA 与 Next.js 对比

在SPA中

您的代码仅在浏览器中执行

• 整个站点代码包已预先下载
• 您不应包含敏感信息（API 密钥、密码等...）
• 后续页面均由捆绑代码构建
• 您可以访问Web API和DOM

在 Next.js 中

您的代码首先在服务器上执行，然后在浏览器中执行

在服务器上：

• 页面是预先构建和/或预先渲染的（稍后会详细介绍）
• 在 API 路由和数据获取期间，您可以包含敏感信息
• 您无权访问服务器上的Web API 和 DOM
• 你可以访问Node.js 中的一整套新API

在浏览器中：

• 浏览器仅获取请求页面所需的代码
• 服务器中没有任何敏感数据可用
• 后续页面向服务器发出新的请求
• 您可以访问Web API和DOM

这也意味着实现可能对 SPA 具有通用方法的功能（例如身份验证），现在可以根据与您设计应用程序的方式相关的各种因素选择多种方法。

执行上下文

我想重点考虑的都是关于现在你需要处理一台服务器的事实。虽然听起来可能有些显而易见，但我认为这一点的重要性无论怎么强调都不为过。

最大的问题是什么？

添加服务器会添加执行上下文

请考虑一下，您的应用程序的复杂性实际上已经增加了一倍！

代码执行的上下文可以是服务器，也可以是客户端（浏览器）。你编写的代码可能只能在其中一个环境中执行。常见示例如下：

• 浏览器全局变量window&document在undefined服务器上
• Node.js 文件系统（fs）模块位于undefined浏览器中

立即帮自己一个忙，创建两个实用函数来包装只在一个上下文中运行的代码：

export const isClient = () => typeof window !== 'undefined'
export const isServer = () => !isClient()

⚠️ 这些方法并非总是必要的。React hooksuseEffect和仅在浏览器中运行。API路由和数据获取方法仅在服务器上运行。useLayoutEffect

⚠️ 不要留下未使用的导入；导入但未使用的 Node.js 模块会抛出错误。代码到达客户端之前，该引用不会被移除，浏览器会卡在 Node.js 代码中。

您的申请是星巴克

在我们进一步讨论之前，让我们先回到一开始的比喻。

我们的客户（顾客）走进星巴克。我们的服务员（咖啡师）随时准备满足客户的需要。

星巴克深谙顾客的需求。由于有些饮品可以提前制作，他们准备了一系列精选罐装饮料（例如双倍浓缩），方便顾客随时享用！

服务器几乎不需要做任何工作，哈哈哈🥳

但星巴克也知道顾客可能会很挑剔（我正在看你爱德华），所以他们准备即时制作一些疯狂的东西（TikTok Special）。

服务器必须做很多工作，真糟糕😰

最后，有些东西服务员可能无法提供。在这种情况下，顾客会偷偷溜进浴室，带着他们的酒壶（在家千万别这么做，喝酒要适度），然后把自带的威士忌加到咖啡里。

服务器会做一些工作，客户端也会做一些工作🍻

你能猜出上面场景中的星巴克是谁吗？是 Next.js 😆

上述三种场景涵盖了您在 Next 中构建页面时的选择。

页面

在构建任何页面之前，最好先退一步思考一下：

• 您的内容来自哪里？
• 您的内容多久更改一次？
• 一个页面有多少内容依赖于特定的内容？

这些问题的答案将影响您是否要通过静态站点生成 (SSG)、服务器端渲染 (SSR) 或两者与客户端渲染 (CSR) 的某种组合来实现页面。

萨格

即取即用：静态网站生成是最快的选择，几乎无需服务器处理，最适合SEO和核心网站指标。服务器只需返回预先构建的静态内容。

静态生成的页面仍然具有响应性：Next.js 会在客户端补充你的应用程序，使其具有完全的交互性。—— Next.js 文档

对于不经常（或永远不会）更改的内容，请使用此选项。博客、营销网站、政策文件和常见问题解答或多或少都属于此类。

对于包含许多（数千个或更多）页面的站点来说，这可能会变得很麻烦，但可以通过增量静态再生在一定程度上缓解这一问题。

苏维埃社会主义共和国

TikTok 特辑：服务器端渲染意味着服务器不再提供预先构建的页面，而是在收到请求时构建页面。浏览器仍然会获取静态内容，但数据获取和处理可能意味着实现最大内容绘制的时间会更长。

对于依赖特定输入数据的页面以及无法（或不可行）为给定输入静态生成所有页面组合的页面来说，这是一个很好的选择。

输入数据可能是用户详细信息、购买/订单历史记录、天气、时间或交通等。

企业社会责任

Hip Flask：除了上述任一策略外，还可以添加客户端渲染。它可以作为一种策略来延迟加载部分页面内容，以便大多数内容能够通过 SSG 或 SSR 更快地准备好。

延迟内容可能是频繁更新/实时数据，如股票图表或聊天栏，或加载时间特别长的内容。

⚠️请注意，如果某些内容不易获得，可能会对 SEO 产生影响，并导致累积布局转变问题。

⚠️ 请记住，页面代码可能在服务器和客户端上执行！如果您在环境变量或其他存储中有任何敏感信息，请小心，不要将其意外发送到客户端。

API 路由

让我们把上面的比喻再延伸一下！想象一下一台浓缩咖啡机，它既漂亮又复杂，你肯定不希望你的顾客，呃，我是说客户，碰它。

为了让顾客免受意式浓缩咖啡机的复杂操作的困扰，顾客需要向服务员发出请求。服务员会立即处理所有复杂的操作，一会儿后订单就准备好了。然后服务员回复： “爱德华，我要你的大杯焦糖脆星冰乐！”

在收到回复之前，客户端可以自由地在 TikTok 上滚动寻找猫咪视频和新的疯狂咖啡饮料。

Next.js 中的 API 路由反映了这种交互。它们不会给你带来咖啡，但如果你构建得当，它们可以为你带来猫咪表情包。

⚠️ 请记住，这是在服务器上下文中。如果需要，您可以使用敏感密钥、机密信息、密码和连接字符串。您可以与文件系统交互，例如，拉取 Markdown 文档来创建内容。您可以添加像 Prisma 这样的 ORM 来与数据库交互。

⚠️ 仅限服务器上下文超越了 API 路由。它还包含数据获取方法getServerSideProps、getStaticProps和getStaticPaths。这些方法更加专业，我不会在这里详细介绍它们，但页面部分中针对这三种类型的链接文档都是很棒的资源。

作为参考，API 路由如下所示：

export default function handler(req, res) {
  // Do lots of processing...call apis...access database...

  res.status(200).json({ name: 'Next.js' })
}

很简单吧？😬

请求

你可能熟悉从 SPA 架构的 API获取数据。现在，你处于该事务的 API 端。

请求（或req对象）将包含有关客户端发出的请求的各种信息。其中包括标头、引用站点和浏览器信息。

在 API 路由中， Next还添加了额外的数据，其中包括cookies、query和 的对象（body如果该信息存在）。

如果您正在进行CRUD 操作，请特别注意method客户端正在使用的内容，因为您需要对不同的方法做出不同的响应！

回应

响应，或者res说将信息发送回客户端。务必始终返回响应，否则浏览器请求将永远无法完成，只能在风中飘荡。

与对象类似req，resAPI Routes 中的对象也由 Next 添加了一些额外的辅助方法，这使得构建响应比默认的 Node.jshttp.ServerResponse功能更容易。当我看到教程中使用这些辅助方法，但在 Node.js 文档中却找不到它们的引用时，我感到很困惑。

收到回复后，您就一切就绪，可以开始构建一些新的、令人兴奋的东西了！

进一步阅读

我希望这能在你开始使用 Next.js 时给你带来一些新的见解！

如果您希望在基本脚手架之外设置 Next.js，请查看我的关于向 Next.js 项目添加测试、linting 和绝对导入的教程。

有疑问？有意见？

在 Twitter 上关注我@BenjaminWFox，获取更多技术和领导力内容，并提出任何想法或问题！