Make Personalized Web Content Fast and Easier with Vercel Edge Functions

Before diving into the edge functions, let's start talking about edge computing and how we came to edge computing.

During the last years, everyone is started talking about the edge. It became the next big thing after cloud, IoT, and blockchain.

In the beginning, the first computers were big, isolated computers that people could only access directly. Then we had personal computers. Personal computers could do computing in a much more distributed manner. At that time, data was saved on a user's computer locally.

Next, cloud computing came into our lives. Cloud services are infrastructure, platforms, or software that are hosted by third-party providers and made available to users through the internet.

However, due to the distance between clients and the data centers where cloud services are hosted, cloud computing can cause delays. For this reason, edge computing entered our lives.

Edge computing is a networking philosophy focused on bringing computing as close to the source of data as possible in order to reduce latency and bandwidth use. In simpler terms, edge computing means running fewer processes in the cloud and moving those processes to local places, such as on a user's computer, an IoT device, or an edge server. Bringing computation to the network's edge minimizes the amount of long-distance communication that has to happen between a client and server.

In summary:

First Computing: One centralized computer running applications and storing data locally
Personal Computing: Decentralized computers running applications and storing data locally
Cloud Computing: Centralized computers running applications and storing data in data centers
Edge Computing: Centralized computers running applications and storing data close to users - either on the device itself or on the network edge

What Are Edge Functions

Edge Functions are the solution to bring edge computing to run JavaScript code at the edge before a request is processed, streamlining continuous delivery between backend developers and frontend developers to improve time to market.

This enables development teams to more easily deliver a number of features such as A/B testing, custom authentication, dynamic routing, personalization, and more.

Edge Functions are aimed to make the developer experience easier by allowing you to:

simplify experimentation
customize authentication
personalize web content
enhance security

The Main Benefits of Edge Functions:

Lower Latency

Lower latency is the major benefit of edge functions when it comes to improving the overall performance of your products.

Users of all web apps will experience delays when they face processes requiring communication with an external server. The length of these delays will vary depending on the server's available bandwidth and location, but they can be eliminated entirely by moving more operations to the edge.

Because Edge Functions run on the content delivery network edge node closest to the user, they have lower latency than other options.

Edge SEO

Edge SEO is a field of technical SEO that utilizes serverless (edge) technologies to execute changes to code through using the CDN as a form of middle-ground in which SEO hotfixes and recommendations can be implemented. These changes are agnostic of the website infrastructure (origin source code) and are supported by multiple CDNs through "edge functions" technology.

As it's described earlier, edge functions close the gap between the user and the data source.

Using the edge functions in the website will bring a couple of benefits, such as:

speed
improved site security
possibility to perform A/B testing

Use Cases for Edge Functions

Basically, you can do anything and everything with edge functions. Since you'll be writing code, possibilities will be infinite. Here are just a few use cases for edge functions:

Experimentation: Use edge functions to process and analyze customers' data at the edge in real-time.
Personalization: Increase conversion rates by delivering content that automatically tailors based on each user's location and other signals.
Security: Distribute your data across the edge locations with edge functions to distribute and reduce the risk as well.
Authentication: Deliver fast authentication with edge functions by caching and verifying credentials at the edge.

Personalization with Vercel Edge Functions and Ninetailed

Ninetailed is an API-first optimization platform that works with Contentful and other headless CMS platforms. It includes SDKs for Next.js and Vercel Edge Functions to make it simple to integrate personalization on the edge.

This short guideline walks you through setting up and integrating Ninetailed and Next.js with Edge Functions. In this guide, you'll find:

How to install the SDK for Next.js with Edge Functions
Steps you need to follow to personalize components in Next.js

Step 1: Install Ninetailed SDKs for Next.js and Edge Functions

With the Next.js SDK, you can add dynamic content for personalization to any component. In this step, you need to install Ninetailed SDKs for Next.js

Install module via yarn:

yarn add @ninetailed / experience - sdk - nextjs @ninetailed / experience -
  sdk - nextjs - ssr @ninetailed / experience - sdk - nextjs - esr

Step 2. Add Ninetailed to the middleware

In the folder pages, add the SDKs to the _middleware.ts file.

import {
  EdgeRequest,
  EdgeResponse
} from 'next'
import {
  NinetailedPersonalizationMiddleware
} from '@ninetailed/experiencesdk-nextjs-esr'

// Add the Personalization Middleware

export default async (req: EdgeRequest, res: EdgeResponse) => {
  await NinetailedPersonalizationMiddleware({
    apiKey: process.env.NINETAILED_API_KEY
  })(req, res)
}

Step 3. Add Ninetailed to the app

Now, in the same folder, let's add the SDKs to the app.ts file.

import type {
  AppProps
} from 'next/app'
import {
  PersonalizationProvider
} from '@ninetailed/experience-sdk-nextjs'
import {
  ninetailedSSRTrackerPlugin
} from '@ninetailed/experience-sdk-ssr'
import {
  selectNinetailedProfile
} from '@ninetailed/experience-sdk-nextjs-esr'

// Add the Personalization Provider

export default function MyApp({
  Component,
  pageProps
}: AppProps) {
  const profile = selectNinetailedProfile(pageProps)

  return < PersonalizationProvider
  plugins = {
    [ninetailedSSRTrackerPlugin()]
  }
  profile = {
    profile
  }
  apiKey = {
      process.env.NINETAILED_API_KEY
    } >
    <
    Component {
      ...pageProps
    }
  /> <
  /PersonalizationProvider>
}

Additional Steps

In the documentation of Ninetailed, you can also find a more detailed Quick Start Guide for Developers with additional steps such as:

How to set up Ninetailed App on Contentful
How to use Ninetailed Profiles in Next.js
How to integrate Google Analytics with Ninetailed

The Bottom Line

Vercel Edge Functions provide a completely new way to run JavaScript code at the edge prior to processing a request. They make it easier to deliver features like A/B testing, custom authentication, dynamic routing, and personalization without affecting latency, improving the web core vitals and SEO.

This is why personalization on the edge with Edge Functions and Ninetailed is the way to go to create personalized experiences and improve the overall user experience and SEO.

Best JavaScript Frameworks for Your Next Project

Download the best JavaScript frameworks guide to answer the 'which JavaScript framework to use for your next project?'

Download the Guide →