我们可以通过为它创建一个包装器来假装react-hook-form支持服务器组件架构这种行为意味着所有库管理员都必须显式地将“使用客户端”添加到其客户端组件和挂钩中,以支持 Next.js 架构。 App Router 稳定发布七个月后,react-hook-form 等流行库仍然落后,这也许表明 React 开源社区不了解 App Router 的服务器组件架构支持。
测试
React-test-library ( RTL ) 渲染函数当前无法渲染异步服务器组件。现有的解决方法允许依靠 JSX 语法单独渲染此类组件,但这些基本的解决方法无法处理嵌套在组件树中的异步组件。缺乏 JSX 语法也使得使用 RTL 中内置的函数(例如包装器)变得更加困难。
服务器组件只能将可序列化的数据传递给客户端组件。这使得应用依赖注入等模式变得困难,因为函数无法跨服务器-客户端边界传递。
包装组件
我们自己的代码库中出现的一种早期模式是通过自定义挂钩使用 贷款人员电子邮件列表 包装器组件。在传统的客户端优先 React 应用程序中,这两个选项之间的权衡相对平衡。以下是这两个选项的一些优缺点:
1. 包装组件:
由于重叠,强制数据检索和数据提供之间的显式耦合会使组件更难以命名:
2. 自定义挂钩:
在获取数据和渲染数据之间建立隐式连接:
提取逻辑而不扰乱组件树。
在应用程序路由器中,包装组件模式变得非常直观,因为我们想要执行以下操作:
1.服务器上的数据检索
2.客户端渲染
这里的命名仍然很笨拙,但如果有必要,我们可以通过提供“use client”来创建显式耦合。最后它看起来像这样:
在 App Router 中编写自定义钩子似乎很麻烦,因为当为服务器组件编写时,它们最终只是普通函数(即不使用 React 钩子)。我们发现包装组件对于我们当前的用例来说是更好的模型。
结论
React 提供本机客户端渲染(CSR)。如果您希望 React 应用程序在Web 指标方面表现良好,那么像 Next.js 这样的服务器端渲染 (SSR) 和静态站点生成 (SSG) 框架是必不可少的。 Next.js 因难以在 Vercel 以外的平台上实现而受到批评。 React Server Components 的过早引入使得 React 的一些最成熟的库不受支持。App Router 的架构引入了一些根本性的变化,使得开源社区很难跟上工具支持的步伐。
最后的话
目前在 Next.js 路由器之间进行选择非常困难。使用旧的页面路由器构建新的应用程序似乎有问题,因为转换已经很顺利。与此同时,新的 App Router 似乎还没有准备好取代它作为编写现代 React 应用程序的首选方法。这是 Next.js 终结的开始吗?或者它是否为 React 服务器端渲染的新时代铺平了道路? ▪只有时间会证明一切。
您想了解更多关于 adesso 世界中令人兴奋的话题吗?然后看看我们之前发布的博客文章。