Feat/#44: 비동기 컴포넌트 최적화

[minjeongss]

#️⃣ 연관된 이슈

#44

📝 작업 내용

• 비동기 컴포넌트 로딩 과정에서 Suspense 삭제
  • Suspense는 외부 API 로드를 기다려주지 않음을 확인한 후, 삭제했습니다.
• 비동기 컴포넌트 로딩 과정에서 strategy beforeInteractive 추가
  • strategy 종류 참고한 주소 , strategy 비교 참고한 주소
  • Script 최적화와 관련된 공식 주소

📸 스크린샷

• 기존: strategy 적용 없음

  • session 이후 places가 로드됨을 확인할 수 있습니다.
    

• strategy: afterInteractive 적용 후

  • session 이후 places가 로드됨을 확인할 수 있습니다.
    

• strategy: beforeInteractive 적용 후(선택한 전략입니다 ⚡)

  • session보다 먼저 places가 로드됨을 확인할 수 있습니다.
    

💬 리뷰 요구사항

• 외부 API를 Script 태그를 활용해 로드할 때, 상황에 맞게 strategy를 활용할 수 있습니다!
  • 구글맵 API를 최대한 빠르게 로드하여, 화면이 페인팅되는 동시에 메타 태그를 추출할 준비를 해야 했습니다.
  • 그래서 hydrate되기 전 HTML에 포함하여 로드되는 beforeInteractive 전략을 선택했습니다.

[bluedog129]

를 지우신건 외부 API 로드를 않아서 필요가 없다는 판단에 지우셨고
대신 <Script> 태그에 strategy="beforeInteractive" 속성 추가 해서 API를 최대한 빠르게 로드해서 페이지가 hydrate 되기 전에 스크립트가 준비되게 만들었다... 라고 생각하면 될까요??

근데 제가 궁금한게 있는데

1. 우선 session이 이때 뭔지 잘 모르겠어요... 세션 데이터 요청인가요? 이때 세션에을 통해서 어떤 데이터가 주고 받아지고 있는걸 말하는 걸까요?
2. 왜 세션 보다 더 빨리 place를 로드하려고 했는지 이유를 모르겠어요 ㅜㅜ
   "구글맵 API를 최대한 빠르게 로드하여, 화면이 페인팅되는 동시에 메타 태그를 추출할 준비를 해야 했습니다." 이 부분과 연관이 있으려나요?

[minjeongss]

Suspense를 지우신건 외부 API 로드를 않아서 필요가 없다는 판단에 지우셨고
대신 <Script> 태그에 strategy="beforeInteractive" 속성 추가 해서 API를 최대한 빠르게 로드해서 페이지가 hydrate 되기 전에 스크립트가 준비되게 만들었다... 라고 생각하면 될까요??

• Suspense를 지운 이유
  Suspense의 경우, 데이터 요청이 있을 때 그것을 기다리는 동안 처리하는 기능을 담당하게 됩니다. 컴포넌트가 화면에 노출하기 위해 필요한 데이터가 아직 준비되지 않았다고 알려주는 기능이라고 생각하시면 됩니다.
  이를테면 컴포넌트가 보여주어야 할 데이터가 아직 준비되지 않은 상태라면 로딩 화면을 보여주고, 로딩이 완료되면 해당 컴포넌트를 보여주는 기능을 담당하게 됩니다.
  이때, 데이터 요청을 기다리며 처리하는 것을 위해 Suspense를 사용했는데 Suspense는 외부 API는 기다려 처리하는 기능이 없다고 합니다. 그래서 Suspense는 외부 API(구글맵API) 사용에 영향을 주지 않는다고 판단하여 삭제를 했습니다.

(생략된 부분은 Suspense라고 고려하고 답변드렸습니다! 😀)

• Script 태그에 beforeInteractive 속성을 추가한 이유
  API를 최대한 빠르게 로드해서 페이지가 hydrate 되기 전에 스크립트가 준비되게 만들었다는 표현이 정확합니다! ㅎㅎ

[minjeongss]

우선 session이 이때 뭔지 잘 모르겠어요... 세션 데이터 요청인가요? 이때 세션에을 통해서 어떤 데이터가 주고 받아지고 있는걸 말하는 걸까요?

session은 auth에서 제공하는 session입니다.
이 session의 요청 url은 http://localhost:3000/api/auth/session이라고 확인했습니다.

카카오 로그인/애플 로그인을 완료한 경우, session 요청을 통해 accessToken 등을 받을 수 있습니다.

[minjeongss]

왜 세션 보다 더 빨리 place를 로드하려고 했는지 이유를 모르겠어요 ㅜㅜ
"구글맵 API를 최대한 빠르게 로드하여, 화면이 페인팅되는 동시에 메타 태그를 추출할 준비를 해야 했습니다." 이 부분과 연관이 있으려나요?

session보다 place가 먼저 로드됨을 확인한 이유는

우선 초기 HTML에 구글맵 API Script를 추가하여, 최대한 빠르게 로딩을 시도하고 화면 페인팅이 되는 초반에는 준비가 완료되었음을 확인하고 싶었습니다.
session의 경우, 위에서 언급한 것처럼 auth에서 제공하는 session 정보입니다. 해당 session은 화면 페인팅이 완료된 이후보다 화면 페인팅이 완료되기 전에 준비가 된다고 생각을 했습니다. (이 부분은 추측한 부분이긴합니다. session이 준비되는 순간이 언제인지는 추가적인 조사를 해서 알려드리겠습니다! 😓)

session보다 place.js가 먼저 준비되게 된다면 화면이 모두 그려지는 순간(사용자가 이미지를 넣어 메타 데이터를 추출할 수 있어진 환경) 전에 구글맵 API가 준비가 되었다고 생각할 수 있다고 판단했습니다.
그래서 session보다 place를 빠르게 로드하려고 한 것입니다. 😀 (@bluedog129 )

[bluedog129]

Suspense를 지우신건 외부 API 로드를 않아서 필요가 없다는 판단에 지우셨고
대신 <Script> 태그에 strategy="beforeInteractive" 속성 추가 해서 API를 최대한 빠르게 로드해서 페이지가 hydrate 되기 전에 스크립트가 준비되게 만들었다... 라고 생각하면 될까요??

• Suspense를 지운 이유
  Suspense의 경우, 데이터 요청이 있을 때 그것을 기다리는 동안 처리하는 기능을 담당하게 됩니다. 컴포넌트가 화면에 노출하기 위해 필요한 데이터가 아직 준비되지 않았다고 알려주는 기능이라고 생각하시면 됩니다.
  이를테면 컴포넌트가 보여주어야 할 데이터가 아직 준비되지 않은 상태라면 로딩 화면을 보여주고, 로딩이 완료되면 해당 컴포넌트를 보여주는 기능을 담당하게 됩니다.
  이때, 데이터 요청을 기다리며 처리하는 것을 위해 Suspense를 사용했는데 Suspense는 외부 API는 기다려 처리하는 기능이 없다고 합니다. 그래서 Suspense는 외부 API(구글맵API) 사용에 영향을 주지 않는다고 판단하여 삭제를 했습니다.

(생략된 부분은 Suspense라고 고려하고 답변드렸습니다! 😀)

• Script 태그에 beforeInteractive 속성을 추가한 이유
  API를 최대한 빠르게 로드해서 페이지가 hydrate 되기 전에 스크립트가 준비되게 만들었다는 표현이 정확합니다! ㅎㅎ

오호~ Suspense가 API는 기다려 처리하는 기능이 없는게 문제였군요

[bluedog129]

왜 세션 보다 더 빨리 place를 로드하려고 했는지 이유를 모르겠어요 ㅜㅜ
"구글맵 API를 최대한 빠르게 로드하여, 화면이 페인팅되는 동시에 메타 태그를 추출할 준비를 해야 했습니다." 이 부분과 연관이 있으려나요?

session보다 place가 먼저 로드됨을 확인한 이유는

우선 초기 HTML에 구글맵 API Script를 추가하여, 최대한 빠르게 로딩을 시도하고 화면 페인팅이 되는 초반에는 준비가 완료되었음을 확인하고 싶었습니다. session의 경우, 위에서 언급한 것처럼 auth에서 제공하는 session 정보입니다. 해당 session은 화면 페인팅이 완료된 이후보다 화면 페인팅이 완료되기 전에 준비가 된다고 생각을 했습니다. (이 부분은 추측한 부분이긴합니다. session이 준비되는 순간이 언제인지는 추가적인 조사를 해서 알려드리겠습니다! 😓)

session보다 place.js가 먼저 준비되게 된다면 화면이 모두 그려지는 순간(사용자가 이미지를 넣어 메타 데이터를 추출할 수 있어진 환경) 전에 구글맵 API가 준비가 되었다고 생각할 수 있다고 판단했습니다. 그래서 session보다 place를 빠르게 로드하려고 한 것입니다. 😀 (@bluedog129 )

자세한 설명 감사합니다 ㅎㅎ
많이 찾아보시고 수정하셨네요 굳굳! 👍

[aaahyesu]

정리해준 내용 확인했습니다 ! 저도 "Suspense는 외부 API는 기다려 처리하는 기능이 없다."
이 부분은 몰랐던 터라 지연이 생겨도 그냥 진행했던 건데 민정님 덕에 알 수 있었네요 👍

인게임 부분 지도에서 로드는 크게 못느꼈는데 배포환경이 아니여서 더 못느꼈을 수도 있을 것 같네요.
해당 문제 발생 시에 참고해서 반영해보겠습니다 ! 🫡