개발자.. 너란놈..

※ CSR (Client Side Rendering)

- 초기에 빈 HTML 파일을 가져오고 화면에 출력 될 모든 정보데이터를 Chunk단위로 구성된 파일을 모두 가져옴

장점 : 같은 페이지 안에서 서로 다른 컨텐츠를 실시간으로 변경 하면서 출력 하므로 동적인 컨텐츠 화면 변경이 자유롭고 페이지간 로딩이 없음 (사용성좋음)
단점 : 한번에 모든 데이터를 불러와야 되기 때문에 초기 로딩속도가 SSR 방식에 비해선 느림, 검색엔진에 비 최적화

※ SSG (Static-Site-Generation)

- Next프로젝트를 빌드시 pre-render

장점 : 미리빌드 시점에 페이지가 완성되기 때문에 초기 로딩속도가 빠름
단점 : 요청 전에 미리 프리렌더되기 때문에 정적인 페이지만 적용 가능 

※ SSR (Server Side Randering)

- 서버에 요청이 들어오면 서버단에서 data-fetching후 pre-render

장점 : CSR방식에 비해서는 초기로딩속도가 빠르고 요청시마다 새로운 데이터 갱신 가능
단점 : 서버 호출시에 pre-render 되기 때문에 SSG 방식보다는 느림

※ ISR (Incremental Static Regeneration)

- Next 프로젝트 빌드 시 pre-render

장점 
1) SSG와 마찬가지로 빌드시에 미리 페이지가 만들어지기 때문에 초기로딩속도가 빠름
2) 일정시간마다 새롭게 갠신된 데이터로 정기적으로 revalidation 처리

단점
초기에 이동할 떄만 조금 시간이 걸린다. (기존에 있는 SSR보다는 빠름)

※ Pre Rendering (Next.js 작업방식)

    - Next는 초기에 서버단에서 미리 만들어진 page 폴더 안쪽에 있는 정적인 컨텐츠를 html로 미리 Randering 상태에서 초기 로딩 처리 (SEO에 좋음)
    - 이후에 동적으로 데이터 연동을 위한 리액트 컴포넌트가 로드 완료 되면 Static한 페이지에 해당 내용을 결합 (Hydration)
    - 기존에 리액트는 초기에 모든 서브페이지에 해당하는 파일들을 모두 가져온 다음에 Randering하기 때문에 초기 로딩속도가 늦음 
    - 초기 메인 페이지만 pre-render된 상태로 가져오고 서브페이지에 해당하는 파일들은 json 형태로만 미리 로드 시켜서 초기에 로드시켜야되는 파일의 갯수와 용량을 줄임
    - 다른페이지의 데이터 구분 next 전용의 Link 컴포넌트에 연결되어 있는 라우터명을 통해서 json 형태로 데이터만 미리 로드

※ SSG (Static-Site-Generation)

- Next프로젝트를 빌드시 pre-render
    장점 : 미리빌드 시점에 페이지가 완성되기 때문에 초기 로딩속도가 빠름
    단점 : 요청 전에 미리 프리렌더되기 때문에 정적인 페이지만 적용 가능 

※ SSR (Server Side Randering)

- 서버에 요청이 들어오면 서버단에서 data-fetching후 pre-render
    장점 : CSR방식에 비해서는 초기로딩속도가 빠르고 요청시마다 새로운 데이터 갱신 가능
    단점 : 서버 호출시에 pre-render 되기 때문에 SSG 방식보다는 느림

※ ISR (Incremental Static Regeneration)

- Next 프로젝트 빌드 시 pre-render
    장점 
        1) SSG와 마찬가지로 빌드시에 미리 페이지가 만들어지기 때문에 초기로딩속도가 빠름
        2) 일정시간마다 새롭게 갠신된 데이터로 정기적으로 revalidation 처리

    단점
        1) 초기에 이동할 떄만 조금 시간이 걸린다. (기존에 있는 SSR보다는 빠름)

※ 기존의 CSR , SSR 방식 차이

   SSR 작업 흐름

     1. 정적인 HTML 파일을 서버로부터 가져옴
     2. 추후 동적 데이터가 필요할때마다 다시 서버쪽에 요청해서 전체 화면을 full load (화면 깜빡임)
     3. 이후 ajax라는 비동기 서버 통신 기술이 생기면서 전체 화면을 다시 full load 하지 않고 필요한 데이터만 실시간으로 다시 호출 가능
     4. 비동기 데이터를 이용해 자바스크립트로 일일이 동적 DOM을 생성하고 관리해야되는 번거로움이 생김

  CSR 작업 흐름

     1. 빈 HTML파일을 서버로부터 가져옴
     2. 자바스크립트 파일로드 (React)
     3. 리액트 컴포넌트 로드 (Data fetching)
     4. 컴포넌트 해석 후 랜더링 시작
     5. 최종화면에 동적 DOM 생성 (이전 단계까지는 빈 화면 렌더링)

※ React 18 버전에서의 SSR 작업 흐름

   1. 서버쪽에서 미리 static 프리랜더링 된 html파일 로드
   2. 미리 렌더링 된 정적인 화면을 바로 생성 (정적 화면 생성)
   3. 자바스크립트 파일 로드
   4. 동적데이터를 다루는 리액트 컴포넌트 해석
   5. 기존 정적인 화면에 동적으로 연동될 부분만 대체 (hydration) Suspense 활용

SSR - Server Side Rendering

페이지 이동시 마다 일일이 서버 쪽에 출력할 HTML 파일을 요청
장점) 
1. 초기로딩 속도 빠름
2. 검색엔진에 최적화 (SEO에 좋음)

단점)
1. 페이지 이동 시 마다 서버 쪽 요청을 해야 되기 때문에 깜빡거리면서 로딩이 되는 사용성이 안좋은 점이 있음.

CSR - Client Side Rendering (SPA - Single page Application)

초기에 빈 HTML 파일을 가져오고 화면에 출력 될 모든 정보데이터를 Chunk단위로 구성된 JavaScript 파일을 모두 가져옴
장점)
1. 같은 페이지 안에서 서로 다른 컨텐츠를 실시간으로 변경 하면서 출력 하므로 동적인 컨텐츠 화면 변경이 자유롭고 페이지간 로딩이 없음 (사용성좋음)

단점)
1. 한번에 모든 데이터를 불러와야 되기 때문에 초기 로딩속도가 SSR 방식에 비해선 느림, 검색엔진에 비 최적화