想看到很酷的东西吗？ React正在从异步获得本机支持，您已经可以尝试ð
很快，这将在任何地方工作：
const ShowData = async () => {
const res = await fetch("/data-source")
const json = res.json()
return <p>{json.text}</p>
}
观察您体内的async组件，koud1，完全缺乏状态，效果，钩子或加载库。它只是有效的。您可以在统治中的任何地方使用此组件 - 即使在不拥有的组件中，它也是async！
这是React的RFC: Suporte de primeira classe para promessas e async/await的一部分。我在React 18 and the future of async data中写的一个悬念的下一步。
目标是促进对悬念的使用。它起作用了！
您可以在NextJS上使用Async React 13
目前，体验异步反应的支持的最佳方法是与o lado beta do NextJS 13 o /app Direct一起。我曾经构建ScholarStream.ai，看起来很奇怪，但是效果很好。
您可以veer meu código completo no GitHub。
/app导演利用了在服务器上呈现并发送HTML的React组件。在客户方面没有任何JavaScript！每个重新渲染返回服务器。
现在我听到你在想“但是你游泳，这很慢，就像狗屎一样！
是的，我们全额回报。但是服务器从入口方面走了很长一段路。
我的理解是，NextJS的一家公司Vercel广泛使用了无服务器和边缘功能，以执行用户最小可能的肇事者来渲染每个组件。像混音一样，他们需要将一个个性化的编译器纳入NextJs，才能完成这项工作。
当服务器组件需要渲染时，为此渲染渲染执行了一个新功能。有了正确的配置（并为其付费），该功能将在类似于CDN的平台上执行，该平台的目标很低。函数返回仅此组件的HTML 和NextJS在浏览器中替换其用户界面的正确部分。
我不知道没有vercel的情况。从理论上讲，NextJ是一种自我 - 疾病结构，在没有vercel的情况下很好地工作。
是的，这意味着，即使使用服务器组件，客户端方面仍然有很多JavaScript。但少:)
异步如何与beta nextJ反应？
再次，在githubðhttps://github.com/Swizec/ScholarStream.ai中完成。请参阅a£oðScholarStream.ai
基础是使用/app文件夹中NextJS 13的新结构：
-
page.tsxpara a preato -
layout.tsx用于静态布局 -
loading.tsx用于加载状态
page.tsx
Componentes de página始终是服务器组件。 NextJS在服务器上渲染，将结果存储在缓存中并返回。
// app/[route]/page.tsx
export default async function Home() {
return (
<main className={styles.main}>
<Pitch />
<h2>Read about:</h2>
<TopicsList />
{/* @ts-expect-error Server Component */}
<Feed topic="cs.AI" count={5} isLast />
</main>
)
}
您需要告诉TypeScript在JSXãboret中使用Koude组件（服务器）时期望发生错误。它有效，但是类型仍然不知道。 NextJS团队今天正在努力更新。
<Feed>在这种情况下，它是执行异步数据加载的组件。 NextJS完美地处理了此组件。
layout.tsx
Componentes de layout告诉nextjs，总是在您的padgina周围呈现什么。当您是建立复杂路线的细分时，您的布局也会坐落在。
// app/[route]/layout.tsx
export default function RootLayout({
// Layouts devem aceitar uma propriedade "children"
// Ele será preenchido por layouts aninhados ou páginas
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<Script
src="https://plausible.io/js/script.js"
data-domain="scholarstream.ai"
/>
<body>
<nav className={styles.topNav}>
<Link href="/about">About</Link>
</nav>
{children}
<div className={styles.footer}>
built with reckless abandon by <a href="https://swizec.com">Swizec</a>
<br />
Thank you to arXiv for use of its open access interoperability.
</div>
</body>
</html>
)
}
loading.tsx
componente de carregamento在等待p。
组成的承诺的同时
// app/[route]/loading.tsx
export default function PageLoading() {
return (
<main className={styles.main}>
<FeedLoader />
</main>
)
}
在这里一个有趣的挑战，我找不到有起作用的开放时间的giratian动物的组成部分。动画不会每天发射ð。
充电数据
数据充电是需要承诺的缓慢操作的典型示例。但是você pode usar as mesmas técnicas para qualquer coisa。
如“ React查询”中，建议是在使用的位置附近加载数据。在同一组件中更好。您可以将其视为宣布数据取决于您的组件的数据，并允许React和NextJ处理细节。
例如，这是我携带feed arXiv的方式：
// carrega lista de artigos
// renderiza em um loop
export const FeedInnards = async (props: FeedProps) => {
const { offset = 0, count = 10 } = props
let feed: arxiv.ArxivFeed
let papers: arxiv.ArxivFeedItem[]
try {
feed = await arxiv.getFeed(props.topic)
papers = feed.items.slice(offset, count)
} catch (e) {
console.error(e)
return (
<>
<p>Error loading feed. Try one of these topics instead:</p>
<TopicsList />
</>
)
}
return (
<>
{papers.map((paper) => (
// @ts-expect-error Server Component
<FeedItem paper={paper} key={paper.link} />
))}
</>
)
}
观察该组件正文中的await，这是新的明亮玩具！ React/NextJS显示了加载状态，而该组件的承诺正在待处理。您不需要处理它ð
您需要编写自己的try..catch，因为limites de erro不使用异步组件。还是？
使用缓存扩展搜索
我的<FeedInnards>组件中寻求的数据看起来像：
export async function getFeed(category: string): Promise<ArxivFeed> {
const parser: Parser<Omit<ArxivFeed, "items">, ArxivFeedItem> = new Parser()
const feed = await fetch(
`http://export.arxiv.org/rss/${category}?version=1.0`,
{
next: { revalidate: TEN_HOURS },
}
).then((r) => r.text())
try {
const parsed = await parser.parseString(feed)
return parsed
} catch (e) {
throw new Error("Could not parse feed")
}
}
使用fetch()模式搜索arXiv rss feed，然后使用RSS分析仪。没什么疯狂的。
但观察此搜索电话中的额外parahs：
await fetch(`http://export.arxiv.org/rss/${category}?version=1.0`, {
next: { revalidate: TEN_HOURS },
})
nextjs adiciona um parâmetro personalizado para fetch()允许指定缓存行为。您可以启用/禁用缓存并指定重新验证的行为。
就我而言，该应用程序每10小时寻求新的供稿。在此之前对启动进行补充，您将获得严格的结果，而无需加载指标。缓存位于用户和大多数访问者之间，几乎伸展和中风。
对我来说尚不清楚 这个缓存存在。这是与NextJS合作的东西还是仅与Vercel一起使用？ ðÖ
无fetch（）的缓存或第三方的库
当您不控制基础API（如库中）时，您可以使用o novo método koude15存储结果。对于任何缓慢的操作，因为它可以在承诺返回的承诺中起作用，以改变Koud14本身的操作的发明。例如，当我usando o OpenAI para criar resumos：
const getSummary = cache(async (paper: arxiv.ArxivFeedItem) => {
const summary = await openai.getSummary(paper)
return summary
})
const PaperSummary = async (props: { paper: arxiv.ArxivFeedItem }) => {
const summary = await getSummary(props.paper)
return <p>{summary.choices[0].text}</p>
}
按照的想法“您必须在使用的位置附近携带数据” ，我有一个接收paper的组件，呼叫OpenAi来汇总和呈现parano图。
SO称为Openai参与cache()，以提高性能。为了优化成本，请在顶部使用Redis Cache。再过一次有关:)
使用React悬念进行个性化充电
Panigan嘈杂的加载状态本身就是本身，但您可能需要更精致的控制。或与“渲染第一个到达”的乐观渲染并行加载组件。
您这样做会用<Suspense>组件创建虚拟边界。
例如，当您知道<FeedItem>的摘要部分比其余部分慢：
const FeedItem = async (props: { paper: arxiv.ArxivFeedItem }) => {
const { paper } = props
// ...
return (
<div className={feedStyles.item}>
// ...
<Suspense fallback={<RingLoader color="blue" loading />}>
{/* @ts-expect-error Server Component */}
<PaperSummary paper={paper} />
</Suspense>
<div>
Full paper at 👉{" "}
<a href={paper.link} className={feedStyles.linkPaper}>
{paper.title.split(/(\(|\. \()arXiv/)[0]}
</a>
</div>
</div>
)
}
使用<Suspense>是如何告诉“渲染<FeedItem>组件的反应”，但是显示一个fallback，而在组件组件的这一部分中的承诺” 。。
这些具有悬念的虚拟限制捕获了子女组成部分中的所有承诺。您无需协调任何内容。
无论您在哪里有意义，您都可以增加React悬念的虚拟限制。在加载页面的绘画状态下，capé下悬念的虚拟限制。
精加工
我喜欢它！异步Reacto将简单地简化我的代码。
，但我担心这很难在NextJ和Vercel之外实施。我们将看到。
saãºDe，
〜swizec
p：documentação beta para o NextJS 13está。fantâsta。