4 ms·
If you end up with useEffect hell, you are coding wrong. As OP said: it deduplicates and caches requests, there is no need to use useEffect. Here is some examp
by super256 3y ago
If you end up with useEffect hell, you are coding wrong. As OP said: it deduplicates and caches requests, there is no need to use useEffect.
Here is some example code, and imo it‘s really greener than anything else.
async function getData() {
const res = await fetch('https://api.example.com/...');
if (!res.ok) {
throw new Error('Failed to fetch data');
}
return res.json();
}
export default async function Page() {
const data = await getData();
return <main></main>;
}
- tuukkah 3y agoWhere's the caching in this example?
- panragon 3y agoHandled under the hood by Next 13. To be honest, they probably could have done something to make that a bit more obvious when looking at the code - it probably wouldn't hurt to throw in a simple 'cache' keyword or something.
- tuukkah 3y agoThis is the documentation I could find although it's not for 13 but Beta: https://beta.nextjs.org/docs/data-fetching/caching https://beta.nextjs.org/docs/data-fetching/caching They say there's a new `cache` function in React and they have patched `fetch` to use it by default (for GET requests). Does this include a solution to the N+1 queries issue (container element requests a list of items, then item elements each request their details)? I see you can do pre-fetching, perhaps those can be batched. EDIT: Found an example that uses DataLoader by "caching the cache". The src/api.ts module exports a cached DataLoader for characters, and src/components/CharacterAvatar.tsx imports and calls it during render simply like this: const character = await characters().load(id); https://github.com/AndrewIngram/next-rick-morty https://github.com/AndrewIngram/next-rick-morty
- brigadier132 3y agoOk, and how does this work when I need actual client side interactivity?