Server Rendered React Feature Development Checklist
When I'm building new features in Remix, this is my checklist to make sure I didn't screw anything up:
- Document Request
- Hydration
- Browser Transitions
Document Request
When the user types a url into the browser and hits enter, this is a "document request" to your server, so it's a good place to start.
Can you meet all of the async requirements and spit out the proper HTML? This is the easiest task because you don't have any existing UI yet. You can do anything you want before you start sending bytes to the browser.
But you gotta make sure you don't use any browser APIs like this or else it'll blow up!
let [state, setState] = useState(localStorage.oops);
This is where I start in Remix.
Hydration
Now you need to make sure that everything you had on your server is available for the FIRST render in the browser. You can't be going off and fetching stuff in a useEffect or else the markup doesn't match.
This means anything used in to render on the server needs to be available on the client. Typically dump this on window and initialize all your components with that.
Don't skip this step! If you forget to check this, and your document requests are working, you might not realize your app is broken because the server rendering is working fine. Happens to me often 😆 You click around and think "cool! it works!", open the browser console and realize the whole thing blew up at hydration.
Browser Transition
When the user clicks a link, and you're using a client side router, you need to figure out how to everything you did on the server, but this time in the browser.
You have to make sure that anything that happens here results in the same UI as if they had clicked a normal <a href> without a client side transition.
You have to figure out how to handle errors, and it'd be great to have it give the same UI as a document request.
You have to deal with what to show the user during the transition. In Remix we act like browsers and wait for all async dependencies before changing screens to avoid spinnegeddon and a bunch of layout shifting.
So anyway ... that's how I approach feature development in Remix (and also the tests that I write).
- Document Request
- Hydration
- Browser Transition
I want the UI to be the same across all three.
