서버사이드 렌더링
CSR(Client Side Rendering)
서버에서 HTML을 처리하지 않고, 브라우저의 자바스크립트를 통해 상호작용하여 전달해주는 방식.
장점
- 사이트 상호작용에 있어 활발
- 초기 로딩 후 빠른 웹사이트 렌더링
- 웹애플리케이션에 좋음
- 자바스크립트 라이브러리 활용
단점
- 제대로 구현하지 않을 시 SEO(검색최적화)가 취약
- 초기 로딩에 많은 시간이 걸림
- 대부분 추가적인 라이브러리가 필요
SSR(Server Side Rendering)
서버에 HTML 파일을 저장해두었다가 요청이 발생할 때 모든 파일을 브라우저에 전달하는 방식. SEO, 크롤링에 최적화 되어 있습니다.
장점
- 검색엔진 SEO에 최적화
- 초기 화면 로딩이 빠름
단점
- 잦은 서버 요청
- 전체적으로 느린 페이지 렌더링
- 모든 페이지를 리로딩
- 사이트 상호 작용의 부족
SSR이 필요하다면 Next.js 필요하지 않다면 순수 React를 사용하는 것이 좋습니다.
nodebird는 wrapper로 감싸고 있기때문에, wrapper를 이용해서 개별 페이지들에도 이를 이용해서 SSR을 적용합니다.
getStaticProps, getServerSideProps
Next.js 9.3 버전 미만 버전에서는 SSR(Server Side Rendering), SSG(Static Site Generation)를 적용하기 위해 getInitial Props를 사용했었습니다.
Next.js 9.3 버전 이상에서는 SSR, SSG를 지원하기 위해 getInitialProps를 사용하지 않고, getStaticProps, getServerSideProps, getStaticPaths 메서드가 생겨 이 메서드들을 사용할 것을 권장하고 있습니다.
1. getStaticProps
getStaticProps는 매개변수로 context를 이용하고, context에는 다음의 키를 포함합니다.
- params: 동적 경로를 사용하는 페이지에 대한 경로를 담음. 예를 들어 파일명이 [id].js 인 경우, params → { id: ...} 동적 경로를 사용하기 위해서는 getStaticPaths를 이용해야 합니다.
2. getServerSideProps
getServerSideProps는 서버사이드렌더링 시에 사용하는 메서드입니다. 매개변수로 context를 이용하고, context에는 다음의 키를 포함합니다.
- params: 동적 경로를 사용하는 페이지에 대한 경로를 담음. 예를 들어 파일명이 [id].js 인 경우, params → { id: ...} 동적 경로를 사용하기 위해서는 getStaticPaths를 이용해야 합니다.
- req: HTTP Request 정보를 담음.
- res: HTTP 응답 객체를 담음.
- query: 쿼리 문자열을 담음.
getStaticProps와 getServerSideProps 사용할 때의 차이점
- getStaticProps: 언제 접속해도 데이터가 변하지 않는 공개적인 캐시 데이터를 가져오는 경우
- getServerSideProps: 접속할 때마다 화면이 변해야되는 값들이 존재하는 경우
동적 라우팅(Dynamic Routes)
현재 NodeBird에서 특정 게시글을 공유하고 싶다면 그 게시글의 주소가 있어야 합니다. 또한, 페이지가 로딩될 때마다 화면이 변하기 때문에 getServerSideProps를 이용합니다.
또한, next/router를 이용하여 useRouter를 선언해주고, next의 다이나믹 라우팅은 쿼리파라미터(query parameter)를 이용하기 때문에 params로 post(게시글)의 id를 백엔드로 요청해서 화면에 그려줍니다. 파라미터 값으로 백엔드에 데이터를 전송했기 때문에 req.params 안에 데이터가 전달받습니다.
참조자료
'NodeBird 복습 > 서버사이드렌더링' 카테고리의 다른 글
| react nodeBird 3-2 (SWR, Moment, next 빌드) (0) | 2021.05.31 |
|---|
