faustjs VS emotion

Yeah, in hindsight, we would have used Next/Vercel. So we're tactically moving over to that. There are many new frameworks, like Astro, that are really exciting, but it seems like Next is the best choice if you have a data-heavy app that has a dynamic mix of SSR and static pages. For Wordpress in particular, I'd recommend that you check out Faust.js. It's build with Next and I'm amazed by how well it works with Wordpress without much effort: https://faustjs.org/

https://faustjs.org is a great headless Wordpress solution for Nextjs. I've tried several CMS solutions and ultimately WordPress is invariably the friendliest option from a client perspective.

I'm working through a large project where we're leveraging WordPress and Next.js. Check out Faust.js (https://faustjs.org/) which works as a layer to handle a lot of the query/template/routing stuff that maybe isn't super-intuitive when trying to hook WordPress up headlessly...

- FaustJS (built for headless WP on NextJS w/ full site editing capabilities)

Faust.js is the front-end JavaScript framework built on top of Next.js, created to make developing headless WordPress sites easier. The idea of this new version is to make a parity between the WordPress world that a developer might be used to but replicate it as much as possible in the JavaScript front-end world.

This is where it started. Then there is also Faustjs started by WPEngine. https://faustjs.org/

https://faustjs.org/ built specifically for headless WP

emotion [ https://emotion.sh ]

dang, I never thought about this implication, and I googled the emotionjs repo there's a currently-active open issue regarding this https://github.com/emotion-js/emotion/issues/2928

Over my years of working with React, I’ve loved using CSS-in-JS libraries like Emotion and Styled-components. However, their inherent performance overhead from injecting CSS at runtime and their incompatibility with the latest Next.js features such as App Router and React Server Components (RSC) have always been a nagging issue for me.

An early difficulty I encountered was using UI component libraries like Mantine and Material UI in the new architecture. After looking through some GitHub issues, the culprit is Emotion, a package many component libraries rely on that does not support server rendering.

In general I recommend using styled-components or emotion. These directly attach CSS to your components in a scoped way so that your CSS files aren’t stepping on each other’s toes all the time and make sure styling is colocated with the component.

I ran into this problem as well. The root cause as I understand it is emotion: https://github.com/emotion-js/emotion/issues/2928

While integrating component libraries, they may not give you full control over the order in which styles are inserted. (Example issue).

Vanilla Extract (CSS Framework) (Alternative: Emotion)