react sever-side rendering dealing with `window`, `localStorage` react sever-side rendering dealing with `window`, `localStorage` reactjs reactjs

react sever-side rendering dealing with `window`, `localStorage`


Server-side rendering means your application is universal (as know as isomorphic). For the universal application, your code must be valid and works without errors in all environments. So the important rule is use one and the same programming interface for all environments.

Other words there are three common ways to create universal code:

  • Use existing Interface. Most of environments could perform one and the same elementary code such as math operation, code that process text and etc. But some times programming interface can be more difficult. For example for UI application you could storage data in HTTP Cookie, Browser and NodeJS support it both.

  • Interface emulation. If the environment does not support programming interface you must create it. For example, for NodeJS you can require JSDOM to use DOM API on server side.

  • Ignoring code execution. Your application can run specified code only in a specific environment. So you can exclude it. For example, for UI application with SSR there's no need to run GA-widget on server-side.

For your cases just use JSDOM (emulation way) and HTTP Cookie (existing interface way)