英文:
How does next.js 13 / react server components solve the Network latency issue?
问题
让我们假设我有一个主要是静态、以内容为重点的站点，使用了Next.js构建。
目前，我会使用SSG（静态站点生成）或SSR（服务器端渲染）来生成所有页面，然后在前面放置一个CDN，并配置头部，以使我的静态资源在CDN上缓存。因此，全球用户的网络延迟现在非常低，因为他们总是能够迅速从我的CDN获取响应。但我仍然在传送很多“无用”的代码，例如我用来获取和格式化要显示的内容的库。
另一方面，React服务器组件使我能够通过将HTML从我的组件直接流到前端来减少我的捆绑包大小，从而消除了所有这些无用的代码。这很棒，但它需要一个服务器来运行，这意味着我不能将其放在CDN上，这意味着世界另一边的用户的网络延迟会非常高（或者需要设置多个位于世界各地的服务器，这非常复杂）。
在第13次Next.js版本发布的演讲中，1:43处，他们专门提到了这个限制，但我没有看到他们提到任何解决方案。
我是不是在他们的演讲中漏掉了什么，还是我的理解中有漏洞？
英文:
Let's say I have a mostly static, content focused site built in next js.
Currently I would ssg or ssr all the pages, then put a CDN in front and configure headers so that my static assets get cached on the CDN.
So network latency is now very low as users globally will always quickly get a response from my CDN. But I'm still shipping a lot of "useless" code like the libraries I use to fetch and format the content I want to display.
React server components on the other hand make it possible to reduce down my bundle size by streaming the HTML from my components straight to the frontend, eliminating all of that useless code.
This is great but it requires a server to run, meaning I can't throw it on a CDN, meaning network latency for users on the other side of the world will be really high. (or extremely complicated to set up with multiple servers across the world).
In the next 13 release talk at 1:43 they address that limitation specifically, but I don't see them mention any solution to it.
Am I missing something from their talk or is there a hole somewhere in my understanding?
答案1
得分: 0
Next.js 13 服务器组件不必为每个传入请求在服务器上运行（除非您使用类似 cookies() 或 headers() 的特定于请求的函数），因此您仍应能够在构建时（或在预定义间隔上重新验证，甚至按需）利用 CDN 来使用服务器组件生成的静态资产。
以下文档详细描述了缓存和重新验证策略：
https://nextjs.org/docs/app/building-your-application/data-fetching/caching
https://nextjs.org/docs/app/building-your-application/data-fetching/revalidating
同时，您可以通过不将服务器组件的代码和依赖项发送到客户端来获得减少捆绑包大小的好处。
英文:
Next.js 13 server components do not have to run on the server for every single incoming request (unless you are using request-specific functions like cookies() or headers()), so you should still be able to utilize CDN for static assets produced by server components at build time (or revalidate at predefined intervals, or even on-demand).
The following documentation describes caching and revalidation strategies in great details:
https://nextjs.org/docs/app/building-your-application/data-fetching/caching
https://nextjs.org/docs/app/building-your-application/data-fetching/revalidating
And at the same time you get the benefits of reduced bundle size by not shipping server components' code and dependencies to the client side.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论