next.js 13用应用程序路由器获取数据
#javascript #网络开发人员 #react #nextjs

我正在寻找兼职工作！查看我的portfolio如何与我联系

随着Next.js 13的新版本，带有新的范式和概念。一个反应和下一步的普遍概念。JS引入
是服务器组件，它们是服务器上呈现的组件。这允许更快的页面加载和更好的SEO。

这是一个很棒的概念，您可以在诸如数据获取之类的React组件上执行异步任务。这意味着您不需要
useEffect从API获取数据；当用
获取客户的数据时，它被认为是反应的反案 useEffect是因为从长远来看，如果您不小心，可能会导致一些昂贵的问题。

反应文档所解释的问题之一是race conditions，在链接上进行了解释。

SEO和性能在服务器上获取数据要好得多。JS13使其更容易这样做。在本文中
我们将介绍如何使用New Next.js 13应用程序路由器以及一些提示和技巧来获取数据。

解决方案1：使用fetch和React服务器组件获取数据

这很简单，创建一个异步组件，在顶层中以fetch获取数据，然后访问
的数据 模板。

// app/page.jsx

export default async function Page() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts");
  const posts = await res.json();

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

就是这样！它将在服务器上获取数据，并在已获取数据的HTML页面上提供HTML页面。如果您想重新估计或取回
数据，Next.js扩展了fetch，框架允许您为每个请求配置缓存和重新验证行为
在服务器上。

在上一个示例中，我们可以通过将revalidate属性添加到响应对象并进行错误处理来进一步改善fetch api。

假设我们想每1小时重新估计数据。

// app/page.jsx

export default async function Page() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts", {
    next: { revalidate: 3600 }, // Will revalidate every 1 hour
  });
  const posts = await res.json();

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

之后，如果响应状态不是200。

// app/page.jsx

export default async function Page() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts", {
    next: { revalidate: 3600 }, // Will revalidate every 1 hour
  });

  if (!res.ok) {
    // This will activate the closest `error.js` Error Boundary.
    throw new Error(`Failed to fetch the data`)
  }
  const posts = await res.json();

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  )
}

但是，如果您真的需要在客户端获取数据怎么办？这是第二个解决方案进来的地方。

解决方案2：使用第三方库在客户端获取数据

就像我说的那样，最好在服务器上获取SEO和性能的数据，因为将获取的数据也将包含在HTML中。

但是，如果需要客户端数据获取，请考虑首先使用第三方库，例如SWR和React查询以避免使用useEffect

这是因为这些库的边缘案例已经包括在内 避免网络瀑布，挑衅，突变等

让我们看一下要获取时的外观
使用SWR

的数据

SWR是Vercel创建的数据获取库，这是一个非常
与反应查询相比，更简单的解决方案

假设我们要在客户端组件中获取数据。

// components/profile.tsx
import { getProfileById } from '@/lib/actions'; // Example import

export function Profile({id}: {id: string}) {
     const { data, error, isLoading } = useSWR([`/api/profile/`, id], ([url, userId]) => getProfileById(url, userId))

    if (error) return <div>failed to load</div>

    if (isLoading) return <div>Loading...</div>

    return <div>hello, {data?.name}</name>
}

看起来相似，但区别在于它直接在浏览器中获取。如果您查看DevTools中的网络请求之间的区别，则会看到请求
被制作。

悬念改善数据获取

使用悬疑组件可以进一步改善这一点。 React中的悬念是一个替代后备组件的组件，直到包裹在其周围的孩子已经完成。

。

我们可以通过以下示例来做到这一点：

// components/profile.tsx
'use client'

import { getProfileById } from '@/lib/actions'; // Example import


export function Profile({ id }: { id: string }) {
    const { data, error, isLoading } = useSWR([`/api/profile/`, id], ([url, userId]) => getProfileById(url, userId), { suspense: true })

    return <div>hello, {data.name}</name>
}

然后，app/page.tsx：

// app/page.tsx
'use client'

import { Suspense } from 'react'
import { Skeleton } from '@/components/ui/skeleton' // Example
import { Profile } from '@/components/profile'
import { ErrorBoundary } from 'react-error-boundary' // npm install react-error-boundary

export default function Page() {
  return (
    <ErrorBoundary fallback={<h2>Could not fetch profile</h2>}>
      <Suspense fallback={<Skeleton />}>
        <Profile />
      </Suspense>
    </ErrorBoundary>
  )
}

它看起来更干净，实际上不需要使用可选的链式操作员和有条件的检查。

重要说明

React悬念在数据方面仍在实验
提取，但React团队正在研究如何正确
在获取数据时处理悬念。

REACT悬念 在内部>效果或事件处理程序中获取数据时。

技巧和窍门

以下是在React中获取数据时的一些好提示和技巧。

  1. 避免尽可能多地在客户端中获取数据。
  2. 避免使用useEffect进行数据获取，请使用自以为是的数据获取库来使用React处理异步数据时可以提供的全部潜力。
  3. 我认为，在page.tsx或layout.tsx中添加'use client'是不良习惯，因为理想情况下应该在服务器上呈现这些。
  4. 在处理搜索字段或输入数据时，最好考虑使用调试或节流技术来减少请求量并避免API滥用。

结论

在本文中，我们了解了如何在新的
中获取数据 Next.js应用程序路由器在服务器和客户端中。我们也有
一些快速讨论反应悬念，以及我们如何将其用于
显示加载数据。

我希望您在本文中学到了一些东西，并将其应用于
您当前和新项目。

在社交媒体上关注我！

我活跃在以下社交媒体平台上。

参考