[React] Browser HTTP connetions in Node.js

 

Browser 별로 fetch/Ajax 요청에 대한 Connection 제한이 있다. 이러한 이슈는 SPA 형태의 앱에서 문제를 일으킨다.

(크롬 기준) 최대 6개의 API만 연결이 되기 때문에 10개의 API를 요청했을 때, 6개의 API를 먼저 처리하고 남은 4개의 API를 처리한다.

여기서 문제가 발생하는 부분은 먼저 요청한 6개의 API가 응답이 없을 때, 무작정 Max Time out (정확히 어디서 설정하는지 현재 확인 중/크롬 기준 default 120초로 추정/20.05.14)을 대기한다. 그런 다음, 남은 4개의 API 요청이 처리된다.

 

• IE 7: 2 connections
• IE 8 & 9: 6 connections
• IE 10: 8 connections
• IE 11: 13 connections
• Firefox, Chrome (Mobile and Desktop), Safari (Mobile and Desktop), Opera: 6 connections

 

해결책

이러한 Request Connection Limit 이슈를 해결하기 위해 비동기로 동작하는 Message Queue(ex. kafka..)를 사용할 때, consumer나 producer를 한 다음 반드시 response를 날려줘야 한다.

 

 

해당 이슈에 대한 다른 사람들의 의견이 있는 주소

- medium.com/little-big-programming/%EB%82%B4%EA%B0%80-fetch-api%EB%A5%BC-%EC%93%B0%EC%A7%80-%EB%AA%BB%ED%96%88%EB%8D%98-%EC%9D%B4%EC%9C%A0-3c23f0ec6b82

내가 fetch API를 쓰지 못했던 이유

- https://blog.fullstacktraining.com/concurrent-http-connections-in-node-js/

Concurrent HTTP connections in Node.js