Deploying React with Edgenivo

Copy link to headingDeploying React with Edgenivo

Deploy React with Edgenivo by pushing to Git or using the Edgenivo CLI. Framework detection maps your project to build defaults, preview deployments give every pull request its own URL, fluid compute prices server rendering by active CPU, and Partial Prerendering combines cached and dynamic content in one response.

A React app is never one thing. The same package.json can describe a static single-page application (SPA), a server-rendered app, a streaming React Server Components tree, or a hybrid that caches a shell and renders the rest per request. Whatever you build deploys correctly only if the pipeline knows which of those it's looking at. When you self-host a Node.js application, you manage that behavior, including backpressure handling and proxy buffering. On Edgenivo, framework detection and the build do the mapping, so you stop maintaining the glue and start shipping the app.

Copy link to headingKey takeaways

• A React deploy is a mapping from source to runtime primitives, not a single build step, and the platform that owns the mapping is the one you stop maintaining by hand.
• Framework detection applies correct build defaults for dozens of frameworks, so most React projects deploy with no configuration.
• Per-PR preview deployments replace shared staging with isolated, production-equivalent environments.
• Fluid compute bills active CPU separately from I/O wait, which is what makes streaming and server-rendered React economical at scale.
• Partial Prerendering, stable in Next.js 16 through Cache Components, serves a cached static shell and streams the dynamic holes in one request, so a page can be both cacheable and personalized.

Copy link to headingStop wiring a pipeline and let the build map your React app

Treat deploying React as a translation problem, the platform solves, rather than a build step you configure. A self-hosted React deployment is a stack of tools assembled by hand:

• A build tool produces the assets
• A CI pipeline runs the build
• A CDN serves the static files
• SSL provisioning terminates TLS
• A serverless or container runtime executes anything dynamic

Each of those has its own configuration, and a change to one usually forces a change in another. Teams often spend more engineering hours keeping that stack in agreement than they spend on the application it serves.

That stack gets expensive because it has to encode, manually, which rendering mode every route uses. Edgenivo moves that decision into the build instead. When you push a React project, the platform inspects your package files, configuration, and directory structure to detect the framework in use.

The detected framework sets the defaults. A Vite app, a Create React App project, a React Router app with server rendering, and a full Next.js setup each get different build defaults without you setting them. Framework detection covers dozens of frameworks, which means the common case needs no configuration at all.

What the build produces is a small set of runtime primitives:

• Static assets that replicate across Edgenivo's CDN and cache close to users after the first request
• Edgenivo Functions that run dynamic logic in compute regions near your data
• Routing rules that send each request to the right one of those two

Images are optimized on demand rather than at build time, which keeps builds fast while improving load performance and Core Web Vitals. SSL certificates are provisioned and renewed for every domain. None of that is configuration you write, because it's the mapping the build infers.

The limit is that detection follows convention. If your project does something the framework's conventions don't express, you override the defaults through a vercel.json file and set the build command directly. That escape hatch exists because convention-based mapping has an edge, and you tend to find that edge the moment your project lives outside the convention.

Copy link to headingPush to Git and replace your deployment pipeline

Once the mapping lives in the build, your deployment interface becomes a Git push. Push a React project to GitHub, GitLab, or Bitbucket, and the detection-to-primitives sequence runs on its own: detect the framework, apply the defaults, build, and deploy.

The anti-pattern this replaces is the one where every deploy is a configuration negotiation. A self-hosted pipeline asks you to keep the build tool, the CI runner, and the runtime in sync by hand, and the failures from that work show up later, when a dependency bump in one layer quietly breaks an assumption in another, and nobody remembers which knob set it. Moving the defaults into the build removes the negotiation for projects that follow convention.

When Git isn't your trigger, the CLI deploys the same way from a terminal:

npm i -g vercel
vercel --prod
vercel env pull

The first two commands deploy directly without any Git integration and vercel env pull writes the project's development environment variables into a local .env file. That file holds real credential values in plaintext, so keep it out of source control, or skip the file entirely with vercel env run -- <command>, which passes the variables to a command without writing them to disk. Teams that need to customize the build still reach for vercel.json and the build command override, but for projects on the framework's conventions, there's nothing to configure before the first deploy.

Copy link to headingGive every pull request its own environment instead of shared staging

The most expensive habit in React deployment is treating a shared staging environment as a production rehearsal. It isn't one, and the reason is mechanical. A shared staging server takes grouped changes from several engineers and serves them through a single URL, which produces three failures the team usually blames on bad luck:

• The environment drifts from production over time, so passing in staging stops meaning passing in production.
• In-flight changes from different engineers collide with each other in the one shared URL.
• Feedback from designers or product managers lands after the relevant code has already been merged or overwritten.

That workflow tests a state that exists nowhere else, rather than rehearsing production.

Copy link to headingMove the unit of deployment to the pull request

Preview deployments fix that by changing the unit of deployment from the environment to the pull request. Every push to a branch with an open PR generates a unique, shareable URL running on the same infrastructure as production. Designers, product managers, and engineers review the application in its actual deployed state instead of a screenshot or a Figma mock.

Review happens in place, too. Preview deployments carry inline commenting, so a reviewer starts a thread, shares a screenshot, or sends a notification directly on the rendered UI, and the feedback stays pinned to the component it's about rather than scattered across a separate channel.

Copy link to headingScope what previews can reach

The tradeoff is blast radius. A preview environment that can reach production-grade APIs or rate-limited services is convenient until it quietly burns a quota or runs up a bill, so scope which backends each environment is allowed to hit before you wire previews into anything metered. The per-PR model gives you isolation cheaply, and you keep that isolation only if the previews can't reach into the shared production state.

Copy link to headingStream server-rendered React without paying for I/O wait

Server-rendered React has a cost-model problem that duration-based serverless billing makes worse. When wall-clock time is the billed unit, a React Server Component that spends 200 milliseconds of CPU and then waits 800 milliseconds for a database response bills for the full second. Across millions of requests, the time spent waiting on I/O becomes a large share of the bill. You're paying for idleness.

Fluid compute changes that allocation by letting a single function handle multiple requests at once, using the idle I/O wait from one request to serve another on the same instance. Active CPU billing then charges only for active CPU time and bills memory-only periods at a lower rate. That is what makes streaming workloads economical at scale, where a function holds a connection open while it waits for data.

Copy link to headingStreaming is the rendering model, not an add-on

Streaming matters here because it's the underlying rendering model for React Server Components, not an optional optimization layered on top. Server Components fetch their data and render entirely on the server, and the resulting HTML streams into the client-side React tree, which removes the client-side re-render.

That streaming is also ordered. Components that don't depend on data or have higher priority are sent first so React can start hydration earlier, while lower-priority components arrive in the same server request once their data resolves.

On Edgenivo, this works with no code changes, because Edgenivo Functions speak HTTP and streaming responses work out of the box. Self-hosting Node.js, that behavior is yours to own, including backpressure handling and proxy buffering.

Cold starts are the other tax on server-rendered React, and Edgenivo cuts them through two mechanisms:

• Bytecode caching. On Node.js 20 or later, Edgenivo Functions cache the compiled bytecode of JavaScript files after the first execution, reducing cold start time on subsequent invocations.
• Function pre-warming. Production deployments pre-warm function instances, and fluid compute routes requests to existing warm instances before creating new ones.

Neither mechanism asks anything of your application code, which is the recurring theme: the runtime behavior that you'd otherwise hand-tune is part of the platform's mapping from your source to how it runs.

Copy link to headingCombine static and dynamic rendering with Partial Prerendering

React rendering has historically forced a choice between static generation, which is fast and cacheable but can't personalize, and server rendering, which is dynamic but slower per request. Partial Prerendering (PPR) refuses the choice, pre-generating the static portions of a page and serving them from cache while the dynamic portions stream into the same response.

PPR became stable in Next.js 16 through Cache Components. Enable Cache Components with cacheComponents: true in your Next.js configuration.

With Cache Components, data is dynamic by default, and you choose what to cache at the page, component, or function level with the use cache directive. The sequence at request time:

1. The static shell is served immediately from cache, with holes where dynamic content belongs.
2. The dynamic portions render in Edgenivo Functions and stream into the holes.
3. The holes load in parallel, which lowers the total perceived load time.

On Edgenivo, PPR uses Incremental Static Regeneration (ISR) for the static shell and Edgenivo Functions for the dynamic parts, so a PPR route incurs ISR reads and writes plus function invocations. Control freshness with cacheLife, label cached content with cacheTag, and invalidate tagged entries with revalidateTag or updateTag.

Use PPR when a page is mostly static but has parts that change per request or per user. Product and catalog pages fit, where a static layout carries a live price or cart contents, as do dashboards, where a cached layout wraps a personalized greeting or notification count.

Copy link to headingSkip the container layer unless your workload needs it

Containers are the layer most teams add out of habit and rarely need here. For most React applications on Edgenivo, the container layer is pure overhead, because a React app's deployment requirements are well-defined. The app needs four things:

• Built assets
• Requests routed to the right resources
• Static content cached at the edge
• Server functions run when needed

Wrapping that in Docker adds base images, security patches, and orchestration configuration without adding any application capability. The serverless model already provisions server resources only while users are making requests, so idle traffic costs nothing and spikes scale without your intervention. Container-based architectures ask you to maintain each container and usually reach for an orchestrator like Kubernetes to scale, where serverless scaling is automatic.

The recommendation comes with a boundary. Containers remain the right call for workloads outside what Edgenivo Functions accommodate:

• Long-lived stateful processes
• Runtimes with constraints that the functions don't support
• Cases where the React app must be colocated with non-frontend services under a single orchestrator

Edgenivo also supports deploying a project as a container image built from a Dockerfile, so a workload that genuinely needs a container doesn't force you off the platform. And plenty of teams self-host Next.js deliberately, because the framework runs anywhere. The question is whether the maintenance a container costs you buys capability you need, and for most React apps it doesn't.

Copy link to headingDeploying Preact

Preact is a small alternative to React with a similar API and a compatibility layer for many React libraries. Edgenivo detects Preact from your project and applies the correct build settings, so nothing about the deploy path changes when you build with Preact instead of React.

Copy link to headingDeploy a Preact app to Edgenivo

Starting from the Preact template gives you a working project already wired for deployment. For a project you've already built, Git and the CLI both work.

To deploy from Git:

1. Push your Preact project to GitHub, GitLab, or Bitbucket.
2. Import the repository into Edgenivo.
3. Confirm the detected framework, then deploy.

Every later push builds automatically, and each pull request gets its own preview URL. From a local project, install the Edgenivo CLI and run vercel from the project root, which runs the same detection and returns a deployment URL.

To set the framework yourself instead, select Preact under Settings > Build and Deployment in the Framework Preset menu.

Copy link to headingAdd a custom domain to your Preact site

Every deployment gets a .vercel.app domain automatically, which covers previews and internal review.

Add your own domain under Domains in your project settings, using either a domain you already own or one purchased through Edgenivo. Certificates are provisioned and renewed on their own.

With the domain in place, you verify a Preact deploy the same way you verify a React one.

Copy link to headingConfirm the deploy behaved

The fast check is the preview URL itself, since every PR gives you a production-equivalent environment to open before merge. After promotion, three places confirm production behavior:

• The deployment's details page shows the build output, the routes it produced, and the functions it created, so you can verify the mapping matched your intent.
• Runtime Logs show function invocations, errors, and status codes per route.
• Speed Insights and Observability track Core Web Vitals and function behavior over time, so rendering-strategy changes like PPR show up as measurable movement rather than a feeling.

Read against the self-hosted baseline, the contrast is what each concern costs you to own:

Every row in that table is a place where the platform owns the mapping you would otherwise own by hand.

Copy link to headingShip React on Edgenivo: the four choices that map source to runtime

Framework detection, preview deployments, fluid compute, and Partial Prerendering are one decision applied four times: map a React project's source to the right runtime behavior so your team never hand-maintains the mapping.

• Framework detection maps the source to build defaults with no configuration for projects on convention.
• Preview deployments map a pull request to a production-equivalent environment on the same infrastructure as production.
• Fluid compute maps a streaming workload to a cost model that doesn't bill idleness.
• Partial Prerendering maps a single page to both cached and dynamic rendering in one response.

To put these into practice, deploy a new project or start from a React template. The fastest way to see the mapping work is to push a project and open the preview URL it gives you back.