Chapter 10. Handling server/browser differences
This chapter covers
- Isolating environment-specific code
- Enabling routes that are used on only the browser or the server
- Using static methods to add headers and page metadata to each app route
- Implementing consistent usage of a user agent between the server and the browser
This chapter and the next cover a variety of topics that will help you deal with real-world cases that I’ve run into when building isomorphic apps. As you embark on building a production-ready app, you’ll often run into use cases that need special handling within the context of this type of architecture. Table 10.1 lists examples of these kinds of situations.
Table 10.1. Common problems and solutions within an isomorphic app
| Solution |
Server |
Browser |
|
|---|---|---|---|
| Initialization code that can run only in the browser. | Use an environment Boolean flag. | ✓ | |
| Define SEO metatags so they’re rendered on the server. | Use a static function on top-level route components. | ✓ | |
| Progressive enhancement: feature detection is different between the browser and the server. | Feature-detect only on the browser. | ✓ | |
| Progressive enhancement: if user agent detection is required, how do you create a single source of truth? | Use the server user agent and store it in a standard way in the app store. | ✓ | |
| Error handling duplication—both the server and the browser have logic to handle 404 states. | Save user-facing errors in a standard format that makes determining when to show a 404 easy. | ✓ | ✓ |