-
Notifications
You must be signed in to change notification settings - Fork 593
Description
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:
- Make
_prerender
function on Choo await for the promise returned by the render to resolve - Make
bel
/nanohtml
also accept promises - Make
mount
start
,toString
methods on Choo async since they rely on_prerender
There are a few open-ended questions at the moment:
- Error handling in general
- What should happen when a
render
event is triggered within a render call - Possibly others and I would like to open that discussion to the community