AJAX Posts Reverse Order After Refresh the Page When Multiple Posts are Created in the Same Minute from the Same User

Я работаю над проектом социальной сети, используя Django для бэкенда и JavaScript для фронтенда. Пользователи могут публиковать новый контент, а глобальная лента обновляется как динамически через Ajax, так и при обновлении страницы.

Все работает нормально, за исключением случаев, когда пользователь создает несколько сообщений в течение одной минуты. Изначально самое новое сообщение отображается вверху, но когда я обновляю страницу, порядок сообщений для этого конкретного пользователя меняется на противоположный, где старые сообщения оказываются выше новых.

Для упорядочивания постов я использую поле created_at (с DateTimeField). Вот фрагмент ключевого кода, который обрабатывает получение глобального потока и обновление DOM:

function updateStream(posts) {
    const postContainer = document.querySelector('#post-list');

    posts.forEach(post => {
        let postElement = document.getElementById(`id_post_div_${post.post_id}`);

        if (!postElement) {
            postElement = document.createElement('div');
            postElement.id = `id_post_div_${post.post_id}`;
            postElement.className = 'post';
            postElement.innerHTML = `
                <p>
                    <strong><a href="/profile/${post.author_username}" id="id_post_profile_${post.post_id}" class="post-profile">
                        ${post.author}</a></strong>: 
                    <span id="id_post_text_${post.post_id}" class="post-txt">${sanitize(post.content)}</span>
                    <span id="id_post_date_time_${post.post_id}" class="post-date-time">${formatDate(post.created_at)}</span>
                </p>
                <div class="comments" id="comments_${post.post_id}"></div>
                <div id="id_comment_input_div_${post.post_id}" class="add-comment">
                    <input type="text" id="id_comment_input_text_${post.post_id}" placeholder="Add a comment" />
                    <button id="id_comment_button_${post.post_id}" onclick="addComment(${post.post_id})">Submit</button>
                </div>
            `;

            // Add new post to the correct position
            postContainer.appendChild(postElement);
        }
    });
}

Что я пробовал:

Добавил обратную сортировку по post_id, когда посты имеют одинаковый created_at, но, похоже, это не решило проблему полностью. Мой вопрос: Как сделать так, чтобы новые сообщения всегда отображались вверху, даже если несколько сообщений создано в течение одной минуты?

Любые предложения или указания на то, как правильно с этим справиться, будут очень признательны!

Вернуться на верх