パーソナライズされたコンテンツを迅速かつ簡単にVercelエッジ関数と

エッジ機能に飛び込む前に、エッジコンピューティングについて話し始めましょう.
最後の年のために、誰でも端について話し始められます.それは雲、IOT、およびブロックチェーンの次の大きなものになった.
最初に、最初のコンピュータは大きく、人々が直接アクセスすることができたコンピュータを分離しました.それからパソコンがありました.パーソナルコンピュータは、はるかに分散した方法でコンピューティングをすることができました.そのとき、データはローカルのユーザーのコンピュータに保存されました.
次に、クラウドコンピューティングが我々の生活にもたらした.畝Cloud services は、サードパーティ製のプロバイダによってホストされ、インターネットを介してユーザーに利用できるようにする基盤、プラットフォーム、またはソフトウェアです.
しかし、クラウドサービスがホストされているクライアントとデータセンター間の距離のために、クラウドコンピューティングは遅延を引き起こす可能性があります.このため、エッジコンピューティング私たちの生活に入った.

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.

要約

最初のコンピューティング:1つの集中したコンピュータ実行アプリケーションとデータをローカルに格納する

パーソナルコンピューティング:アプリケーションを実行してローカルにデータを格納する分散コンピュータ

クラウドコンピューティング:アプリケーションを実行してデータセンターにデータを格納する

エッジコンピューティング:アプリケーションを実行して、ユーザーに近いデータを格納している集中化されたコンピュータ

エッジ関数とは
エッジの機能は、エッジのコンピューティングをもたらすためのソリューションは、エッジのJavaScriptコードを実行する前に、バックエンドの開発者とフロントエンドの開発者間の継続的な配信を合理化する市場への時間を向上させる.
これは、開発チームがより簡単にA/Bテスト、カスタム認証、動的ルーティング、パーソナライゼーションなどの機能の数を提供することができます.
エッジ関数は、開発者の経験をより簡単にすることを目的としています.

実験を簡素化する

カスタマイズ認証

Webコンテンツのパーソナライズ

強化セキュリティ

エッジ関数の主な利点

より低い待ち時間
それがあなたの製品の全体的なパフォーマンスを改善することになるとき、より低い待ち時間はエッジ機能の主要な利益です.
すべてのWebアプリケーションのユーザーは、外部サーバーとのコミュニケーションを必要とするプロセスに直面したときに遅延を体験します.これらの遅延の長さは、サーバの利用可能な帯域幅と位置によって変化するが、エッジにより多くの操作を動かすことによって完全に除去することができる.
エッジ関数は、ユーザーに最も近いコンテンツ配信ネットワークエッジノードで動作するため、他のオプションよりも低いレイテンシを持ちます.

エッジ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.

前に述べたように、エッジ関数はユーザとデータソースの間のギャップを閉じます.
ウェブサイトのエッジ関数を使用すると、以下のような利点があります.

スピード

改善されたサイトセキュリティ

A/Bテストを行う可能性

エッジ関数のユースケース
基本的には、エッジ関数で何でも、すべてを行うことができます.コードを書くので、可能性は無限になります.ここでは、エッジ関数のいくつかのユースケースです.

実験:エッジ機能を使用して、リアルタイムでエッジで顧客のデータを分析します

個人化:自動的に各ユーザーの場所と他の信号に基づいてテーラーのコンテンツを配信することによって変換率を増加させる.

セキュリティ:配布し、同様にリスクを減らすためにエッジ関数を使用してエッジの位置にデータを配布.

認証:エッジでキャッシュ認証と認証を検証することにより、エッジ機能を持つ高速認証を提供します.

Vercelエッジ関数を用いた個人化と九重奏
九歩はAPI-first optimization platform それはcontentfulと他のヘッドレスCMSプラットフォームで動作します.次のSDKが含まれます.JSとバーセルエッジの機能は、エッジ上でパーソナライズを統合する簡単です.
この短いガイドラインを設定し、九九次と次の統合を歩く.エッジ関数を持つjs.このガイドでは、

次のSDKをインストールする方法.エッジ関数付き

次のコンポーネントをパーソナライズする必要がある手順.js

ステップ1:次のために九足SDKをインストールします.js関数とエッジ関数
次へ.JS SDKは、任意のコンポーネントにパーソナライズ用の動的コンテンツを追加することができます.この手順では、次のように九つ折りSDKをインストールする必要があります.js
モジュール経由で糸をインストールします

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

手順2.ミドルウェアに加える
フォルダページでSDKを_middleware.ts ファイル.

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

// Add the Personalization Middleware

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

ステップ3.アプリに九重奏を追加
さて、同じフォルダにSDKを追加しましょうapp.ts ファイル.

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>
}

追加手順
九人組のドキュメントでは、さらに詳細を見つけることができますQuick Start Guide for Developers などの追加の手順を実行します.

ハウツーset up Ninetailed App on Contentful

九重奏の使い方Profiles in Next.js

ハウツーとスタイルGoogle Analytics with Ninetailed

最下部
Vercelエッジ関数は、リクエストを処理する前にエッジでJavaScriptコードを実行する完全に新しい方法を提供します.彼らは、A/Bテスト、カスタム認証、ダイナミックルーティング、およびパーソナライゼーションのような機能を提供することを容易にします.
これはエッジ機能とエッジを使用してエッジ上のパーソナライズは、パーソナライズされた経験を作成し、全体的なユーザー体験とSEOを向上させるために行く方法です.