Support server-side universal/isomorphic

supermedium / aframe-react

:atom: Build virtual reality experiences with A-Frame and React.

https://ngokevin.github.io/aframe-react-boilerplate/

MIT License

1.42k stars 151 forks source link

Support server-side universal/isomorphic #42

Open ngokevin opened 7 years ago

ngokevin commented 7 years ago

Currently tied to AFRAME.components. Can't include A-Frame because of window.

https://github.com/aframevr/aframe/issues/2031

ltfschoen commented 7 years ago

@ngokevin I have created a repo https://github.com/ltfschoen/react-fluxible-test that shows how to incorporate A-Frame React into a Fluxible app (i.e. uses isomorphic architecture with server-side rendering)

ngokevin commented 7 years ago

@ltfschoen Nice! Can you give a brief description how you were able to get it to work?

ltfschoen commented 7 years ago

@ngokevin

I followed the instructions at http://fluxible.io/quick-start.html to generate a boilerplate Fluxible app.
I installed the aframe, aframe-react, and exenv npm packages.
I imported aframe in client.js (client-side global document where the window object is available)
I conditionally render the aframe-react components after the DOM is available (i.e. window) with the help of canUseDOM from the exenv library https://github.com/JedWatson/exenv

ngokevin commented 7 years ago

With v4.0.x, A-Frame doesn't use AFRAME necessarily. But it uses A-Frame's .setAttribute()s now, which won't work as well server-side. Need to think about this more.

jhsu commented 7 years ago

@ngokevin looks like setAttribute is only used on componentDidMount and componentDidUpdate which are after mount, so i think that part should be ok (since only the componentWillMount lifecycle function is called server-side)