SSR w/ React Questions

[mikeacre]

Hello All,

I’m working on adding SSR into my Meteor Apps, and I am switching from Blaze over to React in order to do this. My use case is I am building sites for customers that will require some pages to be rendered server side to increase page load time, and for SEO purposes while other members areas and forms may require more complicated interaction.

Upon initial experimentation I’ve noticed that using renderToNodeStream and React.Hydrate to display for instance a blog post, would require me to serve the data from the server but than ALSO get the data from the client side or else it would be nullified in the hydrate if the data does not exist.

Is this the true case of how this works or am I missing something? My intention is to get rid of the need for the JS on the client side to have to make a second call for the data needed. I would like to be able to send all of the data on the initial page load.

Is this something that is possible? Can Anyone point me in the right direction of what tools I may need to accomplish this?

[rjdavid]

Yes, it is possible. Check #4 on my post below.

Fast initial load of dynamic pages with Meteor and React

With the changes in the new version of Lighthouse, we saw our pages drastically dropped in score as compared to the last version (version 6 vs version 5) This forced us to take a look again at how we are loading our pages and worked hard during the last couple of weeks to change the structure of our meteor pages. Here are some learnings that might help other users of Meteor and React Server Side Rendering server render package: https://docs.meteor.com/packages/server-render.html @captain…

search for the meteor package called fast-render. We are not using that package but the idea is the same i.e. we include the page data on the HTML generated and the hydration will get the data from the HTML and not querying from the server

Also check this specific post from the same topic: Fast initial load of dynamic pages with Meteor and React - #11 by rjdavid

[peterfkruger]

So am I getting right that in your SSR code you’re adding a <script> tag to the head that defines a global variable like this:

<script>
  var __bootstrap_data__ = {"incomeFilterPills":[...] ...}
</script>

…and then you’re accessing the above global constant __bootstrap_data__ in the constructor of your component that in a client-based scenario would simply trigger the loading of data in componentDidMount(). Is that all about the hydration part or is there more into it?

I like it a lot. It’s plain and simple and very effective.

[rjdavid]

Yes, that’s how it works.

With react-router, you just need to use a static context that collects all the data from all components that you need data hydrated on load.

[peterfkruger]

Oh. I’m afraid I don’t fully understand the last bit. So far I do understand that on the server…

1. …I’ll have to use a <StaticRouter> to which I will need to pass an empty context object, which at the end will be holding all the data loaded by my component (and its subcomponents) during SSR. https://reactrouter.com/web/api/StaticRouter/context-object
2. then (still on the server) in <Route component={MyComponent}/> the component will get the additional property staticContext to which the data loaded in that component can be added

However the documentation says “there is no staticContext on the client”. Does that mean that there is no built-in mechanism to facilitate the creation of the <script> tag somewhere in our main.html? So that I myself will have to make sure it gets there assigned to a global variable under a name of my choice, and that it will henceforth be the data what was initially staticContext on the server?

[rjdavid]

Static context is being used to collect the data server side that will be added to the SSR version of the html.

Check the server-render package that can handle the generation of the html

[mikeacre]

Thanks @rjdavid I’m going to try to implement this in the next few days.