next-runtime VS ember-render-modifiers

I say "when it works" because it's not necessarily supported by all hosts. For example, Vercel of course supports it, but Netlify doesn't currently appear to. As for other hosts, you'd need to verify with them, but I'd imagine it varies.

View on GitHub

Note: at the time of writing this, there is a bug in Next (13.4.7). Although Next guarantees that you can use both app router and pages router in the same project, there is a bug that causes a full page reload when you browse from an app route to a pages route or vice versa. This is unfortunate but does not influence our tests.

So adding an edge function was the only workaround I found. Apparently it's an issue they're working on and I think it should be set as high priority since trailing slashes matter for SEO.

Here are a great guide on what to use when: https://github.com/netlify/netlify-plugin-nextjs/blob/main/docs/redirects-rewrites.md

It also seems like an unconscious acknowledgement that their add-on services (form handling, post-processing, identity, analytics, auth, etc.) are woefully inadequate in some cases and uncompetitive in others. $20/mo for form handling beyond 100 submissions? Okay, maybe. But the feature set is so bare it's laughable. There's minimal to no customization for notification emails, no confirmation emails, and their post-processing for form detection will bring the speed of your build pipeline to its knees on any serious site. On one site turning off post-processing yielded a build time reduction of more than double the actual build time of the site.

Not to mention the fact that by foregoing any concept of a server and forcing everything into some flavor of lambda they've created a scenario where every framework with any such functionality requires open source shepherding to function on their platform[0]. At best they've diluted their initial mission and at worst they've created an unmanageable mess. They can't even make Next.js work on their platform without causing what should issue 404s to return 500s instead[1]. The SEO implications for that are a potential death sentence and that issue has now been open for five months.

I was very optimistic about Netlify at the outset, and it worked great and still continues to work great for our test cases where we've deployed individual LPs. Where the pain seems to start is anything above a thousand pages or more, which is also coincidentally where the stakes start to get higher. I don't know how they could expect anyone at an enterprise or growing business to seriously scrutinize this platform and view it as ideal with that in mind.

[0]: https://github.com/netlify/netlify-plugin-nextjs

I don't think Netlify supports WebP currently: https://github.com/netlify/netlify-plugin-nextjs/issues/687

I made the template here using NextJS, because Netlify has a NextJS plugin, which automates the process of using serverless functions. I inserted the call to my StepZen GraphQL endpoint in the pages/api folder to keep sensitive info off the client.

A second issue was that lifecycle hooks that depended on this wrapping element no longer got invoked. Those lifecycle events contain the Element reference, e.g. didInsertElement. To migrate these we made use of the render-modifiers package. Ever since Glimmer and Octane, there are new ways to encapsulate this logic like using the constructor and destructor, writing custom modifiers, or using resources. For the sake of limiting the scope we opted to keep this a separate effort.

To call a setup/init function after the wrapper component was rendered you could make use of the ember-render-modifiers addon (https://github.com/emberjs/ember-render-modifiers).

What I like about Ember is that it gives a lot of rigid structure that, at least at one point, made it comparatively easy to work on multiple Ember based projects and be productive sooner.

As you've pointed out, a problem with that project is that there's a ton of intimate knowledge for how things work under the hood or why things are the way they are. They also seem to oscillate between opting for simplicity and opting for complexity and magic.

One example would be the latest version of Ember which doesn't even ship with `@ember/render-modifiers` by default despite how everyone will end up installing it anyway because it's necessary; they were talking about providing an alternative based on the actor model, despite modifiers being far easier to understand, somehow they are still wrong:

> Either way, we recommend using these modifiers with caution. They are very useful for quickly bridging the gap between classic components and Glimmer components, but they are still generally an anti-pattern.

https://github.com/emberjs/ember-render-modifiers

Why on earth did they reinvent components and ship them without providing the supposedly correct way of interacting with their lifecycle? You actually have to install a separate add-on to develop a production-ready app with Ember, which completely flies in the face of the idea that you can run `ember new` and have pretty much everything you need.

Strangely (an thankfully), the RFC for the needlessly complicated alternative for lifecycle interaction is effectively stalled:

https://github.com/emberjs/rfcs/pull/567

By their own language, the only official way to interact with component/element lifecycle is an antipattern.

/rant