브라우저 동작 과정에 대한 질문입니다.

Question

브라우저가 프론트서버에서 index.html을 요청하고 Index.html을 받은뒤 브라우저에서 html을 파싱하다가 script 태그를 만나면 해당 자바스크립트를 서버에 다시 요청해서 받아서 다운로드 받는것으로 알고있습니다. 강의에서 ssr 일 시에 html 과 데이터를 같이 받아온다고 하셔서 이해했었던 개념들과 같이 정리를 해보았는데 1. index.html요청 2. index.html을 브라우저에서 파싱(돔생성) 3. html 파싱하다가 script 태그를 만나면 javascript 를 서버에 요청 및 실행 4. script의 defer을 이용하여 html 파싱 이후 실행되게 만듬. 화면은 html을 뿌리고 있고 javascript가 다운로드가 완료되지 않았다면 인터렉션 효과는 잠시동안 발생되지 않을 수 있음. 5. javascript 실행 중에 비동기 data fetch 로직이 있으면 그때 프론트서버가 백엔드서버에 데이터 요청 및 응답을 받음.(브라우저가 백엔드서버에 데이터 요청을 하는지 헷갈립니다..) 6. data 를 받아와서 ... ?  6번에서 막히게 됩니다. index.html + data를 같이 받아와서 화면에 뿌려준다고 하셨는데 이해했었던 개념들이랑 충돌이나서 고민하고있습니다.. index.html에 데이터를 출력해줘야되는 영역이 있다면 바로 화면에 출력해주는 것이 아니라 data를 다 받아온뒤 index.html에 같이 뿌려주는 것인가요?

제로초(조현영) · Answer

1. GET /로 요청을 보낼 때 프론트서버에서 pages/index.js를 읽습니다. 그리고 거기서 wrapper.getServerSideProps를 발견하면 그걸 실행하고, 그 때 백엔드서버로 axios 요청이 가게 됩니다. 그 데이터를 받아와 index.js의 리액트 부분을 렌더링하면서 데이터도 같이 넣어주는 겁니다. 2. wrapper.getServerSideProps, wrapper.getStaticProps 등이 해당됩니다. 3번은 이 강좌랑 상관이 없습니다. 왜냐하면 저건 일반적인 스크립트이기 때문이죠. 일반적인 html처럼 실행됩니다. 프론트서버로부터 응답을 받은 후 script를 파싱하여 저 부분이 실행됩니다. 반면에 next.js에서는 wrapper.getServerSideProps가 프론트 서버에서 먼저 실행됩니다. 그 후 응답 데이터와 react 부분이 합쳐져서 응답으로 보내집니다.

제로초(조현영) · Answer

SSR에서는 4 5번 과정이 1~2번 사이에 일어납니다. 1. 특정 페이지 요청(index.html처럼 html을 요청하는 게 아닙니다. 페이지랑 html은 다른 개념입니다) 2. 프론트서버에서 특정 페이지에 들어있는 데이터 요청 파악 후 백엔드서버로 요청 보내서 받아옴 3. 받아온 데이터와 페이지 화면을 합쳐 index.html로 만들어서 프론트 전송 4. index.html을 브라우저에서 파싱(돔생성) 5. html 파싱하다가 script 태그를 만나면 javascript 를 실행 ...

열씨미살자! · Answer

어느정도 이해가 간 것 같습니다. 답변 감사합니다!

열씨미살자! · Answer

잘 이해가 가지 않습니다.. 일단 계속 뒷부분 강의를 듣고있지만 앞에서 헤매고있습니다ㅠㅠ 1. index.html처럼 html을 요청하는 것이 아니라는 것. 즉 우리가 처음에 사이트에 접속하게 되면 자동으로 / 이 라우트로 접속하게 되는데 프론트서버단에서 코드로 res.get('/', index.html을 반환하는 로직)을 짜게되듯이 / 라는 페이지요청을 하면 / 에 맞는 .html 파일을 반환해준다는 건가요? 2. 프론트서버에서 특정 페이지에 들어있는 데이터 요청 파악 후 <- 이 말의 의미가 무엇일까요? ... 이부분에 대한 데이터 요청 로직은 프론트서버 로직에 있는건가요 ? 제가 지금 헷갈리는 것이 index.html에 포함되어져있는 javascript 파일에 들어가는 fetch로직이랑 헷갈려하는것같습니다. 3. 예를 들어 밑의 코드처럼 아주 간단한 코드가 있다고 한다면 브라우저 동작과정이 어떻게 되는건지 한번만 설명 가능하실까요? < html lang =" en "> < head > < meta charset =" UTF-8 "> < meta name =" viewport " content =" width=device-width, initial-scale=1.0 "> < title > Document < body > < div id =" app "> < script > const app = document . querySelector ( ' #app ' ) fetch ( ' https://api.github.com/repos/javascript-tutorial/ko.javascript.info/commits ' ) . then ( ( res ) => res . json ()) . then ( ( json ) => app . innerHTML = JSON . stringify (json))