search

Flipboard / react-canvas

High performance <canvas> rendering for React components
BSD 3-Clause "New" or "Revised" License
13.18k stars 919 forks source link

Any plans to support server side rendering? #132

Open olalonde opened 8 years ago

olalonde commented 8 years ago

I'm trying to use react-canvas to render a tiny part of my app but it breaks my build because window is not defined. For now, I'll put the canvas stuff inside a conditional require but it would be nice if there was an effort to make this module work on the server.

matthewoates commented 8 years ago

@olalonde I may be interested in trying this soon. How are you planning on rendering on the server? https://github.com/Automattic/node-canvas?

reportbase commented 8 years ago

Canvas is a client side library only. There is no benefit to rendering html5 canvas on server. I'm not sure why a react/canvas library even exists.

Montoya commented 8 years ago

@reportbase From the README:

"Having a long history of building interfaces geared toward mobile devices, we found that the reason mobile web apps feel slow when compared to native apps is the DOM. CSS animations and transitions are the fastest path to smooth animations on the web, but they have several limitations. React Canvas leverages the fact that most modern mobile browsers now have hardware accelerated canvas."

matthewoates commented 8 years ago

@reportbase : there's plenty of use cases, namely rendering images on the server using the same code as the client.

reportbase commented 8 years ago

@matthewoates : keep in mind, canvas is very slow for image generation. There are much faster ways to generate an image on the server. I'm not sure why the convenience of use javascript code on the server would motivate you to use canvas on the server. Feel free to check out my site at http://bull.report for correct usage of the canvas library.

olalonde commented 8 years ago

FWIW, I wasn't really trying to get react-canvas to render on the server (though that would be cool), just to not have it crash when loaded server side because of the reference to window. I am no longer using react-canvas but I worked around it by conditionally requiring it (something like const canvas = process.SERVER_SIDE ? null : require('react-canvas');)

matthewoates commented 8 years ago

@reportbase : The canvas API is preserved, but the underlying implementation for canvas through node-cavas uses Cairo. The only similarity node-canvas has with the canvas implemented in the browser is the API, therefore bringing up browser canvas performance is irrelevant.