Why is my bslib page not looking as expected?

I want to put my entire sidebarLayout on the server side using renderUI(), like this:

library(shiny)
library(bslib)

ui <- fluidPage(
  uiOutput("sidebarpanel")
)

server <- function(input, output, session) {
  output$sidebarpanel <- renderUI({
    sidebarLayout(
      sidebarPanel(width = 3, 
        selectizeInput("country", "Country:", choices = c("a", "b"))
      ),
      mainPanel(width = 9,
        page_fillable(
          layout_columns(height = 200,
            card(card_header("card1")),
            card(card_header("card2"))
          )
        )
      )
    )
  })
}

shinyApp(ui = ui, server = server)

However, it loses the styling and looks like this:

If I keep my sidebarpanel block on the ui side, it looks fine:

library(shiny)
library(bslib)

ui <- fluidPage(
  sidebarLayout(
    sidebarPanel(width = 3, 
      selectizeInput("country", "Country:", choices = c("a", "b"))
    ),
    mainPanel(width = 9,
      page_fillable(
        layout_columns(height = 200,
          card(card_header("card1")),
          card(card_header("card2"))
        )
      )
    )
  )
)

server <- function(input, output, session) { }

shinyApp(ui = ui, server = server)

Is there a renderXXXX function I should use instead of renderUI to preserve the styling of the cards?

In a bslib app, one should use bslib's page_* functions instead of Shiny's *Page constructors. Hence, replacing fluidPage() with page_fluid() will solve your problem.

The main difference between these two functions is that Shiny's page constructors default to Bootstrap 3 and bslib's functions default to bslib's recommended version of Bootstrap (currently 5, see bslib::version_default()). In your example with the code inside the ui, the usage of page_fillable() implicitly causes to use Bootstrap 5 on the whole page, whereas in the example with the code inside the server, the old Bootstrap version gets inferred from the fluidPage() within the ui.

Please see also the related discussion in rstudio/shiny#4075.