Front-end 기본적인 흐름

Next.js 가 해주는 가장 큰 장점중에 하나가 SSR인 걸 명심하자(Server Side Rendering)

 

 

Front와 Server에서 돌아가는 주체들을 일단 알아보자.

SSR 방식(전통적인 웹사이트)

예를 들어 브라우저에서 프론트 서버로 tistory 블로그를 요청했다 그러면 프론트 서버에서 백엔드 서버로는 블로그의 게시글들을 요청한다. 백엔드 서버는 데이터 베이스에다가 실제 게시글 데이터를 요청한다.

 

그걸 받아서 백엔드 서버는 프론트 서버로 보내주고 프론트 서버에서 데이터와 html을 합쳐서 브라우저로 보내준다.

(왕복 과정을 잘 익혀두자.)

SSR(Server Side Rendering)

CSR 방식

리액트같은 SPA(Single Page Application) 경우 즉 리액트에서 페이지가 넘어가는 과정은 눈속임이라고 생각하면 된다.

페이지가 넘어가는 거 처럼 보이지만 그 내부는 하나의 페이지고 컴포넌트만 바꿔치기를 해서 페이지가 바꿔지는 것처럼 눈속임을 해준다.(CSR)

 

프론트엔드 서버는 블로그를 요청하는 과정이 있거나 어떤 페이지를 요청하는 과정이 있으면 하나의 JS파일 하나의 HTML파일, CSS나 IMG들 이러한 것들만 내려준다. (데이터가 없다 그러면 어떻게 할까?) 브라우저에서는 화면은 그려주는데 데이터가 없으면 프론트엔드 개발과정에서 로딩창을 띄우도록 해줄 수가 있다. 

 

한번 더 브라우저에서 백엔드 서버에다가 게시글들을 달라고 요청을 하고 백엔드 서버는 데이터베이스에서 실제 게시글들 가져와서 받은 다음에 백엔드에서 바로 브라우저로 넘겨준다. 그러면 브라우저에서는 로딩창 없애고 백엔드 서버에서 받았던 데이터를 받아서 화면에다가 그려준다.

(React, Vue, Angular, Svelte같은 SPA에서의 작동원리 )

CSR(Client Side Rendering)

Next.js로 웹을 만들 때 이러한 흐름을 꼭 숙지하고(즉 프론트 서버로 요청을 보내는지 백엔드 서버로 요청을 보내는지 구분하면서) 코딩을 해야한다.

 

 

 

 

 

<출처 조현영: [리뉴얼] React로 NodeBird SNS 만들기>

https://www.inflearn.com/course/%EB%85%B8%EB%93%9C%EB%B2%84%EB%93%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%A6%AC%EB%89%B4%EC%96%BC/dashboard

[리뉴얼] React로 NodeBird SNS 만들기 - 인프런 | 강의