在React SSR应用中实现服务器与客户端一致的确定性数组随机化

const myArray = [{ id: 1 }, { id: 2 }, { id: 3 }];

// 假设有一个suffleArray函数，内部使用了Math.random()
function suffleArray(arr) {
    const newArr = [...arr];
    for (let i = newArr.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1)); // 使用Math.random()
        [newArr[i], newArr[j]] = [newArr[j], newArr[i]];
    }
    return newArr;
}

export default function Component({ initialArray }) {
    // 在组件初始化时进行洗牌
    const [randomizedArray] = React.useState(() => suffleArray(initialArray));

    // 假设这里有一些副作用，例如跟踪值，但它不会改变渲染结果
    React.useEffect(() => {
        // trackValues(randomizedArray);
    }, []);

    return (
        <div>
            {randomizedArray.map(({ id }) => (
                <span key={id}>{id} </span>
            ))}
        </div>
    );
}

/**
 * 创建一个种子化的伪随机数生成器函数。
 * @param {number} seed 初始种子，一个整数。
 * @returns {function(): number} 一个返回 [0, 1) 范围内伪随机数的函数。
 */
function createSeededRandom(seed) {
    // 使用一个较大的素数确保种子在合理范围内，并避免0或负数导致问题
    let s = seed % 2147483647;
    if (s <= 0) s += 2147483646;

    return function() {
        // LCG算法参数：a=16807, m=2147483647 (2^31 - 1), c=0
        // 这是一组常用的、效果较好的参数
        s = (s * 16807) % 2147483647;
        // 将结果归一化到 [0, 1) 范围
        return (s - 1) / 2147483646;
    };
}

/**
 * 使用指定的种子对数组进行确定性洗牌。
 * @param {Array<any>} array 需要洗牌的数组。
 * @param {number} seed 用于生成伪随机数的种子。
 * @returns {Array<any>} 洗牌后的新数组。
 */
function shuffleArray(array, seed) {
    // 创建数组的浅拷贝，避免修改原始数组
    const arr = [...array];
    // 获取一个基于种子的随机数生成器
    const random = createSeededRandom(seed);

    // Fisher-Yates洗牌算法
    for (let i = arr.length - 1; i > 0; i--) {
        // 使用种子化的随机数生成器来决定交换位置
        const j = Math.floor(random() * (i + 1));
        [arr[i], arr[j]] = [arr[j], arr[i]]; // 交换元素
    }
    return arr;
}

// pages/index.js (Next.js 示例)
import Component from '../components/Component';
import { shuffleArray } from '../utils/random'; // 假设shuffleArray在random.js中

export async function getServerSideProps() {
    const myArray = [{ id: 1 }, { id: 2 }, { id: 3 }];
    // 生成一个基于当前时间戳的种子，确保每次请求都不同
    const seed = Date.now(); 

    // 在服务器端进行洗牌，并将原始数组和种子传递给组件
    // 客户端将使用相同的种子再次洗牌
    return {
        props: {
            initialArray: myArray,
            initialSeed: seed,
        },
    };
}

export default function HomePage(props) {
    return <Component {...props} />;
}

import React from 'react';
import { shuffleArray } from '../utils/random'; // 假设shuffleArray在random.js中

export default function Component({ initialArray, initialSeed }) {
    // 使用传入的种子进行确定性洗牌
    const [randomizedArray] = React.useState(() => shuffleArray(initialArray, initialSeed));

    React.useEffect(() => {
        // 这里的副作用不会影响渲染结果
        // trackValues(randomizedArray);
    }, []);

    return (
        <div>
            <h2>随机化列表 (Seed: {initialSeed})</h2>
            {randomizedArray.map(({ id }) => (
                <span key={id}>{id} </span>
            ))}
        </div>
    );
}

// 示例：使用Node.js crypto模块生成种子
import crypto from 'crypto';

function generateSecureSeed() {
    // 生成一个32位的无符号整数作为种子
    return crypto.randomBytes(4).readUInt32BE(0);
}

// 在getServerSideProps中使用
// const seed = generateSecureSeed();

// 示例：使用seedrandom库
// import seedrandom from 'seedrandom';

// function shuffleArrayWithSeedrandom(array, seed) {
//     const arr = [...array];
//     const rng = seedrandom(seed); // 创建一个种子化的随机数生成器
//     for (let i = arr.length - 1; i > 0; i--) {
//         const j = Math.floor(rng() * (i + 1));
//         [arr[i], arr[j]] = [arr[j], arr[i]];
//     }
//     return arr;
// }