Comments (5)
Sweet, thanks for the direction, I will take a look. Again, appreciate all the work you've put into this!
from react-pixi-fiber.
Hi @KylePalko, it should be fairly easy to fix for server-side rendering by lazy loading the Stage
(this is now very easy with React 16.6+) and rendering it behind a flag that checks if the render is within browser context. The other issue is that PixiJS itself probably needs a window object so it would need to be lazily imported as well.
However, I understand this might be an unnecessary boilerplate so I am open to receiving a pull request that solves this without having to change the app code. See #80 for more context. Please note that stubbing Stage
to return children is probably not the best idea – for SSR it would be better to just render the canvas
element with its props and skip the logic related to instantiating PixiJS Application and react-pixi-fiber rendering.
from react-pixi-fiber.
React.lazy
isn't available for SSR yet :/ The React docs point towards using Loadable Components module though. Is that what you were imagining?
for SSR it would be better to just render the canvas element with its props and skip the logic related to instantiating PixiJS Application and react-pixi-fiber rendering.
Can you give me a bit of direction on how this might work? How would I render the canvas
element server-side? You're blowing my mind here man XD
EDIT: Also, thanks for all your hard work, this module is awesome!
from react-pixi-fiber.
@KylePalko ah, you're right, lazy is not in SSR yet.
How would I render the canvas element server-side
Stage already renders canvas
element so probably nothing to change here.
I think all that's really needed is:
- Not loading PIXI if not in browser context. This would probably mean changing this import to require behind
if
condition. - Changing Stage's componentDidMount to no-op if not in browser context.
from react-pixi-fiber.
See if the solution in this comment fits.
from react-pixi-fiber.
Related Issues (20)
- Performance comparison with react-pixi? HOT 1
- TypeError: Cannot read properties of null (reading 'stencil') at ContextSystem.push../node_modules/@pixi/core/dist/esm/core.js.ContextSystem.validateContext (core.js:5206) HOT 4
- NPM installation of library react-pixi-fiber@[email protected] throws error HOT 4
- 1.0.0-beta.13 missing index.es.js HOT 12
- Error: Vite(esbuild) unable to find matching export in PIXI.js HOT 14
- Attempting to compile an app with PixiJS 5.3.11 or 6.2.2 and the latest beta 15 result in an error. HOT 1
- Is this project dead? HOT 2
- Webpack complains about missing exports in pixi.js HOT 3
- Could not resolve dependency: peer react@"^17.0.2" from [email protected] HOT 3
- Stage is not compatible with the React's StrictMode HOT 5
- Pointer Events don't fire at all HOT 2
- Upgrade reconciler
- Text components style property is not correctly typed HOT 2
- Issue on running demo HOT 1
- rightupoutside event may not be supported? HOT 2
- Can't use with new versions of PixiJS HOT 6
- export 'extras' (imported as 'PIXI') was not found in 'pixi.js' HOT 3
- Explicit "createStageClass" usage causes crash HOT 1
- Breaking changes in React experimental branch
- TypeError dispatcher.useSyncExternalStore is not a function 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-pixi-fiber.