The front-end architecture of a modern server side rendering site - how to implement it better?

Question

go

Hello. I wondered how to build a front on a large server side rrendering site.

What I mean?
Let's say we have 10 main sections of the site on our site, where there are components that are currently typical for specific sections of the site (for example, user avatars, and in general the essence of the user, are present only in the personal account section), and some of the components are common (for example, the buy button).

How to be for example with styles? Should we split style files for different sections of sites, so that on a page of the same profile, for example, we will have styles only specific to this section + some general styles? Or does no one bother about this and merges all css into 1 common bundle? (This is also a plus, since you don’t have to worry about the fact that you can use all possible components of the system anywhere on the site, but how do we know if today, for example, there is no buy button in the profile, this does not mean that tomorrow it will not appear there based on their new TK).

Same question for js? Do I need to split into separate files specific to specific sections, or pour all the js into one file?

I understand that the breakdown gives some advantages in terms of performance, etc., but is the game worth the candle? And who does what anyway?

Answer 1

If the site is not on Angular / React / Vue, then use pug to break everything into mixins and connect and call them where necessary.
Brief and simple documentation on pug
Z.Y Breakdown is worth the time spent, because if you change the TK without breakdown it will be bad) Z.Y
2 all css and js in different files so that the pages load faster (don't forget to cache js and css)