Comments (15)
A simple hack i've employed is to just still do full SSR but with style={{visibility: 'hidden'}}
on a top level container and then switch that off through the onLayoutComplete
ref.
I tried initialising masonry on the server through a hacked componentWillMount
but this was just plain silly. 🤦♀️
from react-masonry-component.
I believe server side rendering in place is not a trivial thing to accomplish. There are a few ways to solve this problem, and probably a few more I haven't considered.
-
Assuming responsive design, on the initial request you do not know the width of the viewport, only the useragent. From there you would have to map devices to likely viewport widths and probably use jsdom to render in place.
-
If you don't have a responsive site, you can use a similar approach to the one above but your width is a constant.
-
You can render a small subset of items server side (say 1 row or less) and load the rest on the client.
-
If using Webpack, maybe you can load your JS at the top of the page before the body is downloaded/parsed. That should probably fix the issue, but you will have to wait for blocking JS code. For this reason it might be a good idea split out all non-core JS from the core bundle.
For my projects, I am going to try 4 and 3 as they are the simplest and could lead to the biggest gains. If your site requires good SEO, then going with option 3 may or may not work for you (Google is quite good at dealing with ajax these days though)
Will update this ticket with findings.
from react-masonry-component.
This is when using isomorphic react + react-router
from react-masonry-component.
@stanleycyang have you tried using Masonry's stamp
method?
http://masonry.desandro.com/methods.html#stamp
EDIT: I just read your question again, sorry.
Currently there is no server side rendering support. You might be able to do it if you use JSDOM to render server side, but that will take a bit of work.
I am currently also looking for a solution to this, I welcome any feedback/input you have in this area :-)
from react-masonry-component.
Just coming across this now, and I'm having the same issue. Has anyone progressed this or done any work on this yet? As of now I am adding Masonry to the state in a componentDidMount().
from react-masonry-component.
I ended up going with option 3. A small number of items is rendered server side and the rest loaded async on the client.
This works for my use case. If you do not want to split item rendering between server/client maybe you can consider loading all items on the client async.
from react-masonry-component.
I changed opacity depending on where it is rendered, on client side or on server side:
var style = {
opacity: process.env.BROWSER ? '1' : '0'
};
<div style={style}>
<Masonry options={options}>
...
</Masonry>
</div>
from react-masonry-component.
@karaxuna I'm curious how that works for you? What happens on the client?
from react-masonry-component.
@afram can u explain how did u actually got option no.3 to work? the items that are rendered via server still need a browser width no?
from react-masonry-component.
I tried using it with my SSR app, and unfortunately it doesn't apply the grid inline styling on the server pass, no reason why it shouldn't. Since this grid is based on percentages, it might be the best solution for SSR grid
from react-masonry-component.
@mrsufgi I use the useragent in the request header to determine how many items to render across the first row. I then load the rest on the client.
This is a little hacky admittedly, but it does the job for my use case. We are probably going to move away from this and to a different UI layout anyway.
Hope this helps.
from react-masonry-component.
@eiriklv is there any update on this? If not I can contribute.
from react-masonry-component.
@AviKKi I'll add you as a contributor
from react-masonry-component.
@AviKKi Send me your npm user if you need to publish access
from react-masonry-component.
Thanks @eiriklv for inviting me to contribute, my username on npm is avikki
This project seems to be working fine with nextjs, so for now I'll look over other issues.
from react-masonry-component.
Related Issues (20)
- Masonry slide effect does not work HOT 2
- Small Bug HOT 2
- Is there any way to animate fading out elements on update?
- RTL Support HOT 1
- How to centre the images? HOT 1
- onImagesLoaded is being called twice HOT 1
- Is it possible to show different widths? HOT 1
- A simple CodeSandbox image gallery example
- Update to React 17 HOT 4
- What are the masonry options properties? HOT 2
- Need Help: Not able to add gutter between the cards.
- Demo not working? HOT 3
- Masonery not correctly layout because force to have invisible columns
- how to fix 'Image elements do not have explicit width and height' in pageSpeed
- Support React 18 HOT 2
- Add support for Scss/css module .
- it works only very first time and then it loses position HOT 1
- I seem to have no control over the height of the masonry component HOT 1
- Live Link
- StrictMode breaks Masonry HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-masonry-component.