\(@^0^@)/
[TIL] 간단한 server와 SSR, SSG Test 본문
server가 없는 개발서버에서는 SSR, SSG의 차이점을 구분하기가 어려우니,
간단한 server를 만들어, 프로덕션 환경에서 둘의 특징과 차이점을 파악해보자.
💥 Server 구축
1. 서버용으로 프로젝트를 하나 생성하여 터미널에 npm install express cors를 설치하여 서버를 구축해주고,
2.
3. data.js 파일을 만들고, json 형식의 데이터 생성.(나의 경우에는 jsonplaceholder의 fake data를 사용했음)
4. 터미널에 node app.js를 입력하여 서버를 작동하고,
5. 브라우저에서 내가 지정한 port 번호 + 주소로 들어가 보면 (나의 경우에는 http://localhost:8080/api/posts )
위와 같이 json 형식으로 data가 받아지는 걸 볼 수 있음.
그리고 sever 쪽의 data를 client 쪽에서 불러올 때
1. SSR일 경우
2. SSG일 경우
3. client 쪽에서 server와 연결하려면, 터미널에 npm run build && npm start 해주면 프로덕션 환경으로 실행된다.
👁🗨 SSR과 SSG의 차이점
1. SSR(Server Side Rendering)
SSR이라면 클라이언트 쪽에서 build 하고 프로덕션 환경을 실행시킨 후에
서버 쪽에서 데이터를 수정하여 node만 재실행하면, 바뀐 데이터가 즉각적으로 반영되어 렌더링 된다.
2. SSG(Static Side Generation)
하지만, SSG는 클라이언트쪽에서 build 하면 파일들을 생성해서 그 안에 모든 데이터들을 저장한다.
따라서, 이미 저장된 파일들을 조회를 해서 렌더 시키는 방식이므로,
서버 쪽에서 데이터를 수정하여 node.js server를 재실행하면, 즉각적으로 반영이 되지 않는다.
그래서 서버에서 데이터를 수정할 경우 새로운 데이터가 아닌, 오래되고 유효하지 않은 데이터를 보내줄 수 있음.
2-1. SSG의 업그레이드
SSG를 사용할 때 revalidate를 추가해주면, 서버에서 수정된 데이터를 지정한 시간 뒤에 (내 경우 20초)
re-generation을 일으켜 새로고침 하면 새로운 데이터를 불러오는 것을 볼 수 있음.
3. 결론
따라서, SSR같이 즉각적으로 데이터가 변화되지 않아도 되는 상황에서는 SSG를 통해서 모든 데이터가 들어가 있는 html을 미리 만들어놓고, 해당 html만 보여준다면 상당히 빠른 렌더링과 구동 속도를 실현할 수 있음.
또한, 설정된 값 (revalidate)을 통해서 새롭게 re-generation을 시켜준다면 데이터 동기화 부분도 챙길 수 있다.
SSG는 build를 할 때마다 페이지가 새롭게 갱신되므로 1. build time과 2. 데이터가 어떻게, 얼마나 보여줘야 하는지를 잘 고려해서 SSR과 SSG를 적재적소에 사용하자.
'TIL' 카테고리의 다른 글
[TIL] window.addEventListener() vs document.addEventListener() (0) | 2022.04.28 |
---|---|
[TIL] json-server를 활용한 페이지네이션 구현시 고려해야할 사항 (0) | 2022.04.15 |
[TIL] SSR, CSR, SSG (feat.Next.js) (0) | 2022.03.15 |
[TIL] 기억해두고 싶은 TS 문법들 (0) | 2022.02.05 |
[TIL] Typescript 쓰는 이유와 설치방법 (0) | 2022.02.04 |