서버 측 렌더링 및 기능 플래그 관리
4278 단어 devopsprogrammingmonitoringssr
React 애플리케이션은 더 이상 브라우저에서만 실행되는 단일 페이지 애플리케이션이 아닙니다. 모두가 SEO에 관심을 갖고 있으며 SSR(Server Side Rendering)이 표준이 되고 있습니다. 그리고 기능 플래그를 사용하여 일부 기능이나 데이터를 표시하거나 숨기는 경우 SSR은 보안 관점에서도 의미가 있습니다. 가져오지 않아야 하는 데이터를 브라우저에 보내지 마십시오!
SSR을 수행하는 동안 서버와 클라이언트 간에 최대한 많은 양의 코드를 공유하기를 원합니다. 분명히 두 개의 개별 SDK가 있으면 이 작업이 어렵습니다. 로직을 단순화할 CloudBees 롤아웃용 SDKrox-ssr를 소개하게 되어 기쁩니다. rox-ssr을 사용하기만 하면 모든 마법을 수행할 수 있습니다(아래 참조). 그리고 rox-ssr은 TypeScript로 작성되었기 때문에 모든 TypeScript 정의를 자동으로 가져오므로 CloudBees Rollout API를 훨씬 더 빠르게 학습하고 형식 안전성을 유지할 수 있습니다.
rox-ssr 세부 정보
개발자 입장에서는 rox-ssr만 사용합니다. 백그라운드에서 rox-ssr은 환경에 따라 자동으로 rox-node와 rox-browser 사이를 전환합니다. 우리는 개발자가 애플리케이션의 크기에 관심이 있다는 것을 알고 있으므로 서버별 코드가 최종 클라이언트 번들에 번들되지 않는다는 점을 염두에 두었습니다. Webpack으로 성공적으로 테스트했습니다!
우리는 또한 개발자가 모양과 느낌뿐만 아니라 성능에도 관심이 있다는 것을 알고 있습니다. CloudBees Rollout은 평가할 때마다 서버에서 플래그 값을 가져오지 않고 대신 플래그 구성을 한 번 가져온 다음 이를 사용하여 플래그를 평가합니다. flag.isEnabled() 호출은 로컬 상수 작업입니다.
이것은 항상 사실이었습니다. rox-ssr은 이를 더욱 향상시킵니다.
서버 측에서 rox-ssr은 해당 구성을 가져와 정기적으로 새로 고칩니다. Rox-ssr를 사용하면 이 구성을 브라우저에 직접 전달할 수 있으므로 클라이언트 측에서 롤아웃을 즉시 초기화할 수 있습니다. CloudBees 롤아웃 서버에서 데이터를 가져오기 때문에 지연이 없고 플래그 구성이 몇 밀리초 늦게 수신되었습니다. 아래의 이 예를 참조하십시오.
rox-ssr 사용법
import {Flag, Rox} from 'rox-ssr'
export const featureFlags = {
myFirstFlag: new Flag(true),
mySecondFlag: new Flag(false),
}
Rox.register('myTestNamespace', featureFlags)
await Rox.setup(<YOUR API KEY>)
render() 메서드에서 <script> 태그 내에 <head>를 추가하여 롤아웃 구성을 서버에서 클라이언트로 보냅니다.import {Rox} from 'rox-ssr'
// ...
<script type='text/javascript' dangerouslySetInnerHTML={{__html:
`window.rolloutData = ${JSON.stringify(Rox.rolloutData)};`}} />
4) 플래그 사용
featureFlags.myFirstFlag.isEnabled()
rox-node 및/또는 rox-browser에서 rox-ssr로 마이그레이션하는 방법
다음과 같은 일이 있었을 것입니다.
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'
// ...
<script type='text/javascript' dangerouslySetInnerHTML={{__html: `window.rolloutData=${Rox.rolloutData};`}} />
CloudBees 롤아웃을 시도하고 싶습니까? 14 day free trial 을 확인하십시오.
Reference
이 문제에 관하여(서버 측 렌더링 및 기능 플래그 관리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/cloudbees/server-side-rendering-and-feature-flag-management-59he
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
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'
// ...
<script type='text/javascript' dangerouslySetInnerHTML={{__html: `window.rolloutData=${Rox.rolloutData};`}} />
Reference
이 문제에 관하여(서버 측 렌더링 및 기능 플래그 관리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/cloudbees/server-side-rendering-and-feature-flag-management-59he텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
