为什么在 Next JS 13 中调用服务器上的外部 API？

Question

我需要更多细节来支持这个问题：Explain data revalidation in Next JS 13

我正在使用新的 next js 13 应用程序目录功能来获取数据；正如 Next JS 13 文档所述，在本页标题为“在服务器上获取数据”的部分中：

只要有可能，我们建议在服务器上获取数据。

该文档讨论了新的数据获取技术（例如服务器操作和路由处理程序）如何允许客户端组件与服务器通信以获取数据，而不是直接在客户端中获取数据。服务器操作和路由处理程序用于创建可直接访问数据库的专用 API；但是，我使用的是 Supabase，Supabase 生成了一个 API 供我与数据库进行通信。

因此，我正在争论在服务器操作或路由处理程序上执行 Supabase API 调用是否有意义，或者（因为 Supabase API 已经托管在 supabase 服务器上）客户端 API 调用是否可以。

具体来说，Next JS 建议在服务器上获取数据，然后调用生成的 api（服务器操作或路由处理程序），我有点困惑；虽然服务器操作和路由器处理程序可以为我进行 api 调用，但这有必要吗？由于我正在调用在其他地方提供服务的专用 API 路由，而不是直接数据库调用，为什么不直接从客户端进行调用（例如 fetch api 或 React 查询，直接在客户端组件中）。这与调用服务器操作或路由处理程序有何不同，因为它们只是生成要从客户端调用的 api？

Answer 1

我个人决定是从后端还是前端获取，考虑如下。

1. SEO 视角 - 如果数据是静态的并且需要向搜索爬虫显示，您需要从服务器获取并预加载它，以便爬虫一看到它，他们就会看到 SEO 所需的所有信息。（即，如果您有一个名人信息网站，您希望/info/celeb/FooBarJohn页面在爬虫看到时立即包含有关 FooBarJohn 的信息。）
2. 服务器上的负载 - 如果数据对爬虫显示不太重要，您宁愿选择在前端获取，因为这会将所有开销推到前端用户的计算机上并减少服务器上的负载。
3. 另一个 SEO 视角 - 如果您不希望爬虫收集信息，可以从客户端获取超级动态的内容（即一些股票信息）。
4. 美观/功能 - 如果您总是希望在没有框架的情况下加载整个页面的前端信息（在获取之前加载 ui），您将需要使用服务器端获取，因为这将保证用户在加载页面后立即看到信息。
5. 缓存 - 您可以使用 SWR 从前端进行缓存，但现在您也可以使用新的 next.js 13 功能从后端进行缓存。（https://nextjs.org/docs/app/building-your-application/caching#overview ) 现在您可以存储常用的 supabase 调用以减少 supabase 数据库的负载。（但永远记住，缓存可以在数据流的任何步骤中完成。您可以在前端、next.js 或缓存请求的第三方供应商上进行缓存）
6. 隐藏 URL - 如果您使用路由处理程序来创建自定义 api，则可以隐藏您正在使用 supabase。用户可以从 F12 控制台网络选项卡检查您的 supabase 获取调用。在应用程序上打开网络选项卡后尝试 F5。

Answer 2

在 中Next.js 13，数据重新验证涉及更新获取的数据以使其保持最新并最大限度地减少不必要的请求。服务器操作和路由处理程序等新功能提供了在服务器上获取数据的有组织的方法，从而增强了数据重新验证。

建议Next.js documentations使用服务器操作或路由处理程序在服务器端获取数据。这比客户端获取更可取，并带来 SEO 改进、甚至服务器负载和数据一致性等好处。

对于Supabase用户来说，有两种获取数据的选择。您可以使用他们生成的 API，它可以有效地与数据库进行通信。Next.js 13这与数据处理的更新非常吻合。

两个选项：

1. 客户端 API 调用：可以Superbase-generated API从客户端组件直接进行 API 调用。这是一种有效的方法，特别是当您主要关心客户端的数据加载时。
2. 服务器操作/路由处理程序：这些是专用 API，可以在您的Next.js application. 你可以发起API调用，Superbase Servers同时一个很大的好处是你可以在服务器端封装更多的逻辑。如果您必须执行比简单 API 调用更进一步的其他操作，这可能非常有用，当您需要确保数据获取发生在服务器端时（对于 SEO 等）也是如此。

直接调用客户端 API 与使用Server Actionsor之间的有效区别Route Handlers仅仅在于控制和封装的级别。这两个可以充当middleware layer在 API 调用之前/之后执行许多操作的服务器。这可能是身份验证检查、数据转换或一些附加的服务器逻辑。

这实际上取决于您的具体情况Use Case和您想要的：

• 如果客户端数据加载是您主要关心的问题并且不需要额外的服务器端逻辑，那么使用Client-Side API Calls可能Supabase-generated API是最好的选择。
• 然而，如果需要封装，更多的控制或额外的服务器端逻辑，Server Actions或Route Handlers将提供这些好处。

不过，无论您做出哪种选择，Next.js 13都有数据重新验证机制，可以根据设置的重新验证间隔，通过自动重新验证并在必要时刷新数据，帮助确保获取的数据自动保持最新状态。这确保了数据新鲜度和性能优化之间存在一定的平衡。