by Tanner Linsley on Oct 24, 2025.
For years, JavaScript has had exactly one meaningful directive, "use strict". It is standardized, enforced by runtimes, and behaves the same in every environment. It represents a clear contract between the language, the engines, and developers.
But now we are watching a new trend emerge. Frameworks are inventing their own top level directives, use client, use server, use cache, use workflow, and more are appearing across the ecosystem. They look like language features. They sit where real language features sit. They affect how code is interpreted, bundled, and executed.
There is an important distinction: these are not standardized JavaScript features. Runtimes don't understand them, there is no governing specification, and each framework is free to define its own meaning, rules, and edge cases.
This can feel ergonomic today, but it also increases confusion, complicates debugging, and imposes costs on tooling and portability—patterns we’ve seen before.
A directive at the top of a file looks authoritative. It gives the impression of being a language level truth, not a framework hint. That creates a perception problem:
We’ve already seen confusion. Many developers now believe use client and use server are just how modern JavaScript works, unaware that they only exist inside specific build pipelines and server component semantics. That misunderstanding signals a deeper issue.
Some directives exist because multiple tools needed a single, simple coordination point. In practice, use server and use client are pragmatic shims that tell bundlers and runtimes where code is allowed to execute in an RSC world. They have seen relatively broad support across bundlers precisely because the scope is narrow: execution location.
That said, even these show the limits of directives once real-world needs appear. At scale, you often need parameters and policies that matter deeply to correctness and security: HTTP method, headers, middleware, auth context, tracing, caching behaviors, and more. Directives have no natural place to carry those options, which means they are frequently ignored, bolted on elsewhere, or re-encoded as new directive variants.
When a directive immediately, or soon after creation, needs options or spawns siblings (e.g., 'use cache:remote') and helper calls like cacheLife(...), that’s often a signal the feature wants to be an API, not a string at the top of a file. If you know you need a function anyway, just use a function for all of it.
Examples:
'use cache:remote'
const fn = () => 'value'
'use cache:remote'
const fn = () => 'value'
// explicit API with provenance and options
import { cache } from 'next/cache'
export const fn = cache(() => 'value', {
strategy: 'remote',
ttl: 60,
})
// explicit API with provenance and options
import { cache } from 'next/cache'
export const fn = cache(() => 'value', {
strategy: 'remote',
ttl: 60,
})
And for server behavior where details matter:
import { server } from '@acme/runtime'
export const action = server(
async (req) => {
return new Response('ok')
},
{
method: 'POST',
headers: { 'x-foo': 'bar' },
middleware: [requireAuth()],
}
)
import { server } from '@acme/runtime'
export const action = server(
async (req) => {
return new Response('ok')
},
{
method: 'POST',
headers: { 'x-foo': 'bar' },
middleware: [requireAuth()],
}
)
APIs carry provenance (imports), versioning (packages), composition (functions), and testability. Directives typically don’t — and trying to encode options into them can quickly become a design smell.
Once multiple frameworks start adopting directives, we end up in the worst possible state:
| Category | Shared Syntax | Shared Contract | Result |
|---|---|---|---|
| ECMAScript | ✅ | ✅ | Stable and universal |
| Framework APIs | ❌ | ❌ | Isolated and fine |
| Framework Directives | ✅ | ❌ | Confusing and unstable |
A shared surface area without a shared definition creates:
An example of where we've seen these struggles before is with decorators. TypeScript normalized a non standard semantics, the community built on top of it, then TC39 went in a different direction. This was and continues to be a painful migration for many.
Functionally, yes — both directives and custom transforms can change behavior at compile time. The issue isn’t capability; it’s surface and optics.
At best, a directive is equivalent to calling a global, importless function like window.useCache() at the top of your file. That’s exactly why it’s risky: it hides the provider and moves framework semantics into what looks like language.
Examples:
'use cache'
const fn = () => 'value'
'use cache'
const fn = () => 'value'
// explicit API (imported, ownable, discoverable)
import { createServerFn } from '@acme/runtime'
export const fn = createServerFn(() => 'value')
// explicit API (imported, ownable, discoverable)
import { createServerFn } from '@acme/runtime'
export const fn = createServerFn(() => 'value')
// global magic (importless, hidden provider)
window.useCache()
const fn = () => 'value'
// global magic (importless, hidden provider)
window.useCache()
const fn = () => 'value'
Why this matters:
So while a custom Babel plugin or macro can implement the same underlying feature, the import-based API keeps it clearly in framework space. Directives move that same behavior into what looks like language space, which is the core concern of this post.
Namespacing helps human discoverability, but it doesn’t address the core problems:
Examples:
'use next.js cache'
const fn = () => 'value'
'use next.js cache'
const fn = () => 'value'
// explicit, ownable API with provenance and versioning
import { cache } from 'next/cache'
export const fn = cache(() => 'value')
// explicit, ownable API with provenance and versioning
import { cache } from 'next/cache'
export const fn = cache(() => 'value')
If the goal is provenance, imports already solve that cleanly and work with today’s ecosystem. If the goal is a shared cross-framework primitive, that needs a real spec, not vendor strings that look like syntax.
Once directives become a competitive surface, the incentives shift:
This is how you get:
'use server'
'use client'
'use cache'
'use cache:remote'
'use workflow'
'use streaming'
'use edge'
'use server'
'use client'
'use cache'
'use cache:remote'
'use workflow'
'use streaming'
'use edge'
Even durable tasks, caching strategies, and execution locations are now being encoded as directives. These are runtime semantics, not syntax semantics. Encoding them as directives sets direction outside the standards process and merits caution.
Even when there is no bad intent, directives create lock in by design:
Directives may not look proprietary, but they can behave more like proprietary features than an API would, because they reshape the grammar of the ecosystem.
There absolutely are real problems to solve:
But those are problems for APIs, capabilities, and future standards, not for ungoverned pseudo syntax pushed through bundlers.
If multiple frameworks truly want shared primitives, a responsible path is:
Directives should be rare, stable, and standardized—used judiciously rather than proliferating across vendors.
It’s tempting to compare criticism of directives to the early skepticism around React’s JSX or the virtual DOM. The failure modes are different. JSX and the VDOM did not masquerade as language features; they came with explicit imports, provenance, and tooling boundaries. Directives, by contrast, live at the top-level of files and look like the platform, which creates ecosystem expectations and tooling burdens without a shared spec.
Framework directives might feel like DX magic today, but the current trend risks a more fragmented future—dialects defined not by standards, but by tools.
We can aim for clearer boundaries.
If frameworks want to innovate, they should, but they should also clearly distinguish framework behavior from platform semantics, instead of blurring that line for short term adoption. Clearer boundaries help the ecosystem.