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
Does this work with server side rendering? no 'window' or 'document' dependencies? #273
Comments
Nope, it doesn't, also depends on mounted DOM for measurement. |
@Ajar-Ajar did you ever find a solution for isomorphic rendering? |
Isomorphic / universal React web-apps are becoming the standard
|
This should be fixed in react-slick@0.13.6 |
I'm having the same problem with a universal setup. The carousel mostly works when I use via stylesheet tags, but on first load (server-side render) there are visual bugs with the slider that disappear by clicking through links (client-side render). When I try with the npm package instead of stylesheet tags it doesn't work at all. |
Ran into this issue as well. Current solution is as @Ganasist mentioned, if working with a universal setup, it will only work properly if you include both the stylesheet and the npm package. |
@ypyang237 I'm having this issue as well. When you say "include both the stylesheet and the npm package", do you mean you are including the CDN for Thanks in advance! |
@alexanthony813 |
I have react-slick working with server-side rendering, however I get the following error when using certain responsive settings. I believe it has to do with features only available in my "responsive" breakpoint (i.e. dots): Settings: const settings = {
dots: false,
draggable: false,
fade: true,
infinite: true,
swipe: false,
responsive: [
{
breakpoint: 767,
settings: {
dots: true,
draggable: true,
fade: false,
swipe: true,
},
},
],
}; Error:
Not sure if anything can be done about this, since the server-side rendered component doesn't know the browser width and the dots will always render client-side, but maybe there's a way to make this error disappear? |
I'm having the same issue that @coreyleelarson. It even shows the difference between server and client rendering: |
This
|
getting the same error as @paradoxxxzero |
having same error as @paradoxxxzero too |
Same error as @paradoxxxzero within a universal app has popped up in the last 48 hours using v0.14.5. |
0.14.11 seems to fix the server rendering 👍 |
@paradoxxxzero @akiran indeed. upgrading to 0.14.11 solved the issue. thanks, all. |
I am using the latest build 0.15.0 but still while rendering on server side getting visual issues.Included the stylesheets too as mentioned in above comments but still not able to work out.Anyone has any working examples? |
All the issues that are related to server-side rendering, are supposed to be handled in the third release (maybe the third week) from now. |
@laveesingh Wanted to check in on this. I have been trying to find a way around this (can't just only render it Client side as we need the HTML for SEO), and am wondering if I should just wait for the official solution or keep plugging away. |
Everything works fine server wise, for me at least, what am I missing? :) |
@silicakes oddly, switching my container component from a pure component to a React.Component Class instance seems to have fixed it. Not clear on why, as of yet. |
With NextJS, it renders ok, but for some reason my last slide disappears and is just blank. I'm not sure why. I can still swipe the empty space and get back to the first slide (without animation). A little frustrating. It seems I have 3 slides, but the first slide never shows - it starts on the second slide. In addition if I resize the window, everything breaks. If I wrap the Slider with NoSSR - the width is incorrect and it doesn't appear to be 100% correct. Is there a viable alternative to slick using NextJS? |
Could you regenerate it in CodeSandbox? |
@laveesingh well I'm glad I threw together an example project because I can't actually reproduce my errors. So something must be wrong with my project. I'll do more investigation. Thank you for the help. here an example of react-slick with nextjs if anyone is interested. https://github.com/sscaff1/react-slick-example |
I also have visual issues with server rendering (even with the latest v0.20). I don't get errors, but all the images initially show inline (not hidden) causing the page to look odd and distorted when first loaded, and then it resolves once the initial load is finished on the client. So the end result is an unprofessional looking distortion of the page that takes a second or two to get corrected. I haven't myself tried any of the techniques to prevent the component from rendering at all on the server, and those techniques may be a viable temporary workaround, but it seems like this type of thing could be handled gracefully inside react-slick by detecting the execution environment and rendering appropriate content based on whether the environment is server or client. |
It now supports server side rendering quite well. In fact, our demos are built with gatsby.js. There may seem some slight glitch on load, but most of them have been fixed and these fixes will be deployed soon enough. |
@laveesingh Hi mate, I got a use case where I would like to have initialSlide randomly generated on every page load. However, it does not work as html code between server and client differs. How would you handle that? Has anyone else faced the same problem? Cheers. |
@KevinOl I'm not sure exactly what you mean, but I've created a component that wraps react-slick and only actually renders the react-slick component client-side. If the environment is server it only renders the first slide (not using react-slick). This gives complete control over what happens server-side and isn't dependent on any react-slick code. Just an idea that might make things easier. |
@dlong500 The idea is to display a random slide whenever someone browses the site. Therefore, initialSlide is used with a random number based on how many slides there are.
My issue is that this leads to messing around with the content of the slides. Eg. contentA should be in slide1 but it results in contentA being in slide4 Ideally I would like the rendering of the server being same as the client. Meaning having the same random slide shown client and server sides. Of course using Math.random that way will generate different output on server and client. I thought using https://github.com/davidbau/seedrandom. Anyway I may use your solution and have some sort of placeholder. Even if this means having some sort of 'visual flickering'. Thanks! UPDATE |
I've been trying out too many carousel react components that assume they are running on the client and have 'window' and 'document' dependencies all over the place. This breaks the code trying to integrate it on an isomorphic app...
The text was updated successfully, but these errors were encountered: