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 · 8 comments

Comments

@tgoldenberg
Copy link

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

This comment has been minimized.

Copy link
Member

commented Nov 21, 2017

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

@tgoldenberg

This comment has been minimized.

Copy link
Author

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

@bpostlethwaite

This comment has been minimized.

Copy link
Member

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?

@tgoldenberg

This comment has been minimized.

Copy link
Author

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.

@bpostlethwaite

This comment has been minimized.

Copy link
Member

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.

@aulneau

This comment has been minimized.

Copy link

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>
@tgoldenberg

This comment has been minimized.

Copy link
Author

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...

@nicolaskruchten

This comment has been minimized.

Copy link
Member

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.