Skip to content

Commit 93a7e8e

Browse files
committed
Added info about SSR
1 parent 419a9fc commit 93a7e8e

File tree

2 files changed

+10
-1
lines changed

2 files changed

+10
-1
lines changed

docs/tutorials/getting-started.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,3 +77,8 @@ spinner.play();"
7777
Go creative!
7878

7979
See the [API](/api/README.md) for more info.
80+
81+
## Usage with Server Side Rendering (SSR)
82+
Note that this is a client-side library, and is not meant to be run on a server. So if you are using a library like Next.js, Gatsby, Nuxt.js or Angular Universal, make sure not to run your MoJS code on the server, just on the client side. How to do that differs from the library you are using. In React based libraries you can use the `useEffect` hook or a dynamic import ([read more here](https://dev.to/vvo/how-to-solve-window-is-not-defined-errors-in-react-and-next-js-5f97)). For Angular Universal you can use Guards ([read more about it here](https://github.com/angular/universal/blob/master/docs/gotchas.md#window-is-not-defined)). Lastly if you use Vue with Nuxt.js, you will find [more info here](https://nuxtjs.org/faq/window-document-undefined), or info about using the `mounted` hook [here](https://nuxtjs.org/guides/concepts/server-side-rendering).
83+
84+
Also see tutorial on how to use MoJS inside a [React app here](./usage-with-react.md).

docs/tutorials/usage-with-react.md

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -343,4 +343,8 @@ ReactDOM.render(
343343
You can see the full example and try it out here: [CodeSandbox](https://codesandbox.io/s/mojs-react-example-kbikb?file=/src/MojsExample.js).
344344
There is also a [button example](https://codesandbox.io/s/mojs-react-example-kbikb?file=/src/Button.js) with a `Burst` animation using an object pooling array.
345345

346-
Happy animating!_
346+
::: tip Usage with Server Side Rendering (SSR)
347+
Note that MoJS is a client-side library, and is not meant to be run on a server. So if you are using a library like Next.js or Gatsby, make sure not to run your MoJS code on the server, just on the client side. You can do this by using the `useEffect` hook like we did above, or using a dynamic import ([read more here](https://dev.to/vvo/how-to-solve-window-is-not-defined-errors-in-react-and-next-js-5f97)).
348+
:::
349+
350+
Happy animating!

0 commit comments

Comments
 (0)