-
Notifications
You must be signed in to change notification settings - Fork 706
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: Server-Side Rendering #22
Comments
Hello! I'm not familiar with the details of next.js, so will have to do some reading before I can help. To give you some immediate thoughts, the only component that uses |
So I've tried isolating those window references, but I couldn`t make it build without errors. To test the server-side rendering, I used Yalc to link the repository as an NPM package which didn't work. It's not clear how to publish the package correctly. I did
I tried removing the whole Debug component which helped with the "window not defined" problem, but then jumped to "document is not defined". This is the part that deals with window in debug.js but it`s nearly not enough since Mousetrap has it inside as well.
Server-side rendering is becomming a standard and it`s a problem in many React libraries. So I am giving up and will move probably move to some generic redux wrapper instead. Too bad, looked real nice... |
The About the rest, I'll take a look once I've finished up the current set of features planned and see if we can get this working. |
Also, how were you still having a Mousetrap dependency once you removed debug.js? |
That would be awesome. I just pasted the code for handling window in debug.js that wasn't enough since Moustrap is imported at the top of the file. Once I removed debug.js altogether, the Moustrap is no longer a problem. But anyway, I guess that is not really a solution, is it? |
Maybe something like this could help... https://www.npmjs.com/package/window-or-global |
I think all the code in |
Ugh, had to revert. Looks like changing The strategy I followed initially was to change all the CSS imports to something like: if (typeof window !== 'undefined') {
require('somefile.css');
} Any ideas on how to tackle CSS modules with SSR? |
So I am trying to do SSR on my project. This is the code I wrote for SSR: This code is in a separate branch (ssr) because it does not work yet. I am getting this error trying to run the server:
So the error seems to be initially coming from a dependency of boardgame.io: react-json-view. I found this thread with other users having the same issue: In summary, this is happening because they have style loader module of webpack as their dependency. Even if we removed this dependency (react-json-view) from boardgame.io, this would not fix the issue as boardgame.io is itself dependent on style loader. So this goes back to what @nicolodavis was trying to do, avoid loading styles on the server. Another option suggested on the thread was trying to use https://github.com/kriasoft/isomorphic-style-loader instead. I will investigate those options further and let you know what I find :). SSR is very important for my project. |
I got it working! 👏 Just submitted a PR, also managed to do a test so we dont break SSR in the future 😆 |
boardgameio#140) * Removing react-json-view dependency to allow SSR * Disabling socket io connection for ssr * Creating test for Server side rendering * update package-lock.json * replace quotes with <strong>
Hello,
I'm currently trying to use boardgame.io together with next.js.
Because the
Server
part exports a Koa server, I went with this example to create a basic project:https://github.com/zeit/next.js/tree/canary/examples/custom-server-koa
However, when I run the code, I get a
window is not defined
error.So I did some research and it's of course because Next.js is SSR and the
Client
component requireswindow
to be present. So I made it like this:According to next.js, the client side code only runs, after
componentDidMount
has been triggered, so obviouslywindow
should be available, but somehow it isn't. Something insideClient
seems to run before that happens.The text was updated successfully, but these errors were encountered: