CloudBees Dellout предлагает JavaScript SDK в течение многих лет. С одной стороны, rox-node можно использовать на стороне сервера, а с другой — Rox-Browser Есть ли для клиентских флагов функций в браузере. Хотя это охватывает многие варианты использования, предел между сервером и клиентом становится нечетким.
Приложения React больше не являются одностраничными приложениями, работающими только в браузере. Все заботятся о SEO, и рендеринг на стороне сервера (SSR) становится стандартом. И если вы используете флаги функций, чтобы показать или скрыть некоторые функции или данные, SSR также имеет смысл с точки зрения безопасности: не отправляйте в данные браузера, которые он не должен получить!
При выполнении SSR вы хотите, чтобы наибольшее количество вашего кода было поделиться между сервером и клиентом. Очевидно, что наличие двух отдельных SDK делает это трудным. Мы рады представить Rox-SSR SDK для развертывания CloudBees, который упростит вашу логику. Просто используйте Rox-SSR, и он сделает все для вас магию (см. Ниже). А поскольку ROX-SSR записана в TypeScript, вы автоматически получаете все определения типографии, позволяя вам изучить API Dillout CloudBees еще быстрее и оставаться защищенным типом.
С точки зрения разработчика, используется только ROX-SSR. На заднем плане ROX-SSR автоматически переключается между Rox-Node и Rox-Browser в зависимости от среды. Мы знаем, что разработчики заботятся о размере своих приложений, поэтому мы имели в виду это, так что код, специфичный для сервера, не связан с вашим конечным клиентским пакетом. Мы успешно проверили это с помощью WebPack!
Мы также знаем, что разработчики заботятся не только о внешнем виде, но и о производительности. Развертывание CloudBees не получает значения флагов с своих серверов на каждой оценке, но вместо этого приносит конфигурацию флага один раз, а затем использует его для оценки флагов. Calling flag.iseNabled ()-локальная, постоянная операция.
Это всегда было правдой, Rox-SSR делает это еще лучше.
На стороне сервера ROX-SSR принесет эту конфигурацию и регулярно обновляет ее. Rox-SSR позволяет напрямую передавать эту конфигурацию в браузер, сделав инициализацию развертывания на стороне клиента непосредственной: никакой задержки из-за получения данных с сервера развертывания CloudBees и потенциально не раздражающего повторного потока элементов на странице из-за Конфигурация флага получена в несколько миллисекунд слишком поздно. Смотрите этот пример ниже.
- Зарегистрируйтесь и создайте свое новое приложение в roplout.io
- Инициализировать развертывание CloudBees-это должно быть один раз на стороне сервера, один раз на стороне клиента
import {Flag, Rox} from 'rox-ssr'
export const featureFlags = {
myFirstFlag: new Flag(true),
mySecondFlag: new Flag(false),
}
Rox.register('myTestNamespace', featureFlags)
await Rox.setup()
- В вашем
render ()Метод, сторона сервера, добавить<Скрипт>В пределахТеги для отправки конфигурации развертывания с сервера на клиенты:
import {Rox} from 'rox-ssr'
// ...
4) Использование флагов
featureFlags.myFirstFlag.isEnabled()
У вас могло быть что -то вроде:
let Rox = null
if (process.browser) {
Rox = require('rox-browser')
} else {
Rox = require('rox-node')
}
Замените его:
import {Rox} from 'rox-ssr'
Существует небольшое изменение для применения при объявлении нового флага/конфигурации/варианта.
До:
const Rox = require('rox-browser')
export const container = {
flag1: new Rox.Flag(true),
configuration1: new Rox.Configuration(''),
variant1: new Rox.Variant('', [])
}
После:
import {Flag, Configuration, Variant} from 'rox-ssr'
export const container = {
flag1: new Flag(true),
configuration1: new Configuration(''),
variant1: new Variant('', [])
}
Добавить (или обновить) способ отправки данных конфигурации клиентам:
import {Rox} from 'rox-ssr'
// ...
Хотите попробовать развертывание CloudBees? Проверьте 14 -дневная бесплатная пробная версия Анкет
Оригинал: «https://dev.to/cloudbees/server-side-rendering-and-feature-flag-management-59he»