Dynamic and personalised content on the Jamstack

Static websites with dynamic and personalised content, what?

Serverless and edge functions allow you to deliver content to your site's visitors with speed and personalization. They are deployed globally by default on Netlify’s Edge Network and enable you to move server-side logic to the Edge, close to your visitor's origin.

Recently we’ve been experimenting with Netlify’s Edge functions to deliver dynamic and personalised content to users in the browser.

Some other examples could include

• Show different content to site visitors based on their geolocation
• Authenticate users to an app without revealing private keys in the request
• Modify cookies for analytics and reporting

Use case scenario - Dynamic Shipping Rates for e-Commerce sites.

A recent use case for one of our e-Commerce projects was that we needed to provide different shipping rates to the user based on their geographical location.

With Edge functions from services such as Netlify, Vercel, Gatsby Cloud we can leverage middleware to deliver location based shipping rates to our visitors.

How does this work under the hood?

There are a few different ways we can deliver personalised content to the user on the frontend. Most of the time developers would use server side rendering, or making a client side request inside the browser.

This is where Next.js middleware comes in and we can use Edge Functions to intercept the request at the edge and deliver the personalised content depending on what country the website visitor is from.

Once we have that information, the edge functions can re-write and inject personalised data into the browser and provide a seamless user experience, all whilst on the Jamstack!

This is how you would achieve doing this using Vercel Edge Functions, Netlify has a very similar approach if using their platform.

Let’s take a deep dive into the code

In this example we’re going to be using Vercels Edge Functions using Next JS. Netlify also has a very similar way to achieve this if you’re using their platform instead of Vercel.

First thing we need to do is import the?Next Server?module which will give us a few handy helpers to extend.

import { NextRequest, NextResponse } from 'next/server';        

Here we're importing a helper from next/server, which extends the native Response object. The response object is going to be key in delivering our personalised content to the user.

The response object uses Next.js Advanced Middleware, where Netlify makes the visitor's geographic location available to us through the Next.js Runtime.

Taking the below code snippet inside NextJS Middleware file

export async function middleware(nextRequest) {
const request = new MiddlewareRequest(nextRequest);
const response = await request.next();
return response;
}        

Here we're:

• Exporting our middleware function
• Wrapping the Next.js request with Vercels Advanced Middleware
• Creating our response using the next method to pass on the request to the origin
• Returning our response

Now that we're set up with our Advanced Middleware, we now have access to our visitors' geography. From here we can then be creative and introduce our dynamic content from the response geography.

Rewriting the page request with Edge Functions

Now that we have the data we need, we can use it to rewrite our page request. We’re able to hook in to the response object and use methods such as “replaceText” which will allow us to target a dom element, example:

response.replaceText('.shipping-rate', shipping.rate);        

Where shipping.rate is your data source for your application. Using MIddleware like this you can define some logic and set the shipping rate to be another value based on the response geography that's being returned.

Wrapping it all up

Now when a visitor comes to your website, using Netlify’s Edge Functions you can serve dynamic data based on various information that you can retrieve combining this method and NextJS Middleware request on your Jamstack website!

There are many use cases for how dynamic data can be served, the above use cases are just the tip of the iceberg for serving up tailored experiences for your website visitors

If you want to find out more about the Jamstack and how Saigon Digital can build tailored, bespoke experiences for your brand, product or business - reach out to us today.

Author:?Nicholas Rowe