Server-render: what's the difference between client side vs server side

help
1

So I’m trying to understand the new server-render package: http://docs.meteor.com/packages/server-render.html

Can someone explain what exactly is happening behind the scene. I’m particularly confused about the difference between using the onPageLoad on client vs using it on server.

especially on client side, I mean… a server side rendering on the client side??? what does that mean?

2

onPageLoad is for server-side only. On client you can use your client router or a package like ‘history’ on npm to listen to the URL change client-side

3

But in the official doc - http://docs.meteor.com/packages/server-render.html, under the Usage section, it says “Likewise on the client:”, then followed with a code snippet.

4

It also says

Note also that the client example does not end up calling any methods of the sink object, because ReactDOM.render has its own similar API. In fact, you are not even required to use the onPageLoad API on the client, if you have your own ideas about how the client should do its rendering.

5

What I didn’t know is that you still have possibility to use onPageLoad on the client. This may be useful !

For example in the future our sink object could contain more data, and this may be easier to use this way.

6

If you want one more working example (using onPageLoad server side, and history client side)

7

thx. I’m able to get this work on server side.

But I’m just very confused. Especially on client side, what does it mean “server side rendering on the client side”? and what is the difference between calling it on server and client?

My question is more towards understanding the concept.

8

From what I get, the server will send a server-rendered version of your HTML first, then it will send some javascript files to your client.

That means the user will see some HTML/CSS (without javascript) first, then there will be the ‘data rehydration’ phase which means that full javascript is enabled.

So at this time the HTML sent by the server is actually overriden by the HTML/CSS/JS of the client, which takes over.

This is kind of a hybrid approach to render HTML.