When someone disables JS in their browser, the main contents of the website will not render, with only the header and the footer rendering.
The main reason why the contents don't render without JS is because we use Framer Motion to handle page transitions and page animations; the contents would be considered a client component due to being wrapped by Framer's motion
element, so it would not work without JS enabled.
I've thought about dropping Framer mid-development just so each page could render out without JavaScript, but we didn't like how routes transitioned between each other all statically. Additionally, since her user-base is mostly coming from mobile, and most likely haven't gone out of their way to disable JavaScript in their browser's settings, it didn't really make sense to put extra thought into it, at least for the time being.
A worry I do still have by keeping Framer is how it would affect SEO. Since each page fades in from an opacity of 0 to 100, I'm concerned if the opacity starting at 0 would be enough of a problem to negatively impact the website's SEO.
PROS OF REMOVING FRAMER
- Better SEO (?) since each page will render out immediately
- The main contents would be considered server components, and will render out even with JS disabled
CONS OF REMOVING FRAMER
- Transitioning between pages feels lifeless. We do wanna give the website personality after all
- Even if the main contents render out with JS disabled, any client component (ex. the nav menu button, the cards that open up a modal) wouldn't work. Although, I must acknowledge that this could be mitigated if I rewrote the logic and utilize Next's route interception feature
I'm mostly writing all of this out and putting it up just so I can reference this in the future if I do decide to do something about it. Also up in the case that a random (and friendly) person with much more knowledge about this stuff than me can chime in w/ their perspective lmfao