在我的客户端组件中,我使用SWR获取数据:
"use client";
import React from 'react';
import { getData1, getData2 } from '@/bsky/actions';
import useSWR from 'swr';
const fetch1 = async () => {
console.log("getData1 cs start", new Date().toString());
await getData1();
console.log("getData1 cs end", new Date().toString());
return "success";
};
const fetch2 = async () => {
console.log("getData2 cs start", new Date().toString());
await getData2();
console.log("getData2 cs end", new Date().toString());
return "success";
};
const Test: React.FC = () => {
const { data: data1 } = useSWR("fetch1", fetch1);
const { data: data2 } = useSWR("fetch2", fetch2);
return (
<div className="min-h-screen p-6 max-w-8xl mx-auto">
<div className='flex flex-col space-y-6'>
{data1 && <div>Got data 1</div>}
{data2 && <div>Got data 2</div>}
</div>
</div>
);
};
export default Test;
预期的行为:
两个服务器端操作(
getData1
getData2
)应并行执行,因为它们是在客户端组件中同时启动的。
实际行为:
函数
fetch1
和fetch2
getData2
问题:为什么服务器端操作(
getData1
和client: getData1 cs start Mon Jan 27 2025 20:01:11 GMT+0100
client: getData2 cs start Mon Jan 27 2025 20:01:11 GMT+0100
server: getData1 start Mon Jan 27 2025 20:01:12 GMT+0100
server: getData1 end Mon Jan 27 2025 20:01:17 GMT+0100
client: getData1 cs end Mon Jan 27 2025 20:01:17 GMT+0100
server: getData2 start Mon Jan 27 2025 20:01:17 GMT+0100
server: getData2 end Mon Jan 27 2025 20:01:22 GMT+0100
client: getData2 cs end Mon Jan 27 2025 20:01:22 GMT+0100
)是按顺序执行的,而不是并行执行?如何修改此设置,以确保按预期并行运行的操作?
我使用next.js 14与服务器端操作和swr.
动作都涉及使用
getData1