如何在Next.js中使用带有SSR的SWRConfig？

我一直在研究documentation以及如何将其与Next.js SSR一起使用，但我仍然不知道如何实际实现它，因为我能想到的每一种方法都没有任何意义。
根据this SO thread设置初始数据就像在选项中传递initialData一样简单。然而，在当前版本中，它并不存在，并且已被SWRConfig取代，而不是传递数据，您将所有内容 Package 在SWRConfig中并传入fallbackData（其本身的名称是愚蠢的，它被用作初始数据，它最初只是备用数据）。
但是，如果SWRConfig是一个服务器组件，那么就没问题了，我可以让我的layout.tsx

import {SWRConfig} from "swr";
import {fetch_data} from "@/api/data";

export default async function Layout({
  children,
}:{
  children: React.ReactNode,
}) {
  const fallbackData = await fetch_data();
  return (
    <SWRConfig value={{fallbackData}}>
      {children}
    </SWRConfig>

  )
}

那么在{children}内部可能有一个节点

import useSWR from "swr";

const get_data = async () => {...}

export default function Page() {
  const {data, mutate} useSWR('/api/data', get_data);

  //Use `data` that is initially set from SWRConfig
}

但是，SWRConfig是客户端组件，这意味着它需要从服务器组件接收数据，然后将其设置为fallbackData。导致public_layout.tsx组件，但仅客户端从布局接收数据以设置为SWRConfig

'use client';
import { SWRConfig } from "swr";
import { type DataType } from "@/util/db";

export default function Layout({
  children,
  fallbackData,
}: {
  children: React.ReactNode,
  fallbackData: DataType[],
}) {
  return (
    <SWRConfig value={{fallbackData}}>
      {children}
    </SWRConfig>
  )
}

然后，layout.tsx仅使用PublicLayout组件并传递数据

import {fetch_data} from "@/api/data";
import PublicLayout from './public_layout'

export default async function Layout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <PublicLayout fallbackData={await fetch_data()}>
      {children}
    </PublicLayout>
  )
}

最后可以使用它，代码与上面的Page()相同。
这不可能是正确的做事方式吧？

*如果是正确的方式，有没有更干净、更少混乱的设置方式？
*如果是错误的方式，我应该做什么？

我怎么读“SWR”？我一直念“下水道”*

我最终没有使用SWR，因为将它与RxJS连接是一件痛苦的事情，所以我只是手动完成了它，我仍然得到了我想要的乐观的UI。

const add_item = async (current:DataType[], new_item:DataType) => {
  //Add item and get result which is the data
  //Return data if it got it
  //Return current if it fails
} 

export default function Page({
  default_data
}: {
  default_data:DataType[] 
}) {
  const [data, setData] = useState(default_data);

  return ( //Really basic example, this would want to not have hard coded values
    <button onClick={
      const new_item = { key:"just a test bro", text:"I wanted to be the key" };
      const optimistic = [...data, new_item];
      setData(optimistic);
      setData(await add_item(data, new_item));
    }>Testing</button>
  )
  
}

它以一种更好的方式布局，通过它，我可以添加RxJS支持和去跳请求，并批量进行更改

如何在Next.js中使用带有SSR的SWRConfig？

1条答案

相关问题

热门标签

最新问答