M

MLOG

Български

Разгледайте Next.js Edge Config: мощно решение за глобално разпространение на конфигурация с бързина и ефективност. Научете как да оптимизирате приложението си с динамична конфигурация в edge мрежата.

Next.js Edge Config: Лесно глобално разпространение на конфигурация

В днешния забързан свят на уеб разработката, предоставянето на персонализирани и динамични изживявания на потребителите по целия свят е от решаващо значение. Next.js, популярна React рамка, предлага стабилно решение за изграждане на производителни и мащабируеми уеб приложения. Една от ключовите му характеристики е Edge Config, мощен инструмент за управление и глобално разпространение на конфигурация в edge мрежата. Тази статия в блога предоставя изчерпателно ръководство за разбиране и използване на Next.js Edge Config за оптимизиране на производителността на вашето приложение и предоставяне на персонализирани изживявания на вашата глобална аудитория.

Какво е Next.js Edge Config?

Next.js Edge Config е глобално разпределено хранилище за ключ-стойност с ниска латентност, специално създадено за предоставяне на конфигурационни данни на Next.js Edge Functions. За разлика от традиционните бази данни или API, Edge Config е оптимизиран за скорост и ефективност, което ви позволява да достъпвате конфигурационни данни за милисекунди от всяка точка на света. Това ви дава възможност динамично да коригирате поведението на приложението си въз основа на конфигурационни стойности, без да жертвате производителността.

Представете си го като глобално репликиран JSON файл, който можете да заявявате изключително бързо от Edge Functions. Това го прави идеален за:

Защо да използваме Edge Config?

Ето ключовите предимства от използването на Next.js Edge Config:

Как да започнем с Edge Config

Ето ръководство стъпка по стъпка за започване на работа с Next.js Edge Config:

1. Настройка на проекта

Уверете се, че имате Next.js проект. Ако не, създайте такъв с помощта на:

npx create-next-app@latest my-app
cd my-app

2. Създайте Edge Config

Ще ви е необходим Vercel акаунт, за да използвате Edge Config. След като влезете, навигирайте до вашия Vercel проект и създайте нов Edge Config. Дайте му описателно име.

3. Инсталирайте Edge Config SDK

Инсталирайте @vercel/edge-config SDK във вашия Next.js проект:

npm install @vercel/edge-config
# or
yarn add @vercel/edge-config
# or
pnpm install @vercel/edge-config

4. Конфигурирайте променливи на средата

Ще трябва да конфигурирате променливата на средата EDGE_CONFIG. Можете да намерите стойността на тази променлива в таблото за управление на Vercel за вашия Edge Config. Добавете я към вашия .env.local файл (или в настройките на вашия Vercel проект за продукционна среда):

EDGE_CONFIG=your_edge_config_url

Важно: Никога не комитвайте вашия .env.local файл във вашето хранилище. Използвайте настройките за променливи на средата на Vercel за продукционни среди.

5. Достъп до конфигурационни стойности във вашия код

Сега можете да достъпвате вашите Edge Config стойности във вашия Next.js код. Ето един пример:

// pages/index.js
import { get } from '@vercel/edge-config';

export async function getServerSideProps() {
  const featureFlag = await get('featureFlag');
  const welcomeMessage = await get('welcomeMessage');

  return {
    props: {
      featureFlag,
      welcomeMessage,
    },
  };
}

export default function Home({ featureFlag, welcomeMessage }) {
  return (
    <div>
      <h1>{welcomeMessage}</h1>
      {featureFlag ? <p>Функцията е активирана!</p> : <p>Функцията е деактивирана.</p>}
    </div>
  );
}

В този пример извличаме стойностите на featureFlag и welcomeMessage от Edge Config в getServerSideProps. След това тези стойности се предават като пропове на компонента Home.

6. Актуализиране на конфигурационни стойности

Можете да актуализирате стойностите във вашия Edge Config чрез таблото за управление на Vercel. Промените се разпространяват глобално в рамките на милисекунди.

Разширени случаи на употреба и примери

A/B тестване с Edge Config

Edge Config е перфектен за A/B тестване. Можете да дефинирате конфигурационна стойност, която определя коя версия на вашето приложение да се покаже на потребителя. Например:

  1. Създайте Edge Config с ключ, наречен abTestGroup.
  2. Задайте стойността на A или B.
  3. Във вашата Edge Function прочетете стойността на abTestGroup.
  4. Въз основа на стойността, покажете версия A или версия B на вашето съдържание.

Ето един пример:

// pages/index.js
import { get } from '@vercel/edge-config';

export async function getServerSideProps() {
  const abTestGroup = await get('abTestGroup');

  let content;
  if (abTestGroup === 'A') {
    content = 'Това е версия A!';
  } else {
    content = 'Това е версия B!';
  }

  return {
    props: {
      content,
    },
  };
}

export default function Home({ content }) {
  return (
    <div>
      <h1>A/B Тест</h1>
      <p>{content}</p>
    </div>
  );
}

Можете да използвате инструменти за анализи, за да проследявате производителността на всяка версия и да определите коя версия се представя по-добре. Обмислете инструменти като Google Analytics, Amplitude или Mixpanel за цялостно събиране и анализ на данни от A/B тестване.

Флагове за функционалности (Feature Flags) с Edge Config

Флаговете за функционалности ви позволяват да активирате или деактивирате функции, без да внедрявате нов код. Това е полезно за тестване на нови функции в продукционна среда или за постепенно пускане на функции за подгрупа от потребители. Подобно на A/B тестването, можете да контролирате наличността на функции с прост булев флаг във вашия Edge Config.

  1. Създайте Edge Config с ключ, наречен newFeatureEnabled.
  2. Задайте стойността на true или false.
  3. Във вашата Edge Function прочетете стойността на newFeatureEnabled.
  4. Въз основа на стойността, активирайте или деактивирайте новата функция.
// components/MyComponent.js
import { get } from '@vercel/edge-config';

export async function MyComponent() {
  const newFeatureEnabled = await get('newFeatureEnabled');

  return (
    <div>
      {newFeatureEnabled ? <p>Новата функция е активирана!</p> : <p>Новата функция е деактивирана.</p>}
    </div>
  );
}

export default MyComponent;

Персонализация с Edge Config

Можете да използвате Edge Config за персонализиране на съдържание и изживявания въз основа на потребителски предпочитания или местоположение. Например, можете да съхранявате потребителски предпочитания в база данни и след това да използвате Edge Config, за да предоставяте различно съдържание въз основа на тези предпочитания.

Примерен сценарий: Глобален сайт за електронна търговия иска да показва препоръки за продукти въз основа на държавата на потребителя. Те биха могли да използват Edge Config, за да съпоставят държави с категории за препоръки.

  1. Създайте Edge Config с ключ, наречен countryToCategoryMap.
  2. Задайте стойността на JSON обект, който съпоставя държави с продуктови категории (напр. {"US": "Electronics", "GB": "Fashion", "JP": "Home Goods"}).
  3. Във вашата Edge Function прочетете стойността на countryToCategoryMap.
  4. Определете държавата на потребителя (напр. от неговия IP адрес или бисквитка).
  5. Използвайте countryToCategoryMap, за да определите подходящата продуктова категория.
  6. Покажете препоръки за продукти от тази категория.
// pages/products.js
import { get } from '@vercel/edge-config';

export async function getServerSideProps(context) {
  const countryToCategoryMap = await get('countryToCategoryMap');
  const country = context.req.headers['x-vercel-ip-country'] || 'US'; // По подразбиране US
  const category = countryToCategoryMap[country] || 'General'; // По подразбиране General

  // Извличане на препоръки за продукти въз основа на категорията
  const products = await fetchProducts(category);

  return {
    props: {
      products,
    },
  };
}

export default function Products({ products }) {
  return (
    <div>
      <h1>Препоръки за продукти</h1>
      <ul>
        {products.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
}

async function fetchProducts(category) {
  // Заменете с вашата реална логика за извличане на продукти
  return [
    { id: 1, name: `Продукт 1 (${category})` },
    { id: 2, name: `Продукт 2 (${category})` },
  ];
}

Този пример използва хедъра x-vercel-ip-country, за да определи държавата на потребителя. Този хедър се добавя автоматично от Vercel. Важно е да се отбележи, че разчитането единствено на геолокация, базирана на IP, може не винаги да бъде точно. Обмислете използването на други методи като предоставено от потребителя местоположение или по-усъвършенствани услуги за геолокация за по-добра точност.

Географско маршрутизиране с Edge Config

Можете да маршрутизирате потребители към различни ресурси въз основа на тяхното местоположение, използвайки Edge Config. Това е полезно за предоставяне на локализирано съдържание или за спазване на регионални регулации.

  1. Създайте Edge Config с ключ, наречен countryToRedirectMap.
  2. Задайте стойността на JSON обект, който съпоставя държави с URL адреси (напр. {"CN": "/china", "DE": "/germany"}).
  3. Във вашата Edge Function прочетете стойността на countryToRedirectMap.
  4. Определете държавата на потребителя (напр. от неговия IP адрес).
  5. Пренасочете потребителя към съответния URL адрес.
// pages/_middleware.js
import { NextResponse } from 'next/server'
import { get } from '@vercel/edge-config';

export async function middleware(req) {
  const countryToRedirectMap = await get('countryToRedirectMap');
  const country = req.geo.country || 'US'; // По подразбиране US
  const redirectUrl = countryToRedirectMap[country];

  if (redirectUrl) {
    return NextResponse.redirect(new URL(redirectUrl, req.url))
  }

  return NextResponse.next()
}

export const config = {
  matcher: '/',
}

Този пример използва свойството req.geo.country, което автоматично се попълва от Edge Network на Vercel с кода на държавата на потребителя. Това е по-чист и по-надежден подход от директното парсване на хедъра x-vercel-ip-country. Функцията на мидълуера проверява дали има дефиниран URL за пренасочване за държавата на потребителя в Edge Config. Ако е така, пренасочва потребителя към този URL. В противен случай продължава обработката на заявката.

Ограничаване на заявките (Rate Limiting) с Edge Config

Въпреки че Edge Config не е проектиран да бъде пълноценно решение за ограничаване на заявките, можете да го използвате в комбинация с други техники за внедряване на базово ограничаване на заявките. Идеята е да съхранявате параметри за ограничаване на заявките (напр. заявки в минута) в Edge Config и след това да използвате тези параметри във вашите Edge Functions, за да наложите ограничения.

Важна забележка: Този подход е подходящ за прости сценарии за ограничаване на заявките. За по-стабилно ограничаване на заявките, обмислете използването на специализирани услуги или мидълуер за ограничаване на заявките.

  1. Създайте Edge Config с ключове като requestsPerMinute и blockedIps.
  2. Задайте стойността на requestsPerMinute на желаното ограничение на заявките.
  3. Задайте стойността на blockedIps на масив от IP адреси, които трябва да бъдат блокирани.
  4. Във вашата Edge Function прочетете стойностите на requestsPerMinute и blockedIps.
  5. Проверете дали IP адресът на потребителя е в масива blockedIps. Ако е така, блокирайте заявката.
  6. Използвайте кеширащ механизъм (напр. Redis или Vercel's Edge Cache), за да проследявате броя на заявките от всеки IP адрес през последната минута.
  7. Ако броят на заявките от IP адреса на потребителя надвишава ограничението requestsPerMinute, блокирайте заявката.

Пример (Илюстративен - Изисква допълнителна имплементация за кеширане):

// pages/api/protected-route.js
import { get } from '@vercel/edge-config';

export default async function handler(req, res) {
  const requestsPerMinute = await get('requestsPerMinute');
  const blockedIps = await get('blockedIps');
  const ip = req.headers['x-real-ip'] || req.connection.remoteAddress; // Вземане на IP на потребителя

  // Проверка дали IP е блокиран
  if (blockedIps && blockedIps.includes(ip)) {
    return res.status(429).send('Too Many Requests');
  }

  // TODO: Имплементирайте броене и кеширане на заявки (напр. с Redis или Vercel Edge Cache)
  // Пример (Концептуален):
  // const requestCount = await getRequestCount(ip);
  // if (requestCount > requestsPerMinute) {
  //   return res.status(429).send('Too Many Requests');
  // }
  // await incrementRequestCount(ip);

  // Вашата логика за защитения маршрут тук
  res.status(200).send('Защитеният маршрут е достъпен успешно!');
}

Важни съображения при ограничаване на заявките:

Най-добри практики за използване на Edge Config

Алтернативи на Edge Config

Въпреки че Edge Config е мощен инструмент, той не винаги е най-доброто решение за всеки случай на употреба. Ето някои алтернативи, които да обмислите:

Заключение

Next.js Edge Config е мощен инструмент за управление и глобално разпространение на конфигурация в edge мрежата. Като използвате Edge Config, можете да оптимизирате производителността на вашето приложение, да предоставяте персонализирани изживявания и да опростите работния процес по управление на конфигурациите. Независимо дали изграждате глобален сайт за електронна търговия, платформа за социални медии или друг вид уеб приложение, Edge Config може да ви помогне да предоставите бързо и ангажиращо изживяване на вашите потребители по целия свят. Разгледайте възможностите и интегрирайте Edge Config във вашите Next.js проекти днес, за да отключите неговия потенциал!