Cloudflare Developers•2w ago

How can I use geolocation IP headers?

👋 Hello! I’m using SvelteKit with the @sveltejs/adapter-cloudflare, deploying to Cloudflare Pages. Some websites show a nice touch like:

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';

Is there an equivalent or best practice for doing this on Cloudflare Pages? Any pointers or examples would be much appreciated! ---

4 Replies

Walshy•2w ago

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•2w ago

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. 1. Having await seems to be the only way to reliably store/retrieve the visitor, but won't that incur any performance penalties? 2. Is there anything you would do differently from what I have thus far? 3. Would the same work if I were to move to workers? Keep seeing the recommendation to move from Pages.

Walshy•2w ago

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.

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

I think this looks good

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 Pages Functions are literally Workers

DavisOP•2w ago

Appreciate the help. That answers my questions. Cheers.

Gaming

Programming

How can I use geolocation IP headers?

Did you find this page helpful?