How can I use geolocation IP headers?

Hello!

I’m using SvelteKit with the

@sveltejs/adapter-cloudflare

@sveltejs/adapter-cloudflare

, deploying to Cloudflare Pages.

Some websites show a nice touch like:

Last visitor from Munich, Bavaria

Last visitor from Munich, Bavaria

Last visitor from Munich, Bavaria

Last visitor from Munich, Bavaria

On Vercel, I’ve seen this done easily with:

import { geolocation } from '@vercel/functions';

import { geolocation } from '@vercel/functions';

import { geolocation } from '@vercel/functions';

import { geolocation } from '@vercel/functions';

Is there an equivalent or best practice for doing this on Cloudflare Pages?

Any pointers or examples would be much appreciated!

---

Walshy•5/27/25, 1:05 PM

you can get geo location info in the Request#cf object - https://developers.cloudflare.com/workers/runtime-apis/request/#incomingrequestcfproperties

I don't know how to get that from within Svelte but hopefully should be easy to find out

DavisOP•5/27/25, 8:43 PM

Hey, @Walshy

Thank you. Got it to work. Maybe I should compile a list of the resources I used and how I actually got there into a blog post?

Will see.

As for the actual code, it was rather minimal:

import type { Visitor } from '$lib/types';

export async function load({ request, platform }) {
    const cf = request.cf;

    // Get the previous visitor from KV
    const previous_visitor_json = await platform?.env?.MY_KV?.get('last_visitor');
    const previous_visitor = previous_visitor_json ? JSON.parse(previous_visitor_json) : null;

    const country = cf?.country;
    const city = cf?.city;
    const region = cf?.region;

    const current_visitor: Visitor =
        country && city && region
            ? {
                    country,
                    city,
                    region,
                    timestamp: new Date().toISOString()
                }
            : undefined;

    // Put the current visitor inside KV
    if (current_visitor) {
        try {
            await platform?.env?.MY_KV?.put('last_visitor', JSON.stringify(current_visitor));
        } catch (error) {
            console.error('KV put failed:', error);
        }
    }

    return {
        last_visitor: previous_visitor
    };
}

import type { Visitor } from '$lib/types';

export async function load({ request, platform }) {
    const cf = request.cf;

    // Get the previous visitor from KV
    const previous_visitor_json = await platform?.env?.MY_KV?.get('last_visitor');
    const previous_visitor = previous_visitor_json ? JSON.parse(previous_visitor_json) : null;

    const country = cf?.country;
    const city = cf?.city;
    const region = cf?.region;

    const current_visitor: Visitor =
        country && city && region
            ? {
                    country,
                    city,
                    region,
                    timestamp: new Date().toISOString()
                }
            : undefined;

    // Put the current visitor inside KV
    if (current_visitor) {
        try {
            await platform?.env?.MY_KV?.put('last_visitor', JSON.stringify(current_visitor));
        } catch (error) {
            console.error('KV put failed:', error);
        }
    }

    return {
        last_visitor: previous_visitor
    };
}

That said, I have some concerns. Would appreciate any pointers.

Having
```
await
```
```
await
```
seems to be the only way to reliably store/retrieve the visitor, but won't that incur any performance penalties?
Is there anything you would do differently from what I have thus far?

DavisOP•5/27/25, 8:45 PM

Would the same work if I were to move to workers? Keep seeing the recommendation to move from Pages.

Walshy•5/27/25, 8:46 PM

KV is fast, there's not really a way to store a persistent thing without some perf loss, unless you store in memory but then you're in a distributed system so memory for one request is usually not the same for another.

Walshy•5/27/25, 8:48 PM

Is there anything you would do differently from what I have thus far?

I think this looks good

Walshy•5/27/25, 8:48 PM

Would the same work if I were to move to workers? Keep seeing the recommendation to move from Pages.

yeah it'd be the exact same code

Walshy•5/27/25, 8:48 PM

Pages Functions are literally Workers

DavisOP•5/27/25, 8:52 PM

Appreciate the help. That answers my questions.

Cheers.

import type { Visitor } from '$lib/types'; export async function load({ request, platform }) { const cf = request.cf; // Get the previous visitor from KV const previous_visitor_json = await platform?.env?.MY_KV?.get('last_visitor'); const previous_visitor = previous_visitor_json ? JSON.parse(previous_visitor_json) : null; const country = cf?.country; const city = cf?.city; const region = cf?.region; const current_visitor: Visitor = country && city && region ? { country, city, region, timestamp: new Date().toISOString() } : undefined; // Put the current visitor inside KV if (current_visitor) { try { await platform?.env?.MY_KV?.put('last_visitor', JSON.stringify(current_visitor)); } catch (error) { console.error('KV put failed:', error); } } return { last_visitor: previous_visitor }; }

How can I use geolocation IP headers?

Similar Threads

Similar Threads

Similar Threads