Geolocation and edge logic in NextJS - Performance & Optimization

Performance: Geolocation and edge logic

MEDIUM IMPACT

This affects page load speed and responsiveness by deciding where and how geolocation logic runs, impacting server response time and client rendering.

Determining user location to customize content

NextJS

import { cookies } from 'next/headers';
export const runtime = 'edge';
export async function GET() {
  const cookieStore = cookies();
  const userLocation = cookieStore.get('user-location');
  // Use edge logic to read location from cookie or fallback
  return new Response(JSON.stringify({ location: userLocation?.value || 'default' }));
}

// Client fetches precomputed location from edge API

Runs geolocation logic or location retrieval at the edge before page render, reducing server response time and enabling faster personalized content.

📈 Performance GainReduces server latency by 50-200ms and improves LCP by delivering location-based content faster.

Determining user location to customize content

NextJS

'use client';
import { useState, useEffect } from 'react';
export default function Page() {
  const [location, setLocation] = useState(null);
  useEffect(() => {
    navigator.geolocation.getCurrentPosition(pos => {
      setLocation(pos.coords);
    });
  }, []);
  return <div>{location ? `Lat: ${location.latitude}` : 'Loading...'}</div>;
}

Geolocation runs only on client after full page load, delaying personalized content and increasing Largest Contentful Paint (LCP).

📉 Performance CostBlocks meaningful content rendering until client geolocation completes, increasing LCP by 500-1000ms.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Client-side geolocation after load	Minimal DOM changes	1 reflow after location set	Delays initial paint	[X] Bad
Edge runtime geolocation or precomputed location	No extra DOM operations	No reflows caused by location fetch	Faster initial paint	[OK] Good

Rendering Pipeline

Geolocation logic at the edge runs during server response generation, reducing client wait time. Client-side geolocation delays content rendering until after load.

→Server Response

→Layout

→Paint

⚠️ BottleneckServer Response time when geolocation runs on origin server or client-side delays content rendering.

Core Web Vital Affected

LCP

This affects page load speed and responsiveness by deciding where and how geolocation logic runs, impacting server response time and client rendering.

Optimization Tips

1Run geolocation logic at the edge to reduce server latency and speed up content delivery.

2Avoid client-only geolocation that delays meaningful content rendering and increases LCP.

3Use cookies or headers to pass location data to edge functions for faster personalized responses.

Performance Quiz - 3 Questions

Where should geolocation logic run to improve page load speed in Next.js?

A In a serverless function with high latency

B Only on the client after page load

C At the edge runtime before page render

D Inside a React useEffect hook without prefetch

DevTools: Performance

How to check: Record a page load and look for delays between navigation start and Largest Contentful Paint. Check if geolocation or location fetch delays server response or client rendering.

What to look for: Long gaps before LCP or delayed content updates indicate slow geolocation logic placement.