Timeout on first load when pre-rendering react components

[holgersindbaek]

I have a small amount of react components that I'm pre-rendering on the server. Whenever I push my app to Heroku, I'll get a timeout the very first time I load the frontpage on the app. When I load the page again after that 30 seconds timeout, it loads fine.

I've turned caching off, so it hasn't got much to do with that. I'm using TheRubyRacer as my MRI.

I've also tried to turn off server side rendering, to make sure it's caused by server side rendering and I can confirm that it is server side rendering that that is causing this.

Why is that I get a timeout the very first time I load the frontpage of my website? Does the server javascript environment have to load the very first time a server side render occurs?

[holgersindbaek]

No one is experiencing the same thing?

[rmosolgo]

I heard of this issue before where, the server-rendering JS wasn't precompiled. So then on the first request, Rails would dynamically compile the required files. Recent Rails (or Sprockets?) versions disabled asset compilation in production, so we had this fix:

#430

Is it possible that the first request is slow because the assets aren't precompiled, so Sprockets is compiling them?

[holgersindbaek]

Hmmm... maybe?

To the expend of my knowledge, Heroku pre-compiles the assets when I push to Heroku. Is that not the case?

I'm on Ruby 2.3.0, Rails 4.1.6 and I'm using react-rails (1.7.1). Should I upgrade to the master brand of this Github repo?

How would I verify that what I'm experiencing is what you're describing?

[rmosolgo]

Heroku pre-compiles the assets

It only precompiles the things that you tell it to precompile. So, if the server-rendering files aren't on the precompile lists, they aren't precompiled.

How would I verify?

The easiest way is to make sure that compiling assets is turned off on production:

# config/environments/production.rb 
config.assets.compile = false 

BUT, that will make the page 💥 if it tries to precompile something. Do you have a staging environment where you can test that configuration?

Alternatively, you can find your precompile patterns (Rails.application.config.assets.precompile) and see if it includes your server rendering files.

[holgersindbaek]

Which files exactly are my server rendering files? Are those the files I've set in my react config:

config.react.server_renderer_options = {
files: ["react-server.js", "react_components.js"], # files to load for prerendering
replay_console: true,                 # if true, console.* will be replayed client-side

}

If I paste this in the console Rails.application.config.assets.precompile, I get this:

[#<Proc:0x007fa4ba98de90@/Users/holgersindbaek/.rvm/gems/ruby-2.3.0/gems/sprockets-rails-2.3.3/lib/sprockets/railtie.rb:60 (lambda)>, /(?:\/|\\|\A)application\.(css|js)$/, /bootstrap\/glyphicons-halflings-regular\.(?:eot|svg|ttf|woff2?)$/]

So it's pre-compiling css and js files (I'm guessing it's pre-compiling all my .coffee, .coffee.erb and .scss as well?!). Is it important to name the js files .js.coffee instead of .coffee?

The only thing I've added to the pre-compile list is the below:

# Precompile additional assets
config.assets.precompile += ["*.svg", "*.eot", "*.woff", "*.ttf"]

[holgersindbaek]

I tried to pre-compile the assets locally and I couldn't find my react_components.js file. Do you think that might be the reason for the slow load? Why isn't my react_components.js file being pre-compiled, when .js files are being set to be pre-compiled in Rails?

[holgersindbaek]

Add the following to my config was the solution:

# Precompile react components
config.assets.precompile += ["react_components.js"]  

I don't know if this is clear for everyone else. If not, it might be nice to add it to the readme.

Thanks for the help trouble-shooting.