Preact: A better server rendering API?

[d6u]

Is it possible to do server rendering and repopulate on client side? Do you support async rendering as I mentioned here as one of the issues making React server rendering hard to use?

[developit]

@d6u Currently server-rendering is achieved using preact-render-to-string. It has similar limitations to the issue you linked, do you have any suggestions for working around those?

Personally I do static pre-rendering, so async components are not part of my server-side pipeline. Plus with Preact my frontend bundles are small enough that often server-rendering is unnecessary (obviously this depends if you're building something content-centric, or using something like the application shell architecture).

It might be worth throwing an issue into preact-render-to-string, though it seems like supporing async static rendering would be done via a module that straddles both preact and preact-render-to-string.

[d6u]

@developit Thanks for your explanation. I see your argument (and I think it's valid). But for the topic of server rendering, I think the key is not async rendering. The problem can be easy solved by putting a placeholder in the rendered string, or break the rendered string apart, so the incomplete content can be inserted.

class List extends Component {
  render({items}) {
    return (
      <ul>{items.map(({id}) => <Item itemId={id} />)}</ul>
    );
  }
}

class Item extends Component {
  render({itemId}) {
    // need to fetch data for each item
    return (
      <li></li>
    );
  }
}

Assuming Item needs to fetch data from server in order to display content. In the first render pass, we can just render the List on server.

<ul>
  <some-place-holder-for-item/>
  <some-place-holder-for-item/>
  <some-place-holder-for-item/>
</ul>

After we got the data, we call renderToString on each <some-place-holder-for-item/> we can complete this template. This can be done by return a special data structure from renderToString, e.g. array ['<ul>', '<some-place-holder-for-item/>', ... , '</ul>'] and users can build tools around this API.

[developit]

There are some good demos of this now, I think we can close this ticket. That being said, streaming server rendering is definitely on the backlog.

[kurtextrem]

@developit any news?

[developit]

About streaming rendering? nope! I've not yet had a reason to need it - either I use preact-render-to-string (which is fast enough that streaming would only add overhead) or I render into undom or jsdom using Preact's DOM renderer and "flush" the HTML at some later point in time.