How To Deploy Your React Website in 2022!

Different React apps need different deployment setups based on their case. In today's world, there is a sea of hosting platforms available. This article will help you understand the market and your requirements.

Once you are ready to move from development to deployment, this choice is an essential step for you to get closer to that launch date.

There are many constraints to choosing a deployment provider, such as Security and Serverless. 

Basic Considerations

Before we discuss the various options available, let us first categorize the React OR Vue Js app you have built so we can choose the particular services the platforms provide. 

Pricing

Of course, one of the biggest questions is the price when choosing an option. Many options are available depending on the app category, starting from free deployment options.

 You can deploy SPA-s for free on the available platforms.

Data Served (Outbound)

Server providers have to serve requests made to the website. There is a cost of computation as well as data being sent out. In most cases, the inbound data is free or has a little cost, while outbound data /GB has a cost associated with it.

 Different tiers are based on the Outbound data limit.

Serverless

With the dawn of serverless computations on edge functions, this feature has become a significant consideration when choosing a service.

Serverless functions make the whole app extremely performant. They are often an integral part of the project, forcing customers to choose products that allow this feature. Though it is pricey, it is worth it!

Performance

Fundamentally, you always want a service that delivers the fastest. Response times, Request times, and Load times contribute to performance. UI/UX research shows that Load times are crucial for user retainment and reduced bounce clicks.

So performance is an essential aspect for the end-user. Optimizing performance is vital.

Management and Workflows

Development is not free. It requires an investment of time, skill, and a lot of money to do so. Issues like managing extensive stand-alone dynamic services like AWS servers, Security, CI/CD pipelines, etc., are cumbersome tasks. 

Most projects/companies cannot shill that sort of effort to develop and manage an extensive system. Hence it is preferred that the hosting provider handle the management themselves. This way, products can ship out fast with a budget in mind!

Categories

Based on the category of react-apps made, there are different hosting options available. Below are the major categories and a comprehensive outlook on the hosting options available.

SPA — Single Page Application

An SPA is a form of React application that is most common. It consists of single pages that can be directly pre-built before being deployed to hosting. This consist of marketplace apps, personal blogs, form apps, and information sites. Etc.

The key here is that everything in the app is fixed before deployment and has no dynamic pages (though content can be dynamic). You can always pre-build them.

SPA's can be easily deployed for free till you reach a threshold limit on these platforms — 

• Netlify
• Render
• Surge
• Vercel (for non-commercial)
• GitHub Pages
• Heroku (for non-commercial)

Furthermore, if you have a dynamic page site, you can try to configure its settings to make it a Client-Side Rendered App. However, this will drastically reduce performance and reduce SEO compatibility.

SPAs are a great place to start. You can always switch to a Server-Side app down the line.

Server-side Nodejs React-apps

Server-Side is the second time of React app. HTML is generated on every request when you use server-side props. You can also statically generate websites at build time with static props. 

This server manages the frontend requests, so dynamic page attributes like Meta-tags, Server-side authentication, and SEO optimizations can be served directly at the request of the page.

So when you view the page source, you can view all this information. 

A NodeJS app is a straightforward approach that requires many options to be coded by developers like caching, image optimizations, etc.

This is an advanced form of React-App, and direct NodeJS server providers can help you to set it up. You will have to buy an instance of a server to run this.

Pre-made Options

These are the popular service providers in this space — 

• DigitalOcean
• Heroku

Legacy Cloud Providers

Amazon AWS, Microsoft Azure, and Google GCP have Pay-Per-Use options to facilitate this type of server. 

However, this requires advanced Security and more developer effort to set up. You can use it if you know what you are doing or have grown to a large degree, where it is essential to use the scale they provide.

NextJS Apps

In a NextJS React app, the server-side part of the equation is handled by the hugely popular NextJS library. It provides all SSR features, Serverless Functions in a developer-friendly environment.

You can deploy Nextjs apps to Vercel, the creators of Nextjs. 

Or you can use AWS. NextJS has an auto-detection option when deploying with AWS.

Vercel, starting at 20$/pm, includes all NextJS features, complete with an optimized caching service, serverless functions, and a GitHub integrated CI/CD pipeline, and serves 1TB of outbound data. You can switch to enterprise plans if this doesn't meet your needs. 

Due to the global acceptance of NextJS, many other hosting providers are also capable of hosting NextJS apps with different configurations— 

• Netlify (starting at 25$)
• DigitalOcean (App starting 20$)

With AWS Amplify

Amazon AWS amplify provides a service to host NextJS apps from the get-go. Learn more at the docs here.

Conclusion

When choosing to host a website, there are options and considerations—from free hosting to a fully customizable Pay-Per-Use service. If you are switching from one option to the other, it is important to keep your user updated.