Question about How SSR Works?

help
1

Does SSR work by:

  • Sending your entire single-page web app to the client, and then just rendering the first page without having to query the server?

…or by:

  • Loading an initial static HTML page first, and then loading your single-page web app in the background while the user is still looking at the static page? (i.e. instead of looking at a “loading” spinner, the user is looking at a full HTML page)?

Thanks in advance for the info.

2

The first way you’ve described is how kadirahq:fast-render works. The HTML comes with an initial data payload that means you don’t have to wait for another round trip to the server.

The second way you’ve described is how Meteor apps without kadirahq:fast-render typically work.

Neither is true server side rendering, where the whole page of HTML is stitched together on the server and sent complete to the client.

3

Very good. Where is the correct spot in Meteor to place the HTML which I would like the user to see, while my app loads in the background?

4

I think the initial HTML that gets rendered comes from a concatenation of the HTML (from any template) within <body> </body> tags and then all then included templates found within the <body> </body> tags are rendered, and any included templates within those, and so on. All this is done without any data until the first server round trip (after initial data-less rendering on the client) is completed. Then, when the data comes back from the server, tracker takes over and starts patching in the data-fueled pieces of the rendered templates.

5

You know if you would use React, you could easily do server-side rendering depending on the user-agent. :slight_smile:

6

I am using React. :slight_smile: What method do you recommend using for SSR? I am currently using Flowrouter and am reluctant to go to React Router.

7

Use meteorhacks:picker package for server side routes.
Create an abstraction function to createRoute() for client-side and for server-side.

In the server-side body. If the user agent is not a bot, do a next() so it goes client-side. Otherwise you can easily use ReactDOM from ‘react-dom/server’; and simply use renderAsString() for it.

I’m not sure how it would work with subscriptions though.

1 Like