SSR data loading in a real world (push vs pull)

[marianmeres]

Docs are suggesting this "push" data load approach:

// +layout.server.js
export async function load() {
    return {
        posts: await db.getPosts()
    };
}

Which works fine. But, imagine this simplified template:

{#each data.posts as post}
    <li>
        <a href="/blog/{post.slug}">{post.title}</a>
        {#if post.isFeatured}
            {#each post.extras as extra}
                <Extra {extra} />
            {/each}
        {/if}
    </li>
{/each}

where we need some extra details for the isFeatured posts... so, something like this comes to mind:

// +layout.server.js
export async function load() {
    return {
        posts: await db.getPosts({ loadExtrasForIsFeatured: true }),
    };
}

Which is doable, but suddenly our rendering and data loading logic has to stay in sync. It would be convenient to decide what data we need only at the render level. Similar to something like this:

...
    {#if post.isFeatured}
        {#each await db.getExtras(post.id) as extra}
            <Extra {extra} />
        {/each}
    {/if}
...

But, AFAIK this "pull" approach is not possible at the SSR level...

Am I missing something or completely thinking wrong here? Can it be worked around?

What other approach would you suggest?

Thank you for your great work and thank you in advance for any suggestions.

I think my question is similar to this: #9204