Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SSR #21

Closed
tgoldenberg opened this issue Nov 21, 2017 · 11 comments
Closed

SSR #21

tgoldenberg opened this issue Nov 21, 2017 · 11 comments

Comments

@tgoldenberg
Copy link

@tgoldenberg tgoldenberg commented Nov 21, 2017

doesn't appear that this library supports server-side rendering, which is a must for using frameworks like Next.js

Any plans to support this? I wanted to port over from another implementation but will have to wait :/

@bpostlethwaite
Copy link
Member

@bpostlethwaite bpostlethwaite commented Nov 21, 2017

Hi @tgoldenberg sure what would we need to do to support server-side rendering?

Loading

@tgoldenberg
Copy link
Author

@tgoldenberg tgoldenberg commented Nov 27, 2017

Hey @bpostlethwaite just make sure that it can render on the server!

Right now I believe there are dependencies on window which would not work on the server. You can easily render React to a string for SSR. Can you add some tests that ensure that this works? That would make it much more usable. https://hackernoon.com/whats-new-with-server-side-rendering-in-react-16-9b0d78585d67

Loading

@bpostlethwaite
Copy link
Member

@bpostlethwaite bpostlethwaite commented Nov 27, 2017

react-plotly.js is a light wrapper around plotly.js. Have you managed to get plotly.js to render on the server?

Loading

@tgoldenberg
Copy link
Author

@tgoldenberg tgoldenberg commented Nov 30, 2017

@bpostlethwaite kind of... I had a require statement in my render function to instantiate Plotly only if the app was in the browser. Seemed very hacky... I was hoping Plotly's official React implementation would have fixed that, but I guess not.

Loading

@bpostlethwaite
Copy link
Member

@bpostlethwaite bpostlethwaite commented Nov 30, 2017

If I understand this correctly then I think the issue is much deeper. The problem is that you can simulate the DOM in Nodejs using JSDOM. JSDOM doesn't implement the SVG API. Plotly.js uses SVG to draw vector graphics. If JSDOM can't render it then Nodejs can't render it. Nothing to do with React at all.

Loading

@aulneau
Copy link

@aulneau aulneau commented Feb 21, 2018

@tgoldenberg If you have not done so already, I'd recommend you take a look at the dynamic imports section of the next.js readme. I use next.js pretty often and some libraries aren't able to work with SSR. You can still use them in next.js, you would dynamically import the components and have them only render on the client:

import dynamic from 'next/dynamic'

const DynamicComponentWithNoSSR = dynamic(import('../components/hello3'), {
  ssr: false
})

export default () =>
  <div>
    <DynamicComponentWithNoSSR />
    <p>HOME PAGE is here!</p>
  </div>

Loading

@tgoldenberg
Copy link
Author

@tgoldenberg tgoldenberg commented Feb 26, 2018

I believe <svg /> is not the issue, @bpostlethwaite.

Server-rendered React supports the svg component.

I think the issue is the library's reliance on window. and other browser-only APIs.

I love Plotly but because of this issue opted for another chart library which doesn't rely on browser-only APIs. Happy to close this issue, unless someone prefers it to stay open...

Loading

@nicolaskruchten
Copy link
Member

@nicolaskruchten nicolaskruchten commented Feb 26, 2018

Sorry that we couldn't be what you needed here... For anyone else stumbling across this issue, though, I'd like to draw a distinction between react-plotly.js being used in an SSR context, which is possible with Next.js for example here https://github.com/aulneau/next.js-with-react-plotly.js but this doesn't actually render the SVG on the server to be shipped to the client as part of the document, which I would characterize as plotly.js being used in an SSR context.

Loading

@eric-burel
Copy link

@eric-burel eric-burel commented Jan 16, 2020

Hi, the dynamic import used in this example sounds more like bypassing the issue to me. It's not supporting SSR, it's more playing around with the build system.

By supporting SSR, we do not necessarily mean actually rendering the chart, it's clearly not feasible and does not add value.

The minimum support would simply be not failing during build. As far as I understand, the issue is that importing react-plotly will directly run code that expects window and document to be defined.
Simply deferring the run could be enough for the build to succeed, and then the user can use a NoSsr component to defer render client side.

 (STDERR) ReferenceError: document is not defined
 (STDERR)     at addRelatedStyleRule (/node_modules/plotly.js/dist/plotly.js:104683:17)
 (STDERR)     at Object.addStyleRule (/node_modules/plotly.js/dist/plotly.js:104674:5)
 (STDERR)     at Object.1.../src/lib (/node_modules/plotly.js/dist/plotly.js:72:9)

For the context we try to use Plotly in an isomorphic Meteor application.

Could this issue be reopened so we can discuss about alternate solutions?

Loading

@nicolaskruchten
Copy link
Member

@nicolaskruchten nicolaskruchten commented Jan 16, 2020

@eric-burel if you want to open a new issue to kick off a discussion that would be fine :)

Loading

@RixBai
Copy link

@RixBai RixBai commented Mar 3, 2020

@eric-burel Did you open a new issue?
We are having a same problem.

Loading

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
6 participants