SWR with Starfield
You don't need to use SWR, nor should it be the default for everything. Use it when you want to keep a UI chunk up-to-date (as much as possible, anyway); it requires specific UI hints to make sure people understand that it behaves this way.
Most of the time, simply load the latest available data upon the most recent user interaction, like any other web app.
SWR (Stale-while-revalidate) is a data management approach where an app would show whatever information it has available, but also silently updates behind the scenes (either on-demand or based on usage patterns, like upon reconnecting to a network) and changes the information to the latest version when it can.
It's a very handy interface tool, especially for very slow moving data or rapid in-place updates (e.g. information in a table, not new items in a social media feed). However, it can be confusing to end users, who aren't used to web apps automagically updating under their fingertips.
Read on to learn if SWR is right for you, and how to use it with Starfield.
Should I use SWR?
A few basic rules about SWR:
- Don't use it everywhere. Keep it focused on places where users expect updates. The next section outlines how to build a UI for SWR; if the UI is "too hard" to build,
- Isolate SWR to logical blocks, and use it consistently within it. For example, if you're building a twitter clone, if SWR is refresing the "likes" number, make sure an edit to the tweet message is also SWR. Or, if you have an orders table, update the entire table with SWR.
- Also consider other technologies, like Websockets.
UI patterns with SWR
- Show a "Updated just now"/"Loading" indicator state for each thing under SWR. This ensures that people know the UI is self-updating.
- If multiple items in a collection are all under SWR, show one indicator for the whole collective.
- Have a refresh button for manual updates.
- Avoid data loss (both real or perceived; e.g. don't wipe a user's textarea, or scroll it off-screen so they think they lost it).