更少的代码，更好的用户体验：使用 Next.js 13 应用路由器更快地获取数据
原文英文，约1000词，阅读约需4分钟。
📝
内容提要
Next.js 13引入了新的应用目录，允许在React Server组件中直接获取动态数据，减少重复代码，提高用户体验。通过智能缓存和新的加载UI，开发者可以更高效地处理数据请求，提升应用性能。
🔎
延伸解读
新应用目录的优势
Next.js 13的新应用目录使得开发者可以在React Server组件中直接获取动态数据，这一变化显著减少了重复代码，提高了开发效率。通过将数据获取与组件渲染结合，开发者能够更快速地构建响应式应用，提升用户体验。
加载UI的改进
新的加载UI功能允许开发者为服务器端获取的数据设置自定义加载骨架，这样用户在等待数据时可以看到更友好的界面。这不仅改善了用户体验，还能提升应用的核心网络指标，有助于在搜索引擎中获得更高的排名。
服务器组件的安全性
使用服务器组件进行数据获取具有更高的安全性，因为它们在服务器环境中运行，避免了敏感环境变量泄露到客户端的风险。此外，服务器端获取数据可以减少客户端与服务器之间的往返，提高应用性能。
❓
Q&A
Next.js 13的新应用目录有什么主要功能？
Next.js 13的新应用目录允许在React Server组件中直接获取动态数据，减少重复代码，提高用户体验。
如何通过Next.js 13提高应用性能？
通过服务器端获取数据减少客户端与服务器之间的往返，提高应用性能，同时使用智能缓存和新的加载UI提升用户体验。
Next.js 13的Loading UI有什么优势？
新的Loading UI允许为服务器端获取的数据设置自定义加载骨架，减少用户等待时间，改善用户体验。
Next.js 13如何简化数据获取过程？
Next.js 13基于fetch() Web API，支持async/await，简化了数据获取过程，所有组件默认都是服务器组件。
使用Next.js 13的服务器组件有什么好处？
服务器组件可以直接访问后端数据，安全性高，减少客户端与服务器的交互，提高请求效率。
Next.js 13如何处理静态和动态数据？
Next.js 13默认将所有获取的数据视为静态数据，支持通过fetch选项设置缓存和重新验证规则，以处理动态数据。
🏷️
