Axios in server side components

[angelzxz1]

Hi! I'm kinda new to next app router and I found something but while searching i couldn't find information about this
Whenever I use axios I can only use it in client side components, however some times I create components that don't require the usage of a hook or something that needs to be used in the client side, so I skip the "use client" but then I use axios and it throws an error, that can be fixed if I add the use client, which is not a problem it self but I'm curious about if it's there a configuration that I need to do in order for axios to work in server side components.

[icyJoseph]

What error do you get? And how are you using axios in use client vs Server Components? Code examples can be helpful to understand each other.

[underground0930]

I get the error too.

Server Component Pages in Next.js 14.1

I get the following error when I do next build with src/app/axios/page.tsx.

Does axios not support the server component of Next.js?

code

## src/app/axios/page.tsx

import axios from 'axios'

const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL
const instance = axios.create({baseURL: BASE_URL})

export default async function Page() {

  console.log("==== axios start ====")
  const res1 = await instance.get('/api/b')
  const res2 = await instance.get('/api/b')

  console.log(res1.data)
  console.log(res2.data)

  return (
    <main className="text-red-500">
      axios
    </main>
  );
}

error

I [Error]: connect ECONNREFUSED ::1:3000
    at I.from (/Users/hoge/Desktop/my-app/.next/server/app/axios/page.js:11:10939)
    at y.<anonymous> (/Users/hoge/Desktop/my-app/.next/server/app/axios/page.js:13:8627)
    at y.emit (node:events:517:28)
    at d.<computed> (/Users/hoge/Desktop/my-app/.next/server/app/axios/page.js:1:16754)
    at ClientRequest.emit (node:events:517:28)
    at Socket.socketErrorListener (node:_http_client:501:9)
    at Socket.emit (node:events:517:28)
    at emitErrorNT (node:internal/streams/destroy:151:8)
    at emitErrorCloseNT (node:internal/streams/destroy:116:3)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
    at au.request (/Users/hoge/Desktop/my-app/.next/server/app/axios/page.js:13:16923)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async av (/Users/hoge/Desktop/my-app/.next/server/app/axios/page.js:13:21719) {
  port: 3000,
  address: '::1',
  syscall: 'connect',
  code: 'ECONNREFUSED',
  errno: -61,
  config: {
    transitional: {
      silentJSONParsing: true,
      forcedJSONParsing: true,
      clarifyTimeoutError: false
    },
    adapter: [ 'xhr', 'http' ],
    transformRequest: [ [Function (anonymous)] ],
    transformResponse: [ [Function (anonymous)] ],
    timeout: 0,
    xsrfCookieName: 'XSRF-TOKEN',
    xsrfHeaderName: 'X-XSRF-TOKEN',
    maxContentLength: -1,
    maxBodyLength: -1,
    env: { FormData: [Function], Blob: [class Blob] },
    validateStatus: [Function: validateStatus],
    headers: Object [AxiosHeaders] {
      Accept: 'application/json, text/plain, */*',
      'Content-Type': undefined,
      'User-Agent': 'axios/1.6.7',
      'Accept-Encoding': 'gzip, compress, deflate, br'
    },
    baseURL: 'http://localhost:3000',
    method: 'get',
    url: '/api/b',
    data: undefined
  },
  request: <ref *1> Writable {
    _writableState: WritableState {
      objectMode: false,
      highWaterMark: 16384,
      finalCalled: false,
      needDrain: false,
      ending: false,
      ended: false,
      finished: false,
      destroyed: false,
      decodeStrings: true,
      defaultEncoding: 'utf8',
      length: 0,
      writing: false,
      corked: 0,
      sync: true,
      bufferProcessing: false,
      onwrite: [Function: bound onwrite],
      writecb: null,
      writelen: 0,
      afterWriteTickInfo: null,
      buffered: [],
      bufferedIndex: 0,
      allBuffers: true,
      allNoop: true,
      pendingcb: 0,
      constructed: true,
      prefinished: false,
      errorEmitted: false,
      emitClose: true,
      autoDestroy: true,
      errored: null,
      closed: false,
      closeEmitted: false,
      [Symbol(kOnFinished)]: []
    },
    _events: [Object: null prototype] {
      response: [Function (anonymous)],
      error: [Function (anonymous)],
      socket: [Function (anonymous)]
    },
    _eventsCount: 3,
    _maxListeners: undefined,
    _options: {
      maxRedirects: 21,
      maxBodyLength: Infinity,
      protocol: 'http:',
      path: '/api/b',
      method: 'GET',
      headers: [Object: null prototype],
      agents: [Object],
      auth: undefined,
      family: undefined,
      beforeRedirect: [Function: e0],
      beforeRedirects: [Object],
      hostname: 'localhost',
      port: '3000',
      agent: undefined,
      nativeProtocols: [Object],
      pathname: '/api/b'
    },
    _ended: true,
    _ending: true,
    _redirectCount: 0,
    _redirects: [],
    _requestBodyLength: 0,
    _requestBodyBuffers: [],
    _onNativeResponse: [Function (anonymous)],
    _currentRequest: ClientRequest {
      _events: [Object: null prototype],
      _eventsCount: 7,
      _maxListeners: undefined,
      outputData: [],
      outputSize: 0,
      writable: true,
      destroyed: true,
      _last: true,
      chunkedEncoding: false,
      shouldKeepAlive: false,
      maxRequestsOnConnectionReached: false,
      _defaultKeepAlive: true,
      useChunkedEncodingByDefault: false,
      sendDate: false,
      _removedConnection: false,
      _removedContLen: false,
      _removedTE: false,
      strictContentLength: false,
      _contentLength: 0,
      _hasBody: true,
      _trailer: '',
      finished: true,
      _headerSent: true,
      _closed: true,
      socket: [Socket],
      _header: 'GET /api/b HTTP/1.1\r\n' +
        'Accept: application/json, text/plain, */*\r\n' +
        'User-Agent: axios/1.6.7\r\n' +
        'Accept-Encoding: gzip, compress, deflate, br\r\n' +
        'Host: localhost:3000\r\n' +
        'Connection: close\r\n' +
        '\r\n',
      _keepAliveTimeout: 0,
      _onPendingData: [Function: nop],
      agent: [Agent],
      socketPath: undefined,
      method: 'GET',
      maxHeaderSize: undefined,
      insecureHTTPParser: undefined,
      joinDuplicateHeaders: undefined,
      path: '/api/b',
      _ended: false,
      res: null,
      aborted: false,
      timeoutCb: null,
      upgradeOrConnect: false,
      parser: null,
      maxHeadersCount: null,
      reusedSocket: false,
      host: 'localhost',
      protocol: 'http:',
      _redirectable: [Circular *1],
      [Symbol(kCapture)]: false,
      [Symbol(kBytesWritten)]: 0,
      [Symbol(kNeedDrain)]: false,
      [Symbol(corked)]: 0,
      [Symbol(kOutHeaders)]: [Object: null prototype],
      [Symbol(errored)]: null,
      [Symbol(kHighWaterMark)]: 16384,
      [Symbol(kRejectNonStandardBodyWrites)]: false,
      [Symbol(kUniqueHeaders)]: null
    },
    _currentUrl: 'http://localhost:3000/api/b',
    [Symbol(kCapture)]: false
  },
  cause: Error: connect ECONNREFUSED ::1:3000
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1555:16)
      at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
    errno: -61,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '::1',
    port: 3000
  }
}
I [Error]: connect ECONNREFUSED ::1:3000
    at I.from (/Users/hoge/Desktop/my-app/.next/server/app/axios/page.js:11:10939)
    at y.<anonymous> (/Users/hoge/Desktop/my-app/.next/server/app/axios/page.js:13:8627)
    at y.emit (node:events:517:28)
    at d.<computed> (/Users/hoge/Desktop/my-app/.next/server/app/axios/page.js:1:16754)
    at ClientRequest.emit (node:events:517:28)
    at Socket.socketErrorListener (node:_http_client:501:9)
    at Socket.emit (node:events:517:28)
    at emitErrorNT (node:internal/streams/destroy:151:8)
    at emitErrorCloseNT (node:internal/streams/destroy:116:3)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
    at au.request (/Users/hoge/Desktop/my-app/.next/server/app/axios/page.js:13:16923)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async av (/Users/hoge/Desktop/my-app/.next/server/app/axios/page.js:13:21719) {
  port: 3000,
  address: '::1',
  syscall: 'connect',
  code: 'ECONNREFUSED',
  errno: -61,
  config: {
    transitional: {
      silentJSONParsing: true,
      forcedJSONParsing: true,
      clarifyTimeoutError: false
    },
    adapter: [ 'xhr', 'http' ],
    transformRequest: [ [Function (anonymous)] ],
    transformResponse: [ [Function (anonymous)] ],
    timeout: 0,
    xsrfCookieName: 'XSRF-TOKEN',
    xsrfHeaderName: 'X-XSRF-TOKEN',
    maxContentLength: -1,
    maxBodyLength: -1,
    env: { FormData: [Function], Blob: [class Blob] },
    validateStatus: [Function: validateStatus],
    headers: Object [AxiosHeaders] {
      Accept: 'application/json, text/plain, */*',
      'Content-Type': undefined,
      'User-Agent': 'axios/1.6.7',
      'Accept-Encoding': 'gzip, compress, deflate, br'
    },
    baseURL: 'http://localhost:3000',
    method: 'get',
    url: '/api/b',
    data: undefined
  },
  request: <ref *1> Writable {
    _writableState: WritableState {
      objectMode: false,
      highWaterMark: 16384,
      finalCalled: false,
      needDrain: false,
      ending: false,
      ended: false,
      finished: false,
      destroyed: false,
      decodeStrings: true,
      defaultEncoding: 'utf8',
      length: 0,
      writing: false,
      corked: 0,
      sync: true,
      bufferProcessing: false,
      onwrite: [Function: bound onwrite],
      writecb: null,
      writelen: 0,
      afterWriteTickInfo: null,
      buffered: [],
      bufferedIndex: 0,
      allBuffers: true,
      allNoop: true,
      pendingcb: 0,
      constructed: true,
      prefinished: false,
      errorEmitted: false,
      emitClose: true,
      autoDestroy: true,
      errored: null,
      closed: false,
      closeEmitted: false,
      [Symbol(kOnFinished)]: []
    },
    _events: [Object: null prototype] {
      response: [Function (anonymous)],
      error: [Function (anonymous)],
      socket: [Function (anonymous)]
    },
    _eventsCount: 3,
    _maxListeners: undefined,
    _options: {
      maxRedirects: 21,
      maxBodyLength: Infinity,
      protocol: 'http:',
      path: '/api/b',
      method: 'GET',
      headers: [Object: null prototype],
      agents: [Object],
      auth: undefined,
      family: undefined,
      beforeRedirect: [Function: e0],
      beforeRedirects: [Object],
      hostname: 'localhost',
      port: '3000',
      agent: undefined,
      nativeProtocols: [Object],
      pathname: '/api/b'
    },
    _ended: true,
    _ending: true,
    _redirectCount: 0,
    _redirects: [],
    _requestBodyLength: 0,
    _requestBodyBuffers: [],
    _onNativeResponse: [Function (anonymous)],
    _currentRequest: ClientRequest {
      _events: [Object: null prototype],
      _eventsCount: 7,
      _maxListeners: undefined,
      outputData: [],
      outputSize: 0,
      writable: true,
      destroyed: true,
      _last: true,
      chunkedEncoding: false,
      shouldKeepAlive: false,
      maxRequestsOnConnectionReached: false,
      _defaultKeepAlive: true,
      useChunkedEncodingByDefault: false,
      sendDate: false,
      _removedConnection: false,
      _removedContLen: false,
      _removedTE: false,
      strictContentLength: false,
      _contentLength: 0,
      _hasBody: true,
      _trailer: '',
      finished: true,
      _headerSent: true,
      _closed: true,
      socket: [Socket],
      _header: 'GET /api/b HTTP/1.1\r\n' +
        'Accept: application/json, text/plain, */*\r\n' +
        'User-Agent: axios/1.6.7\r\n' +
        'Accept-Encoding: gzip, compress, deflate, br\r\n' +
        'Host: localhost:3000\r\n' +
        'Connection: close\r\n' +
        '\r\n',
      _keepAliveTimeout: 0,
      _onPendingData: [Function: nop],
      agent: [Agent],
      socketPath: undefined,
      method: 'GET',
      maxHeaderSize: undefined,
      insecureHTTPParser: undefined,
      joinDuplicateHeaders: undefined,
      path: '/api/b',
      _ended: false,
      res: null,
      aborted: false,
      timeoutCb: null,
      upgradeOrConnect: false,
      parser: null,
      maxHeadersCount: null,
      reusedSocket: false,
      host: 'localhost',
      protocol: 'http:',
      _redirectable: [Circular *1],
      [Symbol(kCapture)]: false,
      [Symbol(kBytesWritten)]: 0,
      [Symbol(kNeedDrain)]: false,
      [Symbol(corked)]: 0,
      [Symbol(kOutHeaders)]: [Object: null prototype],
      [Symbol(errored)]: null,
      [Symbol(kHighWaterMark)]: 16384,
      [Symbol(kRejectNonStandardBodyWrites)]: false,
      [Symbol(kUniqueHeaders)]: null
    },
    _currentUrl: 'http://localhost:3000/api/b',
    [Symbol(kCapture)]: false
  },
  cause: Error: connect ECONNREFUSED ::1:3000
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1555:16)
      at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
    errno: -61,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '::1',
    port: 3000
  }
}

Error occurred prerendering page "/axios". Read more: https://nextjs.org/docs/messages/prerender-error

Error: connect ECONNREFUSED ::1:3000
    at I.from (/Users/hoge/Desktop/my-app/.next/server/app/axios/page.js:11:10939)
    at y.<anonymous> (/Users/hoge/Desktop/my-app/.next/server/app/axios/page.js:13:8627)
    at y.emit (node:events:517:28)
    at d.<computed> (/Users/hoge/Desktop/my-app/.next/server/app/axios/page.js:1:16754)
    at ClientRequest.emit (node:events:517:28)
    at Socket.socketErrorListener (node:_http_client:501:9)
    at Socket.emit (node:events:517:28)
    at emitErrorNT (node:internal/streams/destroy:151:8)
    at emitErrorCloseNT (node:internal/streams/destroy:116:3)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
    at au.request (/Users/hoge/Desktop/my-app/.next/server/app/axios/page.js:13:16923)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async av (/Users/hoge/Desktop/my-app/.next/server/app/axios/page.js:13:21719)
 ✓ Generating static pages (9/9) 

> Export encountered errors on following paths:
        /axios/page: /axios

[icyJoseph]

Hi,

This is a different kind of error. ECONNREFUSED, means that there's nothing listening for the request.

This is a very well known issue, mostly created by tech-influencers, and AI generated content.

The Next.js community has written a precise explanation and set of steps to fix this problem, here:

• https://nextjs-faq.com/fetch-api-in-rsc
• And for Pages Router: https://nextjs-faq.com/fetch-api-in-getserversideprops

The examples use fetch, but the same applies to axios

The short explanation is that you, perhaps thinking that you have made your code modular, or DRY, but that's not correct. You've created an extra HTTP round trip requirement, which defeats the entire purpose of having code running in the server, not only in Server Components, but as far back as Pages Router.

During Dev Mode, Next.js executes your api handlers, for development purposes, and you are able to work normally. However, during build time, there's no server running, rather Next.js is simply compiling all of your files, and generated HTML for pre-rendered pages, and that's where it hits a network request to :3000, which has no listener, because again, there's no server.

There are ways to get around this, but it is requires careful planning, and it is just plain wrong anyway. In the worst case scenario, for every request that arrives to your server, you'd firing a request back to the internet, and back to your server again. The whole point of Server Components, is that you can do the work you need to do, directly on the component, no need to reach for your own API routes.

Also, API routes, are publicly available, and you probably don't even want that to begin with.

So please follow the guide above, and get the data from the source, directly within your Server Component.

[underground0930]

@icyJoseph

Thank you for your detailed explanation！
Thanks for the reference link as well.

https://nextjs-faq.com/fetch-api-in-rsc

*Why does it require absolute URLs?*

fetch in client-side does not require absolute URLs, 
because the browser knows the URL of the current page and hence can understand what host/domain to use. 
But, in server components, the fetch is run on the server, which is like running a fetch from a Node.js script inside your own computer. 
It doesn't know what host/domain to use (you don't know the domain of your computer do you?), so you have to specify it explicitly.

*Why does it not work during build? Why does it work in dev mode?*

It requires the server to be running at (in the example above) localhost:3000. That is fulfilled during development mode and during runtime (next start), so the fetch works fine there. But during build, the server is not running, so the fetch fails.

These were exactly the answers I was looking for!

😊😊😊

[underground0930]

Also, API routes, are publicly available, and you probably don't even want that to begin with.
So please follow the guide above, and get the data from the source, directly within your Server Component.

Yes, sir!

https://www.youtube.com/watch?v=RBM03RihZVs

I will study this video.