HTML async script with react SSR

Question

I am developing an app with webpack/react/redux/node and have already implemented Server Side Rendering. Everything works so far, so I rather have a general question. I used webpack to bundle my JS files and also activated code splitting. Therefore I have two bundles:

bundle.js (my Components and custom code)
vendor.js (react/redux modules)

Now, as far as I know, when I place both of these in a normal <script> tag, the browser waits until the page and all resources are fully loaded to display anything. That way I lose the performance benefits of SSR, don't I? I mean the page still gets parsed by Web crawlers, e.g. google, but a user still has to wait for the page to be fully loaded, before seeing anything.

I think putting async in the script tag would solve the problem, e.g.:

<script async src='/vendor.js'></script>
<script async src='/bundle.js'></script>

However, with async in the tag, vendor.js will normally be finished loading after bundle.js, since it is a bigger file.

Is there something I got wrong or is there a solution for this problem?

I am actually interested in the premise of the question: if OP doesn't add defer for the script tags, does it defeat the purpose of SSR? — Joji
– Joji, Commented Dec 28, 2020 at 23:34

FredG · Accepted Answer · 2017-02-24 14:35:50Z

1

You should try the defer attribute on the scripts tags.

async scripts are parsed and executed as soon as the resource is downloaded while defer scripts are only executed when they appear in the markup.

The article Prefer DEFER over ASYNC cover this subject in depth.

answered Feb 24, 2017 at 14:35

FredG

2762 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

gisderdube Over a year ago

Thank you very much. That was exactly what I needed

appu · Accepted Answer · 2017-02-24 14:59:20Z

1

You can use defer or async on files which doesn't impact the page parse lifecycle. For example analytics scripts. You can check the difference here https://www.w3schools.com/tags/att_script_defer.asp

But for startup performance you will have to split your bundles further with those which will be required during startup and those which won't and then you can use 'async' or 'defer'. I would prefer using 'defer' on a big file.

answered Feb 24, 2017 at 14:59

appu

361 silver badge6 bronze badges

Collectives™ on Stack Overflow

HTML async script with react SSR

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related