[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"global-header-tutorials-static":3,"article-static-assets-vs-dynamic-routing-collision":4,"initial-similar-fetch":19},[],{"alias":5,"title":6,"description":7,"content":8,"thumbnail":9,"keywords":10,"categories":15,"tags":17,"createdAt":18},"static-assets-vs-dynamic-routing-collision","Static Assets vs. Dynamic Routing Collision","Resolving the Static Assets vs. Dynamic Routing Collision","{\"type\":\"doc\",\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"In this tutorial, we are going to learn the mechanism of how the Nuxt Niro server processes the request, why the assets routing collision occurs, and how to prevent it.\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"Let's consider, suppose that we do have the static image inside the folder:\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":null},\"content\":[{\"type\":\"text\",\"text\":\"project-root\u002F\\n│\\n├── public\u002F\\n│   ├── images\u002F\\n│   │   ├── csbyte.png\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"Also, we do have the Nuxt dynamic page routing as below:\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":null},\"content\":[{\"type\":\"text\",\"text\":\"project-root\u002F\\n│\\n├── app\u002F\\n│   ├── pages\u002F\\n│   │   ├── blog\u002F\\n│   │   │   ├── [alias].vue\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"If we try to server-side render (SSR) the logo, then the Nuxt SSR might throw errors like this.\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"bash\"},\"content\":[{\"type\":\"text\",\"text\":\"ERROR  [request error] [fatal] [GET] http:\u002F\u002Flocalhost:3000\u002Fblog\u002Fcsbyte.png \"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"This results in the static assets vs dynamic routing collision. \"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"When using image src as \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"src=\\\"images\u002Fcsbyte.png\\\"\"},{\"type\":\"text\",\"text\":\"  the browser treats it as a relative path. \"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"When loading a blog post at \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"http:\u002F\u002Flocalhost:3000\u002Fblog\u002Fsome-post\"},{\"type\":\"text\",\"text\":\", the browser takes the current URL path (\"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"\u002Fblog\u002F\"},{\"type\":\"text\",\"text\":\") and appends your relative image string to it. This turns the request into:\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":null},\"content\":[{\"type\":\"text\",\"text\":\"http:\u002F\u002Flocalhost:3000\u002Fblog\u002Fimages\u002Fcsbyte.png\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"As we do have a dynamic route \u002Fblog\u002F[alias].vue and try loading the image via SSR, the request error.\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"How to fix it? Let's add a leading slash \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"\u002F\"},{\"type\":\"text\",\"text\":\" in the image source.\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"html\"},\"content\":[{\"type\":\"text\",\"text\":\"\u003Cimg src=\\\"\u002Fimages\u002Fcsbyte.png\\\" \u002F>\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"This will point to the root domain and look inside the image folder. Once adding slash Nitro will catch the request in the static assets layer \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"public\u002Fimages\u002Fcsbyte.png\"},{\"type\":\"text\",\"text\":\" and serve the image.\"}]}]}","\u002Fuploads\u002Fthumbnails\u002F0f4d63d1-8ca4-472f-8f6d-9bd6919a88b9_nuxt_collisio.jpeg",[11,12,13,14],"nuxt","routing","vuejs","ssr",[16],"NuxtJS",[11],"2026-05-16T08:36:46.316Z",[20,27,33,39,45],{"alias":21,"title":22,"description":23,"thumbnail":24,"createdAt":25,"tutorialAlias":26,"lessonAlias":26},"securing-nuxt-ssr-app-with-cookies-sessions","Securing Nuxt SSR Apps with cookies sessions","Nuxt 4 App how to create an authentication system in SSR mode","\u002Fuploads\u002Fthumbnails\u002F6088642b-8dcb-4d13-bb68-f90084ddbe04_nuxt_ssr_logi.jpeg","2026-05-18T14:36:54.441Z",null,{"alias":28,"title":29,"description":30,"thumbnail":31,"createdAt":32,"tutorialAlias":26,"lessonAlias":26},"environment-variables-in-nuxt","The Definitive Guide to Environment Variables in Nuxt 4","How to create Environment Variables in Nuxt 4","https:\u002F\u002Fapi.csbyte.com\u002Fuploads\u002Feditor\u002Fe8a3c4e7-98a6-4114-a8c8-49ebb4a9522f_nuxt_env_cloudflare.png","2026-05-04T12:35:52.854Z",{"alias":34,"title":35,"description":36,"thumbnail":37,"createdAt":38,"tutorialAlias":26,"lessonAlias":26},"configure-nginx-as-reverse-proxy-in-nuxt","Configure Nginx as a reverse proxy in Nuxt application","Deploy and set up the nginx in Nuxt application","\u002Fuploads\u002Fthumbnails\u002F23c9fd84-6a39-40f1-876f-ba81011ccf06_nginx_nux.jpeg","2026-05-03T10:00:48.702Z",{"alias":40,"title":41,"description":42,"thumbnail":43,"createdAt":44,"tutorialAlias":26,"lessonAlias":26},"how-to-deploy-nuxt-app-in-ubuntu-server","How to deploy Nuxt app in Ubuntu Server","Deploy Nuxt App in Linux VM","https:\u002F\u002Fapi.csbyte.com\u002Fuploads\u002Feditor\u002F808571e8-1ce9-4e1b-901f-7afd81f4c7df_pm2.png","2026-05-02T08:11:55.437Z",{"alias":46,"title":47,"description":48,"thumbnail":49,"createdAt":50,"tutorialAlias":26,"lessonAlias":26},"how-to-deploy-our-nuxt-application-to-cloudflare","How to deploy our nuxt application to cloudflare","Deploy our Nuxt application to Cloudflare using Wrangler","https:\u002F\u002Fapi.csbyte.com\u002Fuploads\u002Feditor\u002F19c8ef54-4006-4bfa-a07d-b2dd5e401c22_nuxt_deploy.png","2026-05-02T02:23:45.510Z"]