SSR for A/B tests in Sveltekit - server-side-rendering

Question

Given 2 scenarios:
Making A/B tests for website (with SSR).
Making server side rendered UI depends on user's settings.
What would be the correct approach with this tasks with Sveltekit?
use: directive that instantiate dynamically loaded components depends on cookie that passed to it?

Answer 1

Good topic!
I think it can be done this way:
<script>
import { browser } from '$app/environment';
let testName='testname'; // info about test - name of test
let testVersion='0'; // version - '1','2','3','4'
let testLengthDays=30; // number of days for testing
function setCookie(cname, cvalue, exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
let expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
let name = cname + "=";
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(';');
for(let i = 0; i <ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
//Test if browser
if (browser) {
if (getCookie(testName)=="") {
//Test if cookie exists (2 means that it is A/B test, it can be changed to 3 for A/B/C etc.)
testVersion=(Math.floor(Math.random() * 2) + 1).toString()
setCookie(testName, testVersion, testLengthDays)
} else {
testVersion=getCookie(testName)
}
}
</script>
{#if testVersion==='1'}
Test version 1
{:else}
Test version 2
{/if}
But it is not SSR, it is fully client-site