[{"data":1,"prerenderedAt":129},["ShallowReactive",2],{"$fy7RvahZg4ola5rlvkkxfz-OzRRBpBXcxh4JoAw6UdyU":3,"post-tags-nuxt-js-data-fetching-hook-async-data":87},[4],{"id":5,"date":6,"date_gmt":6,"guid":7,"modified":6,"modified_gmt":6,"slug":9,"status":10,"type":11,"link":8,"title":12,"content":14,"excerpt":17,"author":19,"featured_media":20,"comment_status":21,"ping_status":21,"sticky":16,"template":22,"format":23,"meta":24,"categories":25,"tags":26,"class_list":29,"post_image_original":39,"devto_meta":40,"_links":46},52,"2021-06-12T06:23:56",{"rendered":8},"https:\u002F\u002Flab.aiarnob.com\u002Fnuxt-js-data-fetching-hook-async-data\u002F","nuxt-js-data-fetching-hook-async-data","publish","post",{"rendered":13},"Nuxt.js Data Fetching Hook: Async Data.",{"rendered":15,"protected":16},"\u003Cp>In this blog, I am discussing the Nuxt.js asyncData hook. For server-side rendering in Nuxt.js need to use specific hooks. This allows your page to render with all of its required data presents.\u003C\u002Fp>\n\u003Ch2>\n  \u003Ca name=\"nuxtjs-has-two-hooks-for-asynchronous-data-loading\" href=\"#nuxtjs-has-two-hooks-for-asynchronous-data-loading\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Nuxt.js has two hooks for asynchronous data loading:\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Col>\n\u003Cli>The fetch hook\u003C\u002Fli>\n\u003Cli>The asyncData hook\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>Also, Nuxt.js supports traditional Vue patterns for loading data in your client-side app, such as fetching data in a component’s \u003Cstrong>mounted()\u003C\u002Fstrong> hook.\u003C\u002Fp>\n\u003Ch2>\n  \u003Ca name=\"some-important-features-of-asyncdata-hook-in-nuxtjs\" href=\"#some-important-features-of-asyncdata-hook-in-nuxtjs\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Some important features of asyncData hook in Nuxt.js:\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Col>\n\u003Cli>asyncData works on both server-side & client-side rendering.\u003C\u002Fli>\n\u003Cli>asyncData is called every time before loading a component.\u003C\u002Fli>\n\u003Cli>You can use only on next pages, not in vue components.\u003C\u002Fli>\n\u003Cli>anyncData is called from the server-side before the component is mounted. That’s why you don’t have access to \u003Cstrong>’this’\u003C\u002Fstrong> keyword inside \u003Cstrong>asyncData()\u003C\u002Fstrong>.\u003C\u002Fli>\n\u003Cli>This method receives the \u003Ca href=\"https:\u002F\u002Fnuxtjs.org\u002Fdocs\u002F2.x\u002Fconcepts\u002Fcontext-helpers\" target=\"_blank\" rel=\"noopener noreferrer\">context\u003C\u002Fa> object as the first argument and you can use it to access core nuxt properties such as route, store, params, app, etc.\u003C\u002Fli>\n\u003Cli>The result from asyncData will be merged with data.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>\u003Cstrong>Here is the example of nuxt asyncData using \u003Ca href=\"https:\u002F\u002Faxios.nuxtjs.org\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">@nuxt\u002Faxios\u003C\u002Fa> library:\u003C\u002Fstrong>\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"o\"><\u003C\u002Fspan>\u003Cspan class=\"nx\">template\u003C\u002Fspan>\u003Cspan class=\"o\">>\u003C\u002Fspan>\n  \u003Cspan class=\"o\"><\u003C\u002Fspan>\u003Cspan class=\"nx\">div\u003C\u002Fspan>\u003Cspan class=\"o\">>\u003C\u002Fspan>\n    \u003Cspan class=\"o\"><\u003C\u002Fspan>\u003Cspan class=\"nx\">h1\u003C\u002Fspan>\u003Cspan class=\"o\">>\u003C\u002Fspan>\u003Cspan class=\"p\">{{\u003C\u002Fspan> \u003Cspan class=\"nx\">post\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">title\u003C\u002Fspan> \u003Cspan class=\"p\">}}\u003C\u002Fspan>\u003Cspan class=\"o\"><\u003C\u002Fspan>\u003Cspan class=\"sr\">\u002Fh1\u003C\u002Fspan>\u003Cspan class=\"err\">>\n\u003C\u002Fspan>    \u003Cspan class=\"o\"><\u003C\u002Fspan>\u003Cspan class=\"nx\">p\u003C\u002Fspan>\u003Cspan class=\"o\">>\u003C\u002Fspan>\u003Cspan class=\"p\">{{\u003C\u002Fspan> \u003Cspan class=\"nx\">post\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">description\u003C\u002Fspan> \u003Cspan class=\"p\">}}\u003C\u002Fspan>\u003Cspan class=\"o\"><\u003C\u002Fspan>\u003Cspan class=\"sr\">\u002Fp\u003C\u002Fspan>\u003Cspan class=\"err\">>\n\u003C\u002Fspan>  \u003Cspan class=\"o\"><\u003C\u002Fspan>\u003Cspan class=\"sr\">\u002Fdiv\u003C\u002Fspan>\u003Cspan class=\"err\">>\n\u003C\u002Fspan>\u003Cspan class=\"o\"><\u003C\u002Fspan>\u003Cspan class=\"sr\">\u002Ftemplate\u003C\u002Fspan>\u003Cspan class=\"err\">>\n\u003C\u002Fspan>\n\u003Cspan class=\"o\"><\u003C\u002Fspan>\u003Cspan class=\"nx\">script\u003C\u002Fspan>\u003Cspan class=\"o\">>\u003C\u002Fspan>\n  \u003Cspan class=\"k\">export\u003C\u002Fspan> \u003Cspan class=\"k\">default\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n    \u003Cspan class=\"k\">async\u003C\u002Fspan> \u003Cspan class=\"nf\">asyncData\u003C\u002Fspan>\u003Cspan class=\"p\">({\u003C\u002Fspan>\u003Cspan class=\"nx\">params\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"nx\">$axios\u003C\u002Fspan> \u003Cspan class=\"p\">})\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n      \u003Cspan class=\"kd\">const\u003C\u002Fspan> \u003Cspan class=\"nx\">post\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"k\">await\u003C\u002Fspan> \u003Cspan class=\"nx\">$http\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nf\">$get\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"s2\">`https:\u002F\u002Fapi.nuxtjs.dev\u002Fposts\u002F\u003C\u002Fspan>\u003Cspan class=\"p\">${\u003C\u002Fspan>\u003Cspan class=\"nx\">params\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">id\u003C\u002Fspan>\u003Cspan class=\"p\">}\u003C\u002Fspan>\u003Cspan class=\"s2\">`\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan>\n      \u003Cspan class=\"k\">return\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan> \u003Cspan class=\"nx\">post\u003C\u002Fspan> \u003Cspan class=\"p\">}\u003C\u002Fspan>\n    \u003Cspan class=\"p\">}\u003C\u002Fspan>\n  \u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003Cspan class=\"o\"><\u003C\u002Fspan>\u003Cspan class=\"sr\">\u002Fscript\u003C\u002Fspan>\u003Cspan class=\"err\">>\n\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>asyncData hook returned the promise and resolved during the route transition. This means that no “loading placeholder” is visible during client-side transitions but you can use the \u003Ca href=\"https:\u002F\u002Fdev.to\u002Faiarnob\u002Fhow-to-use-nuxt-js-loading-progress-bar-39l3\">loading bar\u003C\u002Fa> can be used to indicate a loading state to the user.\u003C\u002Fp>\n\u003Ch2>\n  \u003Ca name=\"asyncdata-on-both-clientside-amp-serverside\" href=\"#asyncdata-on-both-clientside-amp-serverside\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  asyncData() on both client-side & server-side:\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>To test how asyncData() works on both client-side & server-side, please write the bellow code on your Nuxt.js page.\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight plaintext\">\u003Ccode><script>\nexport default{\n    asyncData(context){\n        console.log(context);\n}\n}\n<\u002Fscript>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>\u003Cstrong>Server Side Test\u003C\u002Fstrong>\u003Cbr \u002F>\nNow reload the page on the browser and look inside your terminal(also can check on browser console panel Nuxt SSR Response) on which your Nuxt.js application running. You can see the context object like the below screenshot. That means its works on the server-side.\u003Cbr \u002F>\n\u003Ca href=\"https:\u002F\u002Fmedia2.dev.to\u002Fdynamic\u002Fimage\u002Fwidth=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\u002Fhttps%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwzjzudyqv04q4wdcdck1.png\" class=\"article-body-image-wrapper\">\u003Cimg decoding=\"async\" src=\"https:\u002F\u002Fmedia2.dev.to\u002Fdynamic\u002Fimage\u002Fwidth=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\u002Fhttps%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwzjzudyqv04q4wdcdck1.png\" alt=\"Nuxt.js SSR\" loading=\"lazy\" width=\"800\" height=\"667\">\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Client Side Test\u003C\u002Fstrong>\u003Cbr \u002F>\nYou can also check client-side rendering when you come to this page from another Nuxt.js page (The link must be used NuxtLink for linking between pages). Now open your browser dev tools and check the console panel and you see the magic of asyncData().\u003Cbr \u002F>\n\u003Ca href=\"https:\u002F\u002Fmedia2.dev.to\u002Fdynamic\u002Fimage\u002Fwidth=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\u002Fhttps%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Foe6rcmn858p4sej707em.png\" class=\"article-body-image-wrapper\">\u003Cimg decoding=\"async\" src=\"https:\u002F\u002Fmedia2.dev.to\u002Fdynamic\u002Fimage\u002Fwidth=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\u002Fhttps%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Foe6rcmn858p4sej707em.png\" alt=\"Client Side Test Nuxt.js\" loading=\"lazy\" width=\"800\" height=\"247\">\u003C\u002Fa>\u003C\u002Fp>\n\u003Ch2>\n  \u003Ca name=\"how-you-can-use-async-data-in-components\" href=\"#how-you-can-use-async-data-in-components\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  How you can use Async data in components:\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>We already know that we can not use anyncData hook inside any component but we can use another way for component. \u003Cbr \u002F>\nMake the API call in the asyncData method of the page component and pass the data as props to the sub components. Both Client & Server side rendering will work fine.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Referance:\u003C\u002Fstrong> Nuxt.js Official Data Fetch \u003Ca href=\"https:\u002F\u002Fnuxtjs.org\u002Fdocs\u002F2.x\u002Ffeatures\u002Fdata-fetching\" target=\"_blank\" rel=\"noopener noreferrer\">Hook\u003C\u002Fa>\u003C\u002Fp>\n",false,{"rendered":18,"protected":16},"\u003Cp>In this blog, I am discussing the Nuxt.js asyncData hook. For server-side rendering in Nuxt.js need…\u003C\u002Fp>\n",1,53,"open","","standard",{"footnotes":22},[19],[27,28],25,32,[30,11,31,32,33,34,35,36,37,38],"post-52","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-javascript","tag-vue","https:\u002F\u002Flab.aiarnob.com\u002Fwp-content\u002Fuploads\u002F2021\u002F06\u002Fdevto-726068-cover.webp",{"edited_at":41,"published_at":42,"reactions":43,"comments":44,"reading_time":44,"body_markdown":45},"2021-06-12T09:06:19Z","2021-06-12T06:23:56Z",15,2,"In this blog, I am discussing the Nuxt.js asyncData hook. For server-side rendering in Nuxt.js need to use specific hooks. This allows your page to render with all of its required data presents.\n\n##Nuxt.js has two hooks for asynchronous data loading:\n1. The fetch hook\n2. The asyncData hook\n\nAlso, Nuxt.js supports traditional Vue patterns for loading data in your client-side app, such as fetching data in a component's **mounted()** hook.\n\n##Some important features of asyncData hook in Nuxt.js:\n1. asyncData works on both server-side & client-side rendering.\n2. asyncData is called every time before loading a component.\n3. You can use only on next pages, not in vue components.\n4. anyncData is called from the server-side before the component is mounted. That’s why you don’t have access to **’this’** keyword inside **asyncData()**.\n5. This method receives the [context](https:\u002F\u002Fnuxtjs.org\u002Fdocs\u002F2.x\u002Fconcepts\u002Fcontext-helpers) object as the first argument and you can use it to access core nuxt properties such as route, store, params, app, etc.\n6. The result from asyncData will be merged with data.\n\n**Here is the example of nuxt asyncData using [@nuxt\u002Faxios](https:\u002F\u002Faxios.nuxtjs.org\u002F) library:**\n``` javascript\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Ch1>{{ post.title }}\u003C\u002Fh1>\n    \u003Cp>{{ post.description }}\u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\n  export default {\n    async asyncData({params, $axios }) {\n      const post = await $http.$get(`https:\u002F\u002Fapi.nuxtjs.dev\u002Fposts\u002F${params.id}`)\n      return { post }\n    }\n  }\n\u003C\u002Fscript>\n```\n\nasyncData hook returned the promise and resolved during the route transition. This means that no \"loading placeholder\" is visible during client-side transitions but you can use the [loading bar](https:\u002F\u002Fdev.to\u002Faiarnob\u002Fhow-to-use-nuxt-js-loading-progress-bar-39l3) can be used to indicate a loading state to the user.\n\n##asyncData() on both client-side & server-side:\nTo test how asyncData() works on both client-side & server-side, please write the bellow code on your Nuxt.js page.\n```\n\u003Cscript>\nexport default{\n\tasyncData(context){\n\t\tconsole.log(context);\n}\n}\n\u003C\u002Fscript>\n```\n\n**Server Side Test**\nNow reload the page on the browser and look inside your terminal(also can check on browser console panel Nuxt SSR Response) on which your Nuxt.js application running. You can see the context object like the below screenshot. That means its works on the server-side.\n![Nuxt.js SSR](https:\u002F\u002Fdev-to-uploads.s3.amazonaws.com\u002Fuploads\u002Farticles\u002Fwzjzudyqv04q4wdcdck1.png)\n\n**Client Side Test**\nYou can also check client-side rendering when you come to this page from another Nuxt.js page (The link must be used NuxtLink for linking between pages). Now open your browser dev tools and check the console panel and you see the magic of asyncData().\n![Client Side Test Nuxt.js](https:\u002F\u002Fdev-to-uploads.s3.amazonaws.com\u002Fuploads\u002Farticles\u002Foe6rcmn858p4sej707em.png)\n\n##How you can use Async data in components:\nWe already know that we can not use anyncData hook inside any component but we can use another way for component. \nMake the API call in the asyncData method of the page component and pass the data as props to the sub components. Both Client & Server side rendering will work fine.\n\n**Referance:** Nuxt.js Official Data Fetch [Hook](https:\u002F\u002Fnuxtjs.org\u002Fdocs\u002F2.x\u002Ffeatures\u002Fdata-fetching)",{"self":47,"collection":53,"about":56,"author":59,"replies":63,"version-history":66,"wp:featuredmedia":70,"wp:attachment":73,"wp:term":76,"curies":83},[48],{"href":49,"targetHints":50},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F52",{"allow":51},[52],"GET",[54],{"href":55},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts",[57],{"href":58},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftypes\u002Fpost",[60],{"embeddable":61,"href":62},true,"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fusers\u002F1",[64],{"embeddable":61,"href":65},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fcomments?post=52",[67],{"count":68,"href":69},0,"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F52\u002Frevisions",[71],{"embeddable":61,"href":72},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fmedia\u002F53",[74],{"href":75},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fmedia?parent=52",[77,80],{"taxonomy":78,"embeddable":61,"href":79},"category","https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fcategories?post=52",{"taxonomy":81,"embeddable":61,"href":82},"post_tag","https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftags?post=52",[84],{"name":85,"href":86,"templated":61},"wp","https:\u002F\u002Fapi.w.org\u002F{rel}",[88,110],{"id":27,"count":89,"description":22,"link":90,"name":91,"slug":91,"taxonomy":81,"meta":92,"_links":93},3,"https:\u002F\u002Flab.aiarnob.com\u002Ftag\u002Fjavascript\u002F","javascript",[],{"self":94,"collection":99,"about":102,"wp:post_type":105,"curies":108},[95],{"href":96,"targetHints":97},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftags\u002F25",{"allow":98},[52],[100],{"href":101},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftags",[103],{"href":104},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftaxonomies\u002Fpost_tag",[106],{"href":107},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts?tags=25",[109],{"name":85,"href":86,"templated":61},{"id":28,"count":44,"description":22,"link":111,"name":112,"slug":112,"taxonomy":81,"meta":113,"_links":114},"https:\u002F\u002Flab.aiarnob.com\u002Ftag\u002Fvue\u002F","vue",[],{"self":115,"collection":120,"about":122,"wp:post_type":124,"curies":127},[116],{"href":117,"targetHints":118},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftags\u002F32",{"allow":119},[52],[121],{"href":101},[123],{"href":104},[125],{"href":126},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts?tags=32",[128],{"name":85,"href":86,"templated":61},1781010865160]