"Love reloaded": A DX Story

Redwood aims is to provide a fast, robust and comprehensible React Server Component experience. We're iterating towards improving that experience by adding a RSC development server that supports live reload.

What is Live Reload?

Live reload is a feature that lets you see changes in your code by automatically refreshing your browser.

For development, live reload is the simplest and most basic method for "change something, see something," a fundamental web development technique.

We'll gradually enhance our implementation to achieve fast refresh (The best development experience). However, to release code quickly and iteratively improve the development experience we felt this was a valid improvement.

Here's how the three most common instant feedback mechanisms stack up against each other:

The implementation

All of the instant feedback mechanisms require that the front code running in the browser is able to communicate with the development server. The majority of these use a web socket connection that enables two way communication.

In our implementation we opted for the higher level EventSource web API which consumes server sent events.

An EventSource instance opens a persistent connection to an HTTP server, which sends events in text/event-stream format. The connection remains open until closed by calling EventSource.close().

The downside is that this only allows one-way communication, but it's really simple: The client listens for a reload event:

const sse = new EventSource('http://localhost:8913');
sse.addEventListener('reload', () => {
    window.location.reload();
});

Which is sent from the server:

const sendReloadEvent = () => {
    if (typeof client !== 'undefined') {
      client.write('event: reload\n')
      client.write('data: \n\n')
    }
}

Conclusion

We're early in improving the development experience journey for React Server components and are focusing on making sure that we release early and often to gather feedback from the community.