React with its component-based approach has made the life of developers easy by managing separate state and logic for each component and the ability to re-use them when required. But what if you wanted to use a shared state between multiple components or maybe fetch data from an API once and make it available to all the components in your app? That’s when global state management libraries like Redux, MobX, etc., come into play.

With the release of React 16.3, the react community got to experience the new Context API which worked similar to Redux and allowed to manage state in multiple components using Context Object, Provider, and Consumer. However, the context API also came with a catch! Sebastian Markbage from the React team has mentioned that the new Context API was not built and optimized for high-frequency updates but rather for low-frequency updates like theme and user auth management inside your app. You can check out his comment here. Context API also had some limitations with code splitting and the ability to store indefinite values instead of a single value.

Facebook recently launched Recoil, which is a brand new experimental JavaScript state management library that addresses many of the problems larger applications face when using the existing Context API.

Recoil mainly comprises of two things — Atoms and Selectors.

Atoms are units of state. They’re updateable and subscribable: when an atom is updated, each subscribed component is re-rendered with the new value. They can be created at runtime, too. Atoms can be used in place of React local component state. If the same atom is used from multiple components, all those components share their state.

In simpler terms, Atoms are units of state that components can subscribe to.

A selector is a pure function that accepts atoms or other selectors as input. When these upstream atoms or selectors are updated, the selector function will be re-evaluated. Components can subscribe to selectors just like atoms, and will then be re-rendered when the selectors change. Selectors can also be used to calculate derived data that is based on state.

In simpler terms, Selectors transform the atom state either synchronously or asynchronously.

You should probably check out this video from the recent React Europe live stream to get a better understanding of recoil.

Let’s start by creating a demo application with create-react-app which increments the count on the click of a button.

Our application is going to consist of MainComponent.js which receives the count and handleFireClick function as props.

In redux, we start off by creating a basic store that acts like a global state for our application.

In recoil, there is no need to create a separate store. Wow! that’s awesome 🤩.

In redux, we create the desired application state using reducers. Let’s create a simple counterReducer which increments the count by 1.

In recoil, creating a shared state is a straight forward approach using atoms. Each atom can be considered as a single shared piece of state. Now, let’s create an atom for holding our counter state.

In redux, actions are fired using the dispatch method provided by redux. Let’s create a file named actions.js which holds the action for incrementing the count.

In recoil, we fire off actions and modify the existing shared atom state using selectors.

Finally, it’s time to connect the shared state with our MainComponent.js component and to differentiate Redux from Recoil, I’ll be creating two new wrapper components called ReduxExample.js and RecoilExample.js.

In ReduxExample.js, we use useSelector and useDispatch hooks provided by react-redux to get value from store and fire actions to update it.

Bonus: In ReduxExample.js we can also create a class component and wrap the component using connect HOC by redux and pass the shared state, actions as props using mapStateToProps, and mapDispatchToProps respectively.

In RecoilExample.js we can directly use the shared atom state value with useRecoilValue and update our state, as simple as doing a setState but with useRecoilState.

Note: Recoil is based on react hooks and will only work for functional components.

There is just one more step for your app to start working and that’s by wrapping your Example components with HOC components provided by Redux and Recoil.

For the Redux example, we use the Provider from react-redux and pass our ReduxExample.js component as children. Make sure to also supply the store you created in the first step.

Similarly, for Recoil, we wrap the RecoilExample.js component using the RecoilRoot component provided by recoil.

At this point, we have successfully created the shared state and actions to update it using both redux and recoil. Simply run npm run start and check if your code is working.

The main question — Will Recoil replace Redux?

That’s a tough one to answer today (at the time of writing this post) as it is still in the experimental phase but the new library looks promising and there is a high probability that developers will switch to Recoil from Redux shortly.

Why? Recoil lets you create a data-flow graph that flows from atoms (shared state) through selectors (pure functions) and down into your React components without having to deal with store creations and re-render the entire App component tree while the state updates.

So, this was a quick comparison between recoil and redux for a simple increment counter app. You can check the live version of the app here (Redux-vs-Recoil) and source code on Github. It’s just a matter of time Recoil becomes the new standard for managing shared states in your react app and is ready to be used in production applications. Until then give it a shot and follow the community to keep yourself updated with the new releases. If you found this post helpful in understanding the basics of redux-vs-recoil drop me a message in chat on — What features would you love to see in Recoil? I’d love to hear any thoughts on this topic 😋.

Recoil vs Redux | The Ultimate React State Management Face-Off

Today online review sites have become the most powerful form of word-of-mouth advertising. Listing your company or service offering in B2B services review platforms can significantly increase your acquisition rates as they host verified reviews of business-to-business services providers to help find reputable services providers such as SEO consultants, web, and mobile app designers & developers, etc. These platforms often issue a free badge that you can display on your website with a link to your business profile on their platform. If your company is featured in their top companies list, you get a special badge for that too. So, what's special about these badges?

A trust badge from a top B2B Services Review Platform ensures your visitors that your company is legitimate and is accredited with the correct bodies or regulators. 

There are a ton of free badges online but it’s very important to use the right trust badges - ones that people recognize. So let's dive in to see the top 15 Trust badges from B2B Services Review Platforms in 2020.

GoodFirms is a full-fledged research and review platform that helps software buyers and service seekers to opt for the best software or firm. At the same time, it helps IT companies and software vendors to boost user acquisition stats, market share, and brand awareness. GoodFirms, just as the name suggests, is a dedicated community of “performing” IT companies as well as software solutions.

Clutch is a B2B research, ratings, and reviews firm in the heart of Washington, DC. They connect small and mid-market businesses with best-fit marketing, advertising, design, development, and IT companies, consultants, or software. Their methodology considers verified feedback from client references, services offered, work quality, and market presence to compare and rank companies in a specific market.

You can check out their widget and badges offerings here.

Business of Apps is the leading media and information brand for the app industry and provides world-class news, analysis, data & marketplaces for app businesses. They host comprehensive B2B directories and marketplaces covering app ad platforms, app development, app marketing, influencers, and other specialist areas.

Some Interesting stats of businessofapps.com:

UpCity is dedicated to helping our partners in our marketplace grow their businesses by providing the support and help they need to build their online recommendability. For businesses seeking services, the transparency and trust they provide through reviews and data-driven insights help dramatically improve the B2B partner selection and purchase experience.

AppFutura is a platform connecting buyers and service providers in the fields of app development, custom software development, and digital marketing. Their directories, created with a unique methodology, allow buyers to browse through thousands of companies listed and categorize them as per the needs of their projects.

SoftwareWorld is a software review platform that showcases top software solutions suitable for various industries, providing a comprehensive review service by comparing the best software solutions available on the market. The platform creates unbiased lists of the top software solutions by category, helping businesses find the right solution for them.

Some Interesting stats of softwareworld.co:

DesignRush Is A B2B Marketplace Connecting Brands With Agencies and acts as your guide to finding the best professional agencies, categorized by their areas of expertise. They analyzed and ranked hundreds of agencies to help brands find top full-service agencies, web design companies, digital marketing firms & top technology companies.

Some Interesting stats of designrush.com:

TopDevelopers.co is a dedicated directory of IT service providers. The list of IT companies is graded through discreet research and analysis on various industry-specific metrics to help the businesses in finding a reliable technical partner. Their verified reviews will also help you find the best partner to technically accelerate your business.

Some Interesting stats of topdevelopers.co:

Extract.co examines software companies and digital agencies with key industry metrics, discover their reputation and quality standards and reveal the best effective companies. They help in understanding which services deliver well or which industry is more focused or what technologies the company/team is more effective at. They also do well research on previous customer experience before awarding a project to a new company.

TechImply is an IT Firm recommendation platform for all IT companies & technology vendors. More than 10,000 potential buyers use TechImply to find the right business software and IT Firms. You can easily get started on TechImply by creating your company/software profile.

Ascertain the topmost Web Development, Mobile App Development, Software Development & eCommerce Development firms across the globe. ItFirms leave no stone unturned to let you discover some of the renowned firms that will coincide with your needs and delivers high-quality services. Keeping abreast of the latest statistics and data, they provide 100%true and trusted insights on top IT companies and trends worldwide.

15 Trust badges from top B2B Services Review Platforms in 2020

When the entire world is fighting against the pandemic, spreading negative vibes everywhere, there is one reason for web developers to be excited about and that’s an email from Guillermo Rauch, CEO of Zeit. I mean the CEO of Vercel. Confused? This is what the email reads:

Email from Vercel’s CEO (Formerly Zeit):

I hope this email finds you well. I bring special news today.

ZEIT has rebranded to Vercel. In addition, we have secured a $21M Series A to accelerate the development of Next.js and our platform.

Our latest blog post details our renewed focus, rebrand, and fundraise. Rest assured – none of your existing workflows, pricing plans, or projects are going to be affected in any way.

Today, companies like Airbnb, The Washington Post, and Twilio trust the Vercel platform to develop, preview, and ship their ambitious projects. And Next.js powers 35,000+ production websites.

We count ourselves lucky for the tremendous support we receive from our community – I want you to know that we’re very, very grateful for it. This business is our passion, and we will continue delivering the exceptional developer experience we are known for.

So what this means to us? Should we update anything ?

So after trying to visit now.sh it redirects to Vercel.com. So, the obvious questions that might come to your mind are, Should I update my name servers or create a new account in Vercel? What happens to my subscriptions? Does my hosted website perform a 301 redirect? Etc.,

The simple answer is, No! you don’t have to change anything, just sit back and relax. It’s simply a rebranding from ZEIT to VERCEL.

You can still continue to perform all of your previous actions and deployments without worrying about this change.

According to their blog post : Vercel strongly connects to the words versatile, accelerate, and excel.

So, what’s great about this rebranding?

Raising $21M in series A funding will open opportunities to explore and further improve one of our beloved frameworks Next.js. Main highlights from their blog are:

to provide the ultimate workflow for developing, previewing, and shipping Jamstack sites.

enable teams to develop, preview, and ship their apps faster, and with confidence.

the same passionate ZEIT team, with the same attention to detail.

continue investing in the open-source projects like Next.js.

Experts who led early design at Facebook and Dropbox, created frameworks like React, and are running companies like GitHub, Sentry, and Auth0.

With awesome frameworks like Next.js and deployment solutions to JAMStack, Vercel is ready to take the front-end experience for 11 million JavaScript developers to the next level. So this was the quick round-up on what’s the future of Next Js Development with Vercel is going to look like. Do checkout my awesome website I built using Next.js and Vercel. Don’t forget to leave a comment on — What improvements would you love to see in Next.js and Vercel? I’d love to hear any thoughts on this topic 😋.

“Zeit now” is now, Vercel. What does this mean to existing websites?

E-Commerce is a growing industry that offers convenience to shop online. According to research, visual content gives users the same experience online as they get it in-store. However, the better the visual content, the larger the page size is going to be. And this, in turn, affects the website’s load time, which could result in losing out on a lot of potential shoppers. So how can we ensure high-resolution image delivery without hurting the performance of the website? Read on to know more.

How to serve images without compromising the site performance?

With the advancement in web technologies, we have a few Next-Gen image formats that have better compression and quality characteristics compared to their older JPEG and PNG counterparts. Serving your images in these formats will load websites faster and consume less bandwidth. Here is the list of next-gen image formats currently available:

WebP is a new format developed by Google in 2010 to provide improved lossless and lossy compression for images. A major benefit of using WebP images is their reduced size and according to Google on average WebP images are 30% smaller in size compared to PNGs and JPEGs. If you look at the total payload of web pages, the images on most sites account for over half of that payload. So by using WebP images with up to 30% size reduction in images, you will see a noticeable impact on your site’s performance metrics.

Restraint we faced while implementing WebP

One of the major facts you need to be aware of WebP images is cross-browser support. Although about 79% of the global users surf using a browser that supports WebP, we still needed to serve JPG images to iOS and Mac users with Safari browser.

Here are two techniques I have discovered to overcome the problem -

Make changes on the user-facing platform by using a <picture> tag to serve multiple versions of the same images.

Use/Develop a service that optimizes and serves WebP images from a CDN cache, on-the-fly by detecting the user’s browser.

I would recommend using the second option as there are no changes required on the application. Now, if you are interested in learning more about the service (AWS Lambda Function and CloudFront to serve WebP images) we developed, check our technical guide here.

There are a lot of services that offer image optimization on the fly but important things we had to keep in mind are:

Storage: Most of the image optimization services out there require you to store the images in their databases and serve it from there. Since we already had over 20,000 high-resolution images in our AWS S3 bucket, we didn’t want to take the hassle of migrating it elsewhere.

Modifications: We wanted to implement a solution that had the least alterations to our frontend and backend systems which means the existing code in both UI and API will continue to work.

Recurrent Costs: With hundreds of visitors on the site every day, the price to pay for the bandwidth consumed from any optimization service is significantly higher. So we used our own function on AWS lambda@Edge and S3 to optimize the images at almost no additional costs.

Processing: Converting the whole library of images into WebP format is again an arduous task and could take a lot of time. So, we only convert images into WebP on their first request. As an added bonus we also process and store different dimensions of the images in the cache to achieve instant delivery from edge locations.

Modularity: Our solution can be easily deployed to any of our other platforms without the need for remodelling.

With WebP efficiently compressing the images and preserving the quality and our edge functions caching the images, we didn’t have to trade off between image quality or the number of images to serve to achieve faster load speed.

Google has indicated that site speed is one of the signals used by its algorithm to rank pages higher. With the above techniques and improved performance, we were also able to obtain higher scores on page audits.

By serving the images from AWS Lambda@Edge, we were able to load Gehna’s homepage in under 5 seconds.

The below graph shows the improvement in page speed provided by GTmetrix.

Next-gen image formats like WebP offer an incredible saving in file size with relatively little to zero compromises in image quality and when coupled with AWS Lambda@Edge, it provides great value in boosting the performance of a website. WebP definitely seems to be a promising image format for the web with anticipation of Apple’s Safari supporting WebP images in the near future.

Also, do check out the awesome E-commerce website Gehna we built at Commutatus using Next.JS.

If you find this article useful in improving the performance of your web site, give an 👏 and leave a comment on — What other techniques can make your page load faster? I’d love to hear any thoughts on this topic 😋

How did we improve the performance of an E-commerce site using Next-Gen image formats?

Single-page JavaScript applications can be pretty challenging these days due to client-side routing, page layout, APIs, server-side rendering and mainly SEO. This is where Next.js helps you build server-side rendered, SEO friendly apps with high customisability.

Next.js was built by Zeit back in 2016 and has quickly gained traction to the point of becoming one of the most popular tools of its kind. The same team built Zeit Now — the easiest way to deploy websites and host your web projects with zero configuration. Unfortunately, it doesn’t give us full control of AWS instances and lambda functions where our apps are hosted. Since most companies like to host apps on their own AWS servers for privacy concerns, let’s see how we can deploy a Next.js application on AWS.

If you are building a serverless Next.js app, do checkout Serverless Next.js Component by Daniel Conde which allows you to deploy Next.js apps to your own AWS Lambda@Edge functions in every CloudFront edge location across the globe with almost no configuration. But if you are using Express server in your app for other functionality, you might want to host it on AWS Elastic beanstalk.

Steps to host your Next.js app on AWS Elastic beanstalk via Travis:

Step 1: Make sure your app has a server for example Express and next.config.js doesn’t have the target set to serverless.

Step 2: Edit package.json to execute your scripts for development, staging and production environments.

"scripts": 
{        
 "dev": "NODE_ENV=development node ./server.js",
 "build": "next build",
 "start": "next start",
 "deploy-staging": "NODE_ENV=staging next build &&  NODE_ENV=staging node ./server.js",
 "deploy-production": "NODE_ENV=production next build && NODE_ENV=production node ./server.js"
},

Step 3: Time for AWS! Go to your AWS dashboard and click on Elastic Beanstalk.

Step 4: Click on Create New Application and enter a name for your application.

Step 5: Once you have created the application, under Actions dropdown, click on Create environment

Step 6: Choose Web server environment and click select.

Step 7: Now, enter the environment name for example next-app-staging or next-app-production and choose a domain. Make sure to select Node.js under Platform settings and click on Configure more options at the bottom.

Step 8: Click on modify of the Software tab and type npm run deploy-staging or npm run deploy-production in the Node command field based on your environment.

Step 9: Click on Create Environment and wait for a few minutes to let AWS set up everything for you.

Note: Don’t worry if your application Health status shows Severe because we still didn’t upload our app to run the node command. At this point, if you want to upload the app manually, you can do so by simply zipping the entire project folder without next build folder. But, come on just one more step to automate the whole deployment process.

Step 10: Now let’s integrate Travis for CI. You can check out several online tutorials on how to set up Travis with your GitHub repository. Create a travis.yml file in the root directory and configure it as follows:

language: node_js
node_js:
 - "11.6.0"
branches:
  only:
  - staging
  - master
deploy:
  - provider: elasticbeanstalk
    access_key_id: ${AWS_ACCESS_KEY_ID}
    secret_access_key: ${AWS_SECRET_ACCESS_KEY}
    region: "ap-south-1"       
    app: "next-app"                     
    env: "next-app-staging"                     
    bucket_name: ${AWS_S3_BUCKET} 
    on:
      branch: "staging"

  - provider: elasticbeanstalk
    access_key_id: ${AWS_ACCESS_KEY_ID}
    secret_access_key: ${AWS_SECRET_ACCESS_KEY}
    region: "ap-south-1"       
    app: "next-app"                     
    env: "next-app-production"                     
    bucket_name: ${AWS_S3_BUCKET}
    on:
      branch: "master"

after_deploy:
  - echo "Application Deployed!"

Note: The above configuration lets you deploy to different environments staging and production.

Step 11: Login to your Travis dashboard and click on your project repository. Go to more options > settings > Environment variables and add your AWS access keys and S3 bucket.

Note: You can copy the S3 bucket name after Step: 9 is completed by going to AWS Console > Services > S3. We just need to copy the bucket name and not the path.

Step 12: That’s it! Just push your code to Github, sit back and relax. Travis will automatically trigger a build and deploy the latest version of your Next.js app on AWS Elastic Beanstalk.

Bonus tip: To avoid any downtime of 5–10 min during the deployment process, create multiple EC2 instances/load balancers and enable rolling updates.

Additional Information: (Alternative build process)

The above steps will build and run your Next.js application on AWS Elastic Beanstalk and Travis is just used to push your code from GitHub to AWS. But if you want to build your app on Travis and then run it on AWS, here are the configuration changes you will have to make:

"scripts": {
"dev": "NODE_ENV=development node ./server.js",
"build": "next build","start": "next start",
"build-staging": "NODE_ENV=staging next build",
"deploy-staging": "NODE_ENV=staging node ./server.js",
"build-production": "NODE_ENV=production next build",
"deploy-production": "NODE_ENV=production node ./server.js"
},

In travis.yml, add the following lines before deploy:

before_script:
 - npm installscript:
 - npm run build-${NODE_ENV}before_deploy:
 - cd $TRAVIS_BUILD_DIR
 - sed -i '/.next/d' .gitignore
 - git add . && git commit -m "latest build"

The above code will install npm on travis virtual machine and build your application. You can add an NODE_ENVenvironment variable in travis available only to a specific branch. For example:

This will ensure the right build (staging/production) is made on travis. Finally, the before_deploy: will go to your build directory, remove .next from .gitignore and commit the changes temporarily on travis.

Now that your application is built on Travis, you just need to start your app server on AWS as mentioned in this tutorial.

Phew! Feeling tired ? Clone my Github repo. 😉

If you find this article useful as a guide to deploying your Next.js app running on the express server to AWS Elastic Beanstalk via Travis CI, give an 👏 and leave your queries in the comment section below? I’d love to answer them 😋. Also, do check out the awesome E-commerce website Gehna that we built at Commutatus using Next.js running on AWS Elastic beanstalk.

How to deploy Next.js app on AWS Elastic Beanstalk via Travis?

Let’s start with the most popular JavaScript framework out there, REACT!
Single page applications built using React provide seamless user experience and incredible performance but come with a catch. Out of the box, SPAs are not SEO friendly which is a must when it comes to online presence. Search engine crawlers see a blank page because the website renders on the client side. The solution is to render the web page on the server. Knowing the pros and cons of client-side rendering versus server-side rendering can help you build the best application to suit your needs.

Travelling back to the history of web development, browsers would just send a request to server asking to load the page and the server would comply by sending back one or more simple files like a HTML/ CSS. When the browser receives them, they’re ready to be rendered and hence they’ll almost instantly appear on the screen. We named these simple pre-built websites static since they are hosted on file server which simply send files as they neither require any processing beforehand nor special hardware.

Today, if we want to build what’s known as a web application which is what people are talking about when they say web 2.0, we need something more dynamic with the advent of JavaScript frameworks like react and angular. Client-side rendered single page applications saw a huge spike in popularity year on year.

Overview of client-side rendered (CSR) — SPA’s :

In client-side rendering all codes like HTML, CSS , JavaScript and even images like SVG’s are sent in a single bundle. This bundling is done in advance with the help of a module bundler like webpack that resolves all external dependencies like libraries / imports and combines all the code into one single file which is then sent on the initial page load from server to client. In the case of react, the application is built initially and managed by something called the virtual DOM which monitors for changes and updates the page with JavaScript when necessary.

Now, is it possible to have multiple pages on a single page application ?

Yes. Routing between pages in a SPA is simulated with something called client-side routing using tools like react router. You can see the views and updated browser endpoints in the URL bar but the requests never reach the server. The big advantage of client-side rendering is that there is only one request to your server for loading the web page and thereby reducing the load on your server. Page to page navigation through client-side routing is very fast as everything is pre-loaded on initial page load. React comes client-side rendered out of the box with most of the documentation written for CSR. Finally the most popular react starter framework create react app is also client-side rendered by default.

Consider a web app with many pages and a lot of JavaScript on each one of those pages. Loading the initial bundle, if it’s large can take a significant amount of time and make your site slow. It’s not surprising that with all the dependencies in your project, the bundle can reach upto two megabytes or more overtime.

Before you breakup with SPA’s , we can optimize our performance of single page apps by using server-side rendering with modern JavaScript frameworks. This form of server-side rendering loads each page in stages, reducing the time to first pixel by using a method called hydration. Under the hood it’s like a combination of the old-school static sites and client-side rendering where JavaScript will illustrate the DOM.

How does server-side rendering (SSR) work ?

The modern server-side rendering works in four different stages:

The client requests for a web page and plain markup files generated on the server are sent to the browser.

The browser then renders the markup without having any dynamic features like event listeners loaded.

The server sends JavaScript which might be a large bundle or a code split smaller bundle to the browser.

The page is finally hydrated in the browser with JavaScript making the DOM dynamic and responsive to user actions and data inputs.


In simple terms, SSR works by generating the mark-up in advance to reduce the time to first pixel as the user will see the fully rendered page. However it won’t be fully loaded until the actual javascript bundle downloads from the server. This whole process makes the perceived load time of the page much faster.

The key advantage of server-side rendering is it’s implication for search engine optimisation or SEO. The Google web crawler or bot that ranks websites on Google search has notoriously had problems crawling client-side rendered applications which rely on JavaScript to generate their markup. With the server-side rendering you don’t have this problem as the markup page guarantees that you’re gonna have good SEO every time.

Before you start with the project, it’s better to know the downsides SSR has. The main one being server requests. At least one new server request happens for every page loaded. So 20 page loads will result in 20 separate requests although each one will be smaller. The good news about this is javascript shared between the pages will be reused and then page specific JavaScript will be sent in a separate bundle only when you load that page. This is commonly referred to as code splitting or lazy loading i.e., just the code you need for the current view.

There are many ways to implement it from scratch with your existing react app but doing so is very time consuming and difficult to maintain. So, I suggest you to go with a lightweight framework called NEXT.JS for building server-rendered React applications because it offers tons of features you don’t get with create react app. Not only do you get server-side rendering without configuration but you also get lazy loading of modules, built in code splitting and a lot of different things that will boost the performance of your app. If you want to learn more about how to incorporate NEXT.JS in your projects please visit the official documentation here. Also do checkout the awesome E-commerce website Gehna that we built at Commutatus using NEXT.JS.

Gehna (E-commerce jewellery platform) built with ❤️ at Commutatus using NEXT.js

You can go a step further and improve your application’s google search rankings by following the best practices for SEO.

A semantic well defined URL improves the user experience and visibility on google search. This will boost your SEO as the keyword present in your title, description and URL of the page helps google determine relevance of the content for the term searched. For example having the keyword or name of the product in your url :

https://www.gehnaindia.com/product/ritzy-diamond-and-18k-gold-dangler-earrings

instead of having the product number or id in url as follows :

Meta tags are invisible but make it easier for search engines to determine what your content is about and how relevant it is with the search term, thereby improving your SEO. Next JS provides you ‘next/head ‘ which can be used to set the meta title and meta description for the page. Example snippet would be :

import Head from 'next/head';
<Head>
 <title key="title">{props.title}</title> 
 <meta key="description" 
  name="description" 
  content={props.description} 
 />
</Head>

You also have an option to use next-seo that simplifies managing your SEO in Next.js projects.

Loading a website over HTTP impacts SEO in a negative way. Google gives priority to secure content loaded over HTTPS while ranking pages for a keyword. So it’s important to make sure that your site content and assets load over HTTPS for better search rankings and visibility.

Imagine yourself visiting a place without a map. You are very likely to get lost. It’s a similar story for web crawlers and bots that try to index the pages on your site. A simple directory or ‘sitemap’ that has the information regarding pages contained in the web application, makes it easier for the bots to understand the page hierarchy.

Images and graphics play a crucial role for user experience on your website. But search engines crawlers can’t interpret images and the only way to overcome this is by using the ‘alt’ tags. Specifying proper alt tags on images helps the crawler index it for relevant search terms. For example, having alt tags on product photos in e-commerce site improves the store’s SEO.

If you find this article useful in improving SEO on single page applications , give an 👏 and leave a comment on - What improvements would you love to see in the upcoming frameworks for making them SEO friendly? I’d love to hear any thoughts on this topic 😋.

Are Single Page Applications still relevant in 2021?

Apollo client is widely used for managing data fetched via GraphQL and caching is one of the main features it offers. If you are using Unions or Fragments in GraphQL , by default the apollo client uses Heuristic Fragment matcher to map the fields(fragments).

Before you freak out why this warning occurs, understand the fact that Apollo Client doesn’t know our GraphQL schema and hence it cannot accurately map the fragments. So this will end with the following warning on your console:

“You are using the simple (heuristic) fragment matcher, but your queries contain union or interface types. “

Heuristic fragment matcher works fine in some cases but Apollo Client will not verify the server response i.e., it doesn’t stop you from manually writing an invalid data into the store using writeQuery or updateQuery. So, it’s not ideal to ignore the warnings.

Thano’s Snap! Make the warning disappear:

So, for this warning to go away, you can query the schema to get the required information about unions and interfaces. Thereafter, provide this knowledge to the InMemeoryCache of apollo client using the IntrospectionFragmentMatcher as described in the docs.

Step by step guide – using IntrospectionFragmentMatcher

Let’s see how we can make apollo client accurately map the fragments (unions & interfaces) and validate them before writing it to the store.

As the initial step, go to the project ‘src’ folder and create a file named schemaQuery.js and add the following code:

The above code, will query your schema and store it in fragmentTypes.json (This json file is created automatically, you don’t have to create it). However, you can change the creation path of the fragmentTypes.json file. Finally, remember to replace the api.example.com with your actual API server.

Step 2: Pass the fragmentTypes to InMemoryCache

Go to the file where you initialise apollo client cache and type in the following code :

import {IntrospectionFragmentMatcher} from 'apollo-cache-inmemory';
import introspectionQueryResultData from '../../../src/fragmentTypes.json';
const fragmentMatcher = new IntrospectionFragmentMatcher({introspectionQueryResultData});

Note: The path for fragmentTypes.json file needs to be the same as step 1.

Now, pass the fragmentMatcher with schema data to Apollo’s InMemoryCache as follows:

cache: new InMemoryCache({fragmentMatcher})

After you have added all the above code, your file should look something like this :

Step 3: Build and fetch the Schema object into fragmentTypes.json

Using node, in package.json set up a build script for querying the schema and writing it in fragmentTypes.json file. For example:

 "build-fragment” : “node src/schemaQuery.js”

Run “npm run build-fragment” and let the magic happen!

The fragmentTypes.json file gets created and all your schema information related to unions and interfaces are stored as an object.

Optional step : Set the schemaQuery.js script to run at build time

To introspect the server every time we build the project, it is recommended to run a parallel node thread for your “start” script in package.json as follows :

“start”: “ npm-run-all -p start-server build-fragment”,
“start-server”: “node server.js”,
“build-fragment”: “node src/schemaQuery.js”

Now, running “npm run start” will trigger both your node server and the schemaQuery script that we just added.

Watch the video below on How to Fix this Warning.

Hope you found this article helpful in getting rid of the heuristic fragment matcher warning. Checkout Educatly (student platform to explore over 1,50,000 study-abroad opportunities worldwide), where we used the IntrospectionFragmentMatcher to deal with heuristic fragment warnings caused by caching unions and interfaces.

Heuristic Fragment matcher warning! How to fix it?