{"id":384830,"date":"2023-06-01T06:37:37","date_gmt":"2023-06-01T06:37:37","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=384830"},"modified":"2024-10-23T07:38:16","modified_gmt":"2024-10-23T07:38:16","slug":"render-a-list-of-data-in-nextjs","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/render-a-list-of-data-in-nextjs\/","title":{"rendered":"How To Rendered A Large List Of Data In NextJS"},"content":{"rendered":"\n

Rendering a large list of data in (NextJS) is always the tough job to do . we usually used the pagination technique for that, but at very large data pagination technique is also get failed. <\/p>\n\n\n\n

For implement rendering of large list of data we used technique called \u201cwindowing\u201d or \u201cList virtualization\u201d. At these we only render the data or data window which view to user viewport. <\/p>\n\n\n\n

Because of this technique, browser performance get improved and our large list of data get easily rendered without the lagging our app. <\/p>\n\n\n\n

For performance improvement checkout our another blog Performance Optimization in the NextJS<\/a>.<\/p>\n\n\n\n

Steps to Implement the react-window In NextJs<\/h3>\n\n\n\n

1. Install these libraries.<\/strong>
React-virtualized-auto-sizer<\/code><\/a>: It’s the HOC (Higher Order Component) which fill’s the space available to fit it’s child height and width.<\/p>\n\n\n\n

React-window-infinite-loader<\/code><\/a>: Basically, it break’s down the large data into chunks and just-in-time loaded as they are scrolled into view.<\/p>\n\n\n\n

React-window<\/a>: It used for rendering the large list of data<\/p>\n\n\n\n

Add these libraries by running provided command’s in your terminal.<\/p>\n\n\n\n

npm i react-window<\/pre>\n\n\n\n
npm i react-virtualized-auto-sizer<\/pre>\n\n\n\n
npm i react-window-infinite-loader<\/pre>\n\n\n\n
2. Implement the React window in your nextjs<\/strong> app<\/strong><\/p>\n\n\n\n
import React, { useEffect, useState } from 'react';\nimport { FixedSizeList as List } from 'react-window';\nimport InfiniteLoader from 'react-window-infinite-loader';\nimport AutoSizer from 'react-virtualized-auto-sizer';\n\n\nexport const Products = () => {\n \n  const [productList, setProductList] = useState([]);\n  \n  useEffect(() => {\n   const getProductList = async() => {\n      const data = await \/\/ api call for product list\n}\n    getProductList();\n  },[])\n\n\n  return (\n    <React.Fragment>\n      <InfiniteLoader itemCount={productList.length}>\n         {({onItemsRendered, ref }) => (\n            <AutoSizer>\n              {({ height, width }) => (                                  \n             <List\n               ref={ref}\n               onItemsRendered={onItemsRendered}\n               height={height}\n               itemCount={prodctList.length}\n               itemSize={30}\n               width={width}>\n               {({index, style }) => {\n                    return (\n                     <div style={style}>Row {index}<\/div>\n                    );\n               }}\n           <\/List>\n              )}\n            <\/AutoSizer>\n          <\/div>\n        )}\n      <\/InfiniteLoader>\n    <\/React.Fragment>\n  );\n};<\/pre>\n\n\n\n
There are so many things is going on this code , let understand step by step.<\/p>\n\n\n\n
First, we implement the InfiniteLoader<\/strong> where we define the item.<\/p>\n\n\n\n
Count which is equal to the product.length and (onItemsRendered<\/strong>, ref<\/strong>) is used if you want to show any loader when user scroll down in product scrolling.<\/p>\n\n\n\n
Second inside the Infinite Loader we implement the AutoSizer<\/strong> , where act as the resizer when the screen size get changed.<\/p>\n\n\n\n
Third we used List component of the FixedSizeList<\/strong> of react-window, you can choose multiple types of component in react-window as per your need. <\/p>\n\n\n\n
You can check the available component at this react-window<\/a> .<\/p>\n\n\n\n
At List component we define the (ref<\/strong> , onItemsRendered<\/strong>) for define product loading loader. <\/p>\n\n\n\n
Then we define height and width and pass the height and width of auto resize for manage resizing. <\/p>\n\n\n\n
And, after that we need to add div container where we add style in the div container style. Make sure to pass style of List into the div style. <\/p>\n\n\n\n
Now we completed the implementation of the react-window for render large list of data.<\/p>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
Rendering large lists of data in Next.js can be challenging, especially when traditional pagination techniques struggle with extensive datasets. <\/p>\n\n\n\n
To address this, we employed a technique known as “windowing” or “list virtualization.” <\/p>\n\n\n\n
This approach only renders the portion of the data currently visible in the user’s viewport, significantly improving browser performance and reducing lag.<\/p>\n\n\n\n
In this article, we outlined the steps to implement the react-window<\/code> library in a Next.js application:<\/p>\n\n\n\n
    \n
  1. Library Installation<\/strong>: We installed essential libraries (react-window<\/code>, react-virtualized-auto-sizer<\/code>, and react-window-infinite-loader<\/code>) to enable efficient rendering and resizing.<\/li>\n\n\n\n
  2. Implementation<\/strong>: We detailed how to set up the Products<\/code> component, utilizing InfiniteLoader<\/code> to manage data loading as users scroll. <\/li>\n\n\n\n
  3. The AutoSizer<\/code> component ensures the list adjusts to the viewport size, while the List<\/code> component from react-window<\/code> handles the rendering of visible items.<\/li>\n<\/ol>\n\n\n\n
    By following these steps, we successfully implemented a solution for rendering large datasets without compromising application performance.<\/p>\n\n\n\n
    Thank you for reading! If you enjoyed this blog, be sure to check out my other articles on React and Next.js. Happy coding!<\/p>\n\n\n\n

    <\/p>\n\n\n\n
    <\/p>\n","protected":false},"excerpt":{"rendered":"
    Rendering a large list of data in (NextJS) is always the tough job to do . we usually used the pagination technique for that, but at very large data pagination technique is also get failed. For implement rendering of large list of data we used technique called \u201cwindowing\u201d or \u201cList virtualization\u201d. At these we only […]<\/a><\/p>\n","protected":false},"author":495,"featured_media":470869,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13575,6357],"tags":[14744,15269,4173,6359],"class_list":["post-384830","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-next-js","category-react-js","tag-next-headless-theme","tag-next-js-2","tag-performance","tag-react-js"],"yoast_head":"\nNextJs | How To Rendered A Large List Of Data In NextJS - Webkul Blog<\/title>\n<meta name=\"description\" content=\"Rendered the large list of data in NextJS using the window-technique, react-window, react-virtualized-auto-sizer, react-window-infinite-loader\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/render-a-list-of-data-in-nextjs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"NextJs | How To Rendered A Large List Of Data In NextJS - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"Rendered the large list of data in NextJS using the window-technique, react-window, react-virtualized-auto-sizer, react-window-infinite-loader\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/render-a-list-of-data-in-nextjs\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-01T06:37:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-23T07:38:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/webkul-og-300x158-1.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"300\" \/>\n\t<meta property=\"og:image:height\" content=\"158\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Vishal Handa\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Vishal Handa\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/render-a-list-of-data-in-nextjs\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/render-a-list-of-data-in-nextjs\/\"},\"author\":{\"name\":\"Vishal Handa\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/3e7c3652272858eee25f729824abcf94\"},\"headline\":\"How To Rendered A Large List Of Data In NextJS\",\"datePublished\":\"2023-06-01T06:37:37+00:00\",\"dateModified\":\"2024-10-23T07:38:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/render-a-list-of-data-in-nextjs\/\"},\"wordCount\":524,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/render-a-list-of-data-in-nextjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/webkul-og-300x158-1.webp\",\"keywords\":[\"next headless theme\",\"next js\",\"performance\",\"react js\"],\"articleSection\":[\"next js\",\"react js\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/render-a-list-of-data-in-nextjs\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/render-a-list-of-data-in-nextjs\/\",\"url\":\"https:\/\/webkul.com\/blog\/render-a-list-of-data-in-nextjs\/\",\"name\":\"NextJs | How To Rendered A Large List Of Data In NextJS - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/render-a-list-of-data-in-nextjs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/render-a-list-of-data-in-nextjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/webkul-og-300x158-1.webp\",\"datePublished\":\"2023-06-01T06:37:37+00:00\",\"dateModified\":\"2024-10-23T07:38:16+00:00\",\"description\":\"Rendered the large list of data in NextJS using the window-technique, react-window, react-virtualized-auto-sizer, react-window-infinite-loader\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/render-a-list-of-data-in-nextjs\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/render-a-list-of-data-in-nextjs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/render-a-list-of-data-in-nextjs\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/webkul-og-300x158-1.webp\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/webkul-og-300x158-1.webp\",\"width\":300,\"height\":158,\"caption\":\"magento graphql api's in nextjs\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/render-a-list-of-data-in-nextjs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How To Rendered A Large List Of Data In NextJS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/3e7c3652272858eee25f729824abcf94\",\"name\":\"Vishal Handa\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/faed45c922f15ae5e9baa741827207ccec6ba6d51587eb248e61e0e4b888e355?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/faed45c922f15ae5e9baa741827207ccec6ba6d51587eb248e61e0e4b888e355?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Vishal Handa\"},\"description\":\"Vishal Handa is a Software Engineer specializing in the Akeneo platform with expertise in PIM API Development and payment gateway integration services. Skilled in REST APIs, BackboneJS, and PostgreSQL, Vishal crafts seamless, high-performance solutions that enhance digital commerce and streamline data management.\",\"url\":\"https:\/\/webkul.com\/blog\/author\/vishal-handa658\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"NextJs | How To Rendered A Large List Of Data In NextJS - Webkul Blog","description":"Rendered the large list of data in NextJS using the window-technique, react-window, react-virtualized-auto-sizer, react-window-infinite-loader","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/render-a-list-of-data-in-nextjs\/","og_locale":"en_US","og_type":"article","og_title":"NextJs | How To Rendered A Large List Of Data In NextJS - Webkul Blog","og_description":"Rendered the large list of data in NextJS using the window-technique, react-window, react-virtualized-auto-sizer, react-window-infinite-loader","og_url":"https:\/\/webkul.com\/blog\/render-a-list-of-data-in-nextjs\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2023-06-01T06:37:37+00:00","article_modified_time":"2024-10-23T07:38:16+00:00","og_image":[{"width":300,"height":158,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/webkul-og-300x158-1.webp","type":"image\/webp"}],"author":"Vishal Handa","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Vishal Handa","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/render-a-list-of-data-in-nextjs\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/render-a-list-of-data-in-nextjs\/"},"author":{"name":"Vishal Handa","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/3e7c3652272858eee25f729824abcf94"},"headline":"How To Rendered A Large List Of Data In NextJS","datePublished":"2023-06-01T06:37:37+00:00","dateModified":"2024-10-23T07:38:16+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/render-a-list-of-data-in-nextjs\/"},"wordCount":524,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/render-a-list-of-data-in-nextjs\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/webkul-og-300x158-1.webp","keywords":["next headless theme","next js","performance","react js"],"articleSection":["next js","react js"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/render-a-list-of-data-in-nextjs\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/render-a-list-of-data-in-nextjs\/","url":"https:\/\/webkul.com\/blog\/render-a-list-of-data-in-nextjs\/","name":"NextJs | How To Rendered A Large List Of Data In NextJS - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/render-a-list-of-data-in-nextjs\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/render-a-list-of-data-in-nextjs\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/webkul-og-300x158-1.webp","datePublished":"2023-06-01T06:37:37+00:00","dateModified":"2024-10-23T07:38:16+00:00","description":"Rendered the large list of data in NextJS using the window-technique, react-window, react-virtualized-auto-sizer, react-window-infinite-loader","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/render-a-list-of-data-in-nextjs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/render-a-list-of-data-in-nextjs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/render-a-list-of-data-in-nextjs\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/webkul-og-300x158-1.webp","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/webkul-og-300x158-1.webp","width":300,"height":158,"caption":"magento graphql api's in nextjs"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/render-a-list-of-data-in-nextjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How To Rendered A Large List Of Data In NextJS"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/3e7c3652272858eee25f729824abcf94","name":"Vishal Handa","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/faed45c922f15ae5e9baa741827207ccec6ba6d51587eb248e61e0e4b888e355?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/faed45c922f15ae5e9baa741827207ccec6ba6d51587eb248e61e0e4b888e355?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Vishal Handa"},"description":"Vishal Handa is a Software Engineer specializing in the Akeneo platform with expertise in PIM API Development and payment gateway integration services. Skilled in REST APIs, BackboneJS, and PostgreSQL, Vishal crafts seamless, high-performance solutions that enhance digital commerce and streamline data management.","url":"https:\/\/webkul.com\/blog\/author\/vishal-handa658\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/384830","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/495"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=384830"}],"version-history":[{"count":15,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/384830\/revisions"}],"predecessor-version":[{"id":470871,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/384830\/revisions\/470871"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media\/470869"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=384830"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=384830"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=384830"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}