Comments (8)
@cktang88 It's correct that you can "fix" this issue by limiting the execution of react-spaces to the client. But a library such as react-spaces in typically something that you would want to execute on the server side because it's part of the layout.
The earlier you "exit" the rendering on your server, the more of the initial rendering has to be done on the client. In my app react-spaces was pretty high up in the rendering tree, so if I were to use the fix you linked I would just have a single page application, but with more steps. :)
from react-spaces.
Hi all. I've played around with the repro and whilst it's easy to stop the reference to document server side, because currently the library relies quite heavily on the first render to create the correct layout between spaces the result is not good once the styling/initial mark-up actually hits the client.
I'm looking into a solution to ensure the correct info makes it's way from server-side -> client-side to render the layout correctly and will keep you posted.
For now unfortunately the only workaround is to configure the react-spaces as client execution only.
from react-spaces.
Hi @karl-run Thanks for reporting. If you could setup a repro repo that would be great!
from react-spaces.
Sure thing!
https://github.com/karl-run/react-spaces-repro
from react-spaces.
@karl-run I ran into this too, I think it's a problem w/ Next.js's SSR, the fix here worked for me.
from react-spaces.
I am still looking into this to see what's feasible.
I've released a small fix (v0.3.9
) to avoid document is not defined errors when components are being rendered in a server-side environment. However bear in mind that this is not a full SSR implementation.
Pro:
- Spaces and their content should now be able to be rendered server-side without error
Con:
- Space styling and positioning is not rendered server-side. Styling will still be rendered client-side once the component is hydrated however there is a caveat that all spaces must be explicitly given a unique
id
prop for this to currently work correctly rather than relying on a dynamically given id as default.
from react-spaces.
Ok. I've added full support (experimental) in v0.4.0
. It's opt in at the moment by added the <SSR />
component from the library before any use of spaces.
There are some caveats:
- You must be using React 18 as the functionality depends on new functionality in that version, namely the
useId()
hook for consistent ID generation between server and client renders. This does mean that you now do not explicitly need to set an id on spaces as mentioned before. - Ordering of spaces in the JSX/TSX matters in a SSR scenario. Because a
<Fill />
is dependent on renders of all anchored spaces around it to determine it's size, you should always place the<Fill />
space last within a parent. This is so that it's correct size is determined in the first render. I would imagine that if you are using stacked anchored spaces, then they should appear in the JSX/TSX in the order they are stacked also.
I know this has been a long time coming but would be good to know if this works for you in your use cases.
from react-spaces.
Going to close this as resolved. Feel free to reopen if you are still having issues.
from react-spaces.
Related Issues (20)
- Dynamic minimum and maximum size when resizing does not work HOT 3
- <Fill/> width can exceed <ViewPort/> width HOT 3
- dynamic calc miscalculation HOT 12
- add sourcecode to lorem-ipsum demo HOT 1
- Trying to resize panel throws `getBoundingClientRect` error HOT 4
- bug: resizeType always is "resize-right" HOT 1
- bug: how to judge "LeftResizable" drag's direction? HOT 1
- Corner resize handles HOT 3
- Opposite edge resizing (left/right or top/bottom)
- Attempted import error: 'unstable_useOpaqueIdentifier' is not exported from 'react' HOT 2
- Auto scroll not working while dragging using react-beautiful-dnd HOT 1
- Styles not working as expected HOT 2
- handleSize seems to be ignored on Custom spaces, always 5px HOT 3
- `onResizeEnd` doesn't respect `maximumSize` if `size` === `maximumSize` HOT 1
- Is it possible to have a minimum size fill HOT 1
- Allow 'as' property to be Polymorphic (to play with libraries like Framer Motion) HOT 8
- Update peer dependencies for react to include v17 HOT 4
- Allow grid/snap points to be specified on a resizable space to constrain resizes
- Customize Handles HOT 7
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-spaces.