server-side rendering in Shiny

[timelyportfolio]

For another very likely useless example/hack, we can sort-of do server-side rendering in Shiny. In reality we already are doing this with the input mechanism, but in an attempt to make this more obvious, let's build a Shiny input that is simply a container in which we will hydrate and render what we receive from Shiny. In this case we will send json-ified htmltools:tags. These could also be real React components as well.

library(shiny)
library(reactR)

ui <- tagList(
 tags$script(HTML(
"
 const ContainerInput = ({configuration, value, setValue }) =>{
 // hydrate and render value as children of this container
 // ignore value
 return React.createElement(
 'div',
 configuration,
 value.map(function(x){return reactR.hydrate({}, x)})
 )
 };
 reactR.reactShinyInput('.container', 'container', ContainerInput); 
" 
 )),
 createReactShinyInput(
 inputId = "testcontainer",
 class = "container",
 dependencies = list(list()), # fake dependency since we will define in script
 configuration = list(),
 default = list()
 )
)

server <- function(input, output, session){
 observe({
 invalidateLater(1000, session)
 # send some tags as json in value to render in the container
 session$sendInputMessage(
 'testcontainer',
 list(
 value = jsonlite::toJSON(
 list(
 tags$h1("server side (sort-of) rendered"),
 do.call(tags$ul,lapply(rnorm(10), function(x) tags$li(as.character(x))))
 ),
 auto_unbox = TRUE,
 force = TRUE
 )
 )
 )
 })
}

shinyApp(ui, server)