Currently, I am in the process of developing a website with Express + EJS where server-side rendering is crucial. To achieve this, I am utilizing web components without shadow dom. Each page type (home, post, page) has its own EJS view.
For instance, when loading the post.ejs view at example.com/post/my-post, I need to include the classes of my web components to register them on the page. For instance, if my HTML contains:
<navbar-element>, <big-button>, and <clock-element>
How problematic would it be to place
<script src="/javascript/components/navbar-element.js" defer></script>
<script src="/javascript/components/big-button.js" defer></script>
<script src="/javascript/components/clock-element.js" defer></script>
in the head section? I'm worried because if there are, let's say, 50 components on a single page, that would result in 50 extra HTTP requests to fetch all those scripts. Currently, performance is better compared to using JavaScript modules, but I'm unsure if having numerous components causing multiple HTTP requests for script downloads is unfavorable. If there are quicker yet still simple alternatives, I'd greatly appreciate any suggestions. Thank you!