最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - react sever-side rendering dealing with `window`, `localStorage` - Stack Overflow

programmeradmin5浏览0评论

When server-side rendering a React ponent that uses window or localStorage these browser global variables, I always need to add

if (typeof localStorage !== 'undefined') { // then do stuff }

to get rid of those 'localStorage is not defined' errors.

Is there any other decent solution to this?

Edit my use case

  1. window is for its attributes like innerwitdth, and adding raw browser events like resize
  2. localStorage is to store JWT token

When server-side rendering a React ponent that uses window or localStorage these browser global variables, I always need to add

if (typeof localStorage !== 'undefined') { // then do stuff }

to get rid of those 'localStorage is not defined' errors.

Is there any other decent solution to this?

Edit my use case

  1. window is for its attributes like innerwitdth, and adding raw browser events like resize
  2. localStorage is to store JWT token
Share Improve this question edited Jun 21, 2016 at 2:09 xiaofan2406 asked Jun 21, 2016 at 1:25 xiaofan2406xiaofan2406 3,3105 gold badges28 silver badges36 bronze badges 5
  • 1 by not using it or add another kind of conditional which check client or server, or use cookies instead of localStorage – YOU Commented Jun 21, 2016 at 1:28
  • 3 Isomorphic applications generally only maintain state server-side using sessions. See this for example. It's much simpler than conditionally maintaining state client-side and trying to figure out an equivalent alternative on the server-side as an after-thought. – Patrick Roberts Commented Jun 21, 2016 at 1:36
  • Try react-cookie – Diego Haz Commented Jun 21, 2016 at 1:53
  • Possible duplicate of JSON object vs window variable for passing server-side rendered initial state using reactjs – Paul Sweatte Commented May 4, 2017 at 21:55
  • @DiegoHaz react cookie has limitation of 4kb data.. – Ritesh Commented Apr 10, 2018 at 10:15
Add a ment  | 

1 Answer 1

Reset to default 2

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 mon 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)

发布评论

评论列表(0)

  1. 暂无评论