'res.json()'s are different between a backend server and a frontend server

While building web servers(Backend and frontend), I found information that responses between backend and frontend are different. As a backend server a response has information for backend server(Like server, socket, session, header and etc...) but as a frontend server a response has information for the frontend server(like header options, status, and etc...).

At a frontend server fetch loads json file like below:

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => console.log(json))

//answer: Object { userId: 1, id: 1, title: "delectus aut autem", completed: false }

Let me make a browser console response for fetch:

fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(res => console.log(res))

And console logged below:

Response
​
body: ReadableStream { locked: false }
​
bodyUsed: false
​
headers: Headers {  }
​
ok: true
​
redirected: false
​
status: 200
​
statusText: "OK"
​
type: "cors"
​
url: "https://jsonplaceholder.typicode.com/todos/1"
​
<prototype>: ResponsePrototype { clone: clone(), arrayBuffer: arrayBuffer(), blob: blob(), … }

A response has such information on a browser.

On express.js server a response sends JSON like below:

let data = {data : 'example'}
app.get('/home', (req, res) => {
  res.json(data);
//{data : 'example'}
})

Let me make the server console a response:

app.get('/home', (req, res) => {
  console.log(req);
  res.end();
})

And I got long logs like below:

_readableState: ...
...
<ref *2> IncomingMessage {
  _readableState: ReadableState {
    objectMode: false,
    highWaterMark: 16384,
    buffer: BufferList { head: null, tail: null, length: 0 },
    length: 0,
    pipes: [],
    flowing: null,
    ended: false,
    endEmitted: false,
    reading: false,
    sync: true,
    needReadable: false,
    emittedReadable: false,
    readableListening: false,
    resumeScheduled: false,
    errorEmitted: false,
    emitClose: true,
    autoDestroy: false,
    destroyed: false,
    errored: null,
    closed: false,
    closeEmitted: false,
    defaultEncoding: 'utf8',
    awaitDrainWriters: null,
    multiAwaitDrain: false,
    readingMore: true,
    decoder: null,
    encoding: null,
    [Symbol(kPaused)]: null
  },
  _events: [Object: null prototype] { end: [Function: clearRequestTimeout] },
  _eventsCount: 1,
  _maxListeners: undefined,
  socket: <ref *1> Socket {
    connecting: false,
    _hadError: false,
    _parent: null,
    _host: null,
    _readableState: ReadableState {
      objectMode: false,
      highWaterMark: 16384,
      buffer: BufferList { head: null, tail: null, length: 0 },
      length: 0,
      pipes: [],
      flowing: true,
      ended: false,
      endEmitted: false,
      reading: true,
      sync: false,
      needReadable: true,
      emittedReadable: false,
      readableListening: false,
      resumeScheduled: false,
      errorEmitted: false,
      emitClose: false,
      autoDestroy: false,
      destroyed: false,
      errored: null,
      closed: false,
      closeEmitted: false,
      defaultEncoding: 'utf8',
      awaitDrainWriters: null,
      multiAwaitDrain: false,
      readingMore: false,
      decoder: null,
      encoding: null,
      [Symbol(kPaused)]: false
    },
...

A response on a backend server has other messages now like a frontend server.

So res.json() looks same but has a different meaning between a backend server and a frontend server.

For example this fetch doesn't work on a frontend server:

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then((response) => {response.json()})
  .then(json => console.log(json))
//undefined

But this works:

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => console.log(json))

What's different as ES6 code? The first one doesn't return response.json() but the other does return because arrow function automatically returns without bracket. If like this:

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then((response) => {return response.json()})
  .then(json => console.log(json))

//answer: Object { userId: 1, id: 1, title: "delectus aut autem", completed: false }

then it will show the JSON.

But we use res.json() without return on express.js like below:

let data = {data : 'example'}
app.get('/home', (req, res) => {
  res.json(data); //without return
})

So res.json() for a frontend server shouldn't be used as a backend server. For fullstack developers these should be aware as different meanings.