I have created an isomorphic React application. Everything works fine till I was trying to put some animations on my elements. If it was a client-side rendering app, I would do that by writing the animation function and invoke the function in componentDidMount() component lifecycle method. But unfortunately, this method won't work for SSR.
How to invoke my animation function in this case? (tried componentWillMount already, it's not working)
By design, no lifecycle methods should be invoked when rendered by the server (except componentWillMount). This is because server side rendering is primarily for displaying site layout before data can be fully loaded and cannot really help for client side animations.
To get lifecycle methods to work on the client, simply use ReactDOM.hydrate(), which is specifically designed to be used with server rendered content using the same component on the client. This way, componentDidMount and all other life cycle methods will work as expected while still containing the server rendered content.
If you don't want to do this, and you just want to use React to generate HTML from the server, you should probably consider using a regular templating language, instead. However, if you still want to call animations without using React from the client, you should try to make your animation work with pure CSS animations.