How do I reduce the number of edge requests on My Vercel project? I am getting alot of 304 responses on my Crypto application
Based on your crypto application getting many 304 responses, here are several strategies to reduce Edge Requests on Vercel:
304 responses indicate content that has been fetched multiple times - this suggests your app is making repeated requests for the same resources 1. In crypto apps, this commonly happens due to frequent price polling and real-time updates.
The most common cause in crypto apps is aggressive polling for price updates 1:
// Instead of polling every second
useEffect(() => {
const interval = setInterval(fetchPrices, 1000); // Too frequent
return () => clearInterval(interval);
}, []);
// Use longer intervals or WebSockets
useEffect(() => {
const interval = setInterval(fetchPrices, 30000); // 30 seconds
return () => clearInterval(interval);
}, []);
// Or better yet, use WebSockets for real-time data
const ws = new WebSocket('wss://crypto-api.com/prices');If using SWR or React Query, configure them to reduce requests 1:
// Configure SWR to be less aggressive
const { data } = useSWR('/api/prices', fetcher, {
refreshInterval: 30000, // 30 seconds instead of default
revalidateOnFocus: false, // Don't refetch on window focus
revalidateOnReconnect: false,
});Limit Next.js Link prefetching 1:
// Disable prefetching on navigation links
<Link href="/portfolio" prefetch={false}>
Portfolio
</Link>Use browser DevTools to identify components that re-mount frequently 1:
Add appropriate cache headers to your API routes:
// In your API route
export async function GET() {
const data = await fetchCryptoData();
return new Response(JSON.stringify(data), {
headers: {
'Cache-Control': 'public, s-maxage=30, stale-while-revalidate=60',
},
});
}You can track your optimization efforts in the Vercel dashboard 1:
The goal is to maintain real-time functionality while reducing unnecessary duplicate requests that result in 304 responses.