Design a site like this with WordPress.com
Get started

Server-side Rendering with Next.js

React is a powerful JavaScript library for making User Interfaces more modular and easier to maintain. In this article I will share how react reduces the performance of the application and the benefits of using Next JS for server side rendering.

React creates JS bundles that contain all the HTML/CSS that is visible on the page. So when we  open a react application it first loads all the JS bundles on the client side and then the application is rendered. This causes a delay in the initial loading of the page. 

This approach reduces the application performance as it is loading the complete application beforehand. Suppose there is a page that has a lot of images or heavy content but the user is not visiting that page but still that is being loaded initially. This results in poor user experience and hence the application performance is reduced.

Next JS is becoming more and more popular recently. It is a React Framework for production. The main reason behind the popularity of Next js is that it renders the HTML page in advance, instead of doing it on the client side. This results in better performance and SEO.

Server Side rendering is a technique that is used to reduce the load time of the application and improve the performance. This is achieved by loading the HTML pages on request from the client side, unlike in react the complete application is loaded beforehand.

Other benefits of Next JS

  • Image Optimization: Next has an Image component that automatically resizes, optimizes and serves images in formats like WebP when the browser supports it.
  • Fast Refresh: This creates a better developer experience, every time you make a change in your project, you’ll see the edit live without having to refresh the page, and, most importantly, without losing the state.
  • Routing: In React, you need to install a package like react-router for your routes, in Next, you only need to create your js file inside your pages folder.
  • API Routes : You can build your own API with Next.js. This is server less so it comes with some downsides, but for most projects, it’s perfect.
  • Easy Authentication: With Next, it’s really easy to add authentication with a library they have created.

Thanks for reading!

Advertisement

Market Place Comparison: Magento vs Shopify vs Woo Commerce

Magento-

Magento is an eCommerce platform that is used by the top internet stores. It is owned by Adobe and considered the best eCommerce platform for eCommerce businesses. Magento is easy to use and allows you to connect your store with PayPal, Google Shopping. It is an open-source platform and manages the functionality, appearance and overall look of the eCommerce store.

  • Pros:
  1. It is flexible. You can modify the source code according to your requirements which allows you to customize templates so it works as you desire.Magento makes it easier to analyze the performance of websites to get real-time information.
  2. It has features that other platforms lack like manage multiple stores, and support multiple locations, multiple language, multiple pricing, and multiple currencies.
  3. Magento has a large community of users because it is one of the most used e-commerce platforms in the world. This has helped to ensure quick support. In addition, the large community has inspired to develop many extensions and plugins. 
  4. It is mobile friendly as it allows to create a mobile site without any difficulty and give the best mobile viewing experience to the customer as far as possible. This has helped in the increase of sales and a lower bounce rate.
  5. Magento is scalable as it can be handled with ease, from a handful of products to thousands of them. Magento can approximately support up to five hundred thousands of products and thousands of transactions in an hour. It is a
  1. notable advantage because you can customize Magento without any constraints.
  • Cons:
  1. Magento is expensive. The community version of Magento is free, while the enterprise version of Magento costs you more than fifteen thousand dollars approximately. Premium Enterprise version of Magento, targeted for large businesses costs you more than fifty thousand dollars approximately for a year.
  2. Magento is time-consuming as it has a slow loading time. It is also not easy to switch from another e-commerce platform to Magento because it imports the data at a very slow rate. One reason behind this slow loading is due to its flexible architecture, which makes it complex and time-consuming to set it up.
  3. Magento can only be hosted on dedicated servers. Running Magento on normal shared hosting will create a slow and frustrating user experience for visitors.
  4. It has a few developers. Magento has a large community of users as well as developers. As a result, it is difficult to find authentic Magento developers.

Shopify-

Shopify is a complete eCommerce platform that lets you start, grow, and manage a business. Shopify is completely cloud-based and hosted, which means you don’t have to worry about upgrading or maintaining software or web servers. This gives you the flexibility to access and run your business from anywhere with an internet connection.

  •  Pros-
  1. Shopify is integrated with payment providers, and its built-in speed checkout allows customers to pay with minimal load time.
  1. Shopify allows custom Title tags, meta descriptions on every category page for SEO purposes and also allows you to build customized landing pages for marketing purposes.
  2. Shopify offers multiples free themes and numerous custom-built premium themes along with the option to customize and add features for Developers.
  3.  Shopify App store has all the features that you need to run an online business. It provides various free and paid Apps and adds flexibility for the brands having an online presence all around the web.
  • Cons:
  1.  Shopify’s basic plan starts from $29 a month; the average plan is for $79 a month, and advanced Shopify is for $299 a month.
  2. It uses a different set up to customize their themes rather than using PHP for the templates.It can be a problem for the new users on Shopify.
  3. Shopify’s blogging platform is not as great as WordPress as it provides a basic layout for blogging.
  4. Lock-in features to delete your online store permanently.

WooCommerce-

It is an open-source eCommerce solution built on top of WordPress.It works as a word press plugin and enables you to run a functional online store.It offers all the features you would expect from an eCommerce platform. From physical products and digital downloads to subscriptions, content and even appointments, you can sell anything with WooCommerce. 

  • Pros:
  1. WooCommerce is open source free software. This is very effective to scale online business. You do not have to pay for it. You can also update for free.
  2. Many free plugins are available to customize the WooCommerce plugin. It professional and standard that can be customizable with many themes so it can be modified for color variety. Customers and visitors are impressed by the professional outlook of your website. It is user-friendly and provides lots of features that could customize your website.
  3. WooCommerce provides lots of analytic tools to make the top choice of developers. With these tools, you can easily measure the sales and analysis according to date brand, statics of customers, calculate your daily and monthly sales, measure no. Of orders and many more tools are inbuilt in WooCommerce.
  4. Security is one of the most important factors in e-commerce. The customer needs to make sure that transactions are secure. Merchant of e-commerce site makes sure that they are providing security to their customers. WooCommerce is very secure because it’s regular updates undergoes for security purpose.
  5. WooCommerce provides lots of functionality. You can change all the content easily. As like price, image, category and all. You can sell any type of product as simple, variable, downloadable, etc.
  • Cons-
  1. WooCommerce updates are there frequently.Most of the customers are dissatisfied with the update of WooCommerce.
  2. WordPress and WooCommerce are free of cost and also there are various themes and plugins are available but sometimes it does not meet your requirement. If you want to customize the site according to your requirement then
  1. it takes the time to do that or by expanding money you can customize your website.
  2. When you make updates to your site yourself through the visual tab, it doesn’t always flow the way you expected it to when looking in the actual browser. This can leave those not knowing HTML frustrated when they try to get text and images to appear the way they want.

How to Create Staging Server for React application on AWS EC2 Service

If you are looking to create a simple and affordable staging server for your React application then Amazon EC2 is the solution.

A walkthrough on setting up a production-similar staging server from scratch on Amazon EC2.

Create and Launch EC2 Instance

  • Choose an Amazon Machine Image (AMI): Here you need to choose on what operating system you want the instance you are launching. We will be using Ubuntu Server 20.04 LTS (HVM), SSD Volume Type – ami-0ca5c3bd5a268e7db (64-bit x86) / ami-0ae8c80279572fa66 (64-bit Arm).
  • Choose an Instance Type: Here you need to choose the Instance Type that will add the resources for the instance. We will be using t2.micro, which is available for free-tier. After choosing the instance type click on Next: Configure Instance Details
  • Configure Instance Details: Lets keep the default settings and move to next screen, click on Next: Add Storage
  • Add Storage: Again, lets keep the default settings and move to next screen, click on Next: Add Tags
  • Add Tags: Move to next screen, without adding any tag, click on Next: Configure Security Group
  • Configure Security Group: Here you need to add Rule for the application. So add HTTP and for source select Anywhere from the dropdown instead of Custom. Once done click on Review and Launch, review the instance details and click on Launch. You can also add Rules afterwards, if required, by heading to Change Security Settings.
  • Select an existing key pair or create a new key pair: Key pair is used to access the instance. Create and download a new key pair, if you don’t have one, and keep it in a secure location. Once done, click on Launch Instances.

Beyond this point you will not have the option to download the key pair again, and without the key pair you cannot access your instance.

  • Launch Status: After successful launch status, click on View Instances. Your new instance will be present in the instance table. Click on the instance ID and save Public IPv4 address, this will be used to connect with the instance.

Connecting to the Instance Through SSH

  • Launch terminal, where you have saved your key pair.
  • Type the below command to open .ssh folder. Here, aws.pem is key pair name ( created at the time of instance creation ) with .pem extension and 52.12.157.251 is Public IPv4 address.
  • If you have written the correct command then you will be connected to the ubuntu server.

Cloning GitHub repo on ubuntu server

You can clone your own repo or use the repo this: https://github.com/aastha-14/react-typing-app.git

Installing Required Software

  • Run the below commands.
  • Edit the nginx configuration
  • You will see the below file, here you have to change the root path and location.
  • Path and location should be
  • Save the changes and exit the editor.
  • Restart the nginx.
  • You can now check the app running on Public IPv4 address.