Online Retail Store using NextJS, NodeJS and ReactJS
Technologies: Next.js, React.js, Node.js, MySQL, Redis Database Cache
Challenges:
Need high-performing and lightweight application with better layout design
Solution:
The old application was built using Drupal. When we reviewed the Drupal schema, the application had too much customization and some of the 3rd party features were totally dependent on the Drupal schema, so we decided to build a headless solution. We proposed that we will continue using the Drupal database structure, but use React.js for the front-end and Node.js for the API to connect the front-end and Drupal database.
Challenges:
SEO-friendly application. Maintain the same URL structure in the headless application
Solution:
One of the biggest challenges is maintaining a URL structure similar to the old application. Drupal uses the CMS page title to generate the URL for that page, and it doesn’t have a particular format. In React.js, we couldn’t identify and map the URLs to their respective pages so we couldn’t render the correct content for the URL. To tackle this problem, we used Next.js to do server-side rendering and identify the URL (Slug page concept). After identifying the URL, we rendered the correct content for each URL and we were able to keep the URL structure similar to the old application.
Challenges:
Improve the load time of the application
Solution:
After going headless the speed was better comparatively. To improve the performance of the site we had to focus on the following aspects:
Reduce the API response time.
Reduce the load on the database when the traffic is heavy.
To reduce the API response time, we created a separate API for each section on the page. These APIs would be called at the same time before rendering the page. During heavy traffic, too many API requests were sent to the database and it was putting a heavy load on the database eventually affecting the performance of the application. To avoid this problem, we installed the Redis database cache. The advantage of using Redis is that it actually stores the API request and relevant response in the database, and later when a similar kind of request is made, instead of getting the response from the actual database, Redis sends the response from the cache, and this way we were able to reduce the load on the database.