Skip to content

Asynchronous render #645

@diffcunha

Description

@diffcunha

Rendering in Choo is a completely synchronous process, thought this makes things way simpler there are a few downsides from 2 perspectives:

  • CPU - Rendering complex components might block the main loop affecting the overall experience
  • I/O - It's not possible to make the render wait for asynchronous I/O events such as data loading

I believe the later is the most relevant when it comes to SSR. One of the biggest issues of sync SSR is related to data loading and code-splitting. There are several workaround strategies to deal with async I/O on a sync rendering process, most of them require a first-pass render to load or collect something you can wait on and signal when the data is available to read synchronously. Besides being a waste of CPU cycles it's also not very elegant and adds unnecessary complexity to the code. One could just not have SSR but being able to have truly isomorphic or universal app is a requirement for most content-driven apps.

When I think of async rendering I think of composing the view using sync or async components and then one of two things can happen:

  • Wait until all the components are resolved and then apply node diffing
  • Apply node diffing as components resolve

Ideally both scenarios should be allowed, giving that choice to the developer, but I believe the first one is easier to start with given the current Choo architecture. Overall it should look somehow like this:

const h = require('choo/html')

const syncComponent = (state, emit) => h`
  <p>${state.label}</p>
`

const asyncComponent = async (state, emit) => {
  const data = await asyncDataFetch(state.id)
  return h`
    <p>${data}</p>
  `
}

const view = (state, emit) => h` 
  <div>
    ${syncComponent(state, emit)}
    ${asyncComponent(state, emit)}
  </div>
`

Given that there are a few necessary steps:

  1. Make _prerender function on Choo await for the promise returned by the render to resolve
  2. Make bel/nanohtml also accept promises
  3. Make mount start, toString methods on Choo async since they rely on _prerender

There are a few open-ended questions at the moment:

  1. Error handling in general
  2. What should happen when a render event is triggered within a render call
  3. Possibly others and I would like to open that discussion to the community

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions