SSR 이란?
SSR을 사용하면 모든 데이터가 매핑된 서비스 페이지를 클라이언트(브라우저)에게 바로 보여줄 수 있다. 서버를 이용해서 페이지를 구성하기 때문에 클라이언트에서 구성하는 CSR(client-side rendering)보다 페이지를 구성하는 속도는 늦어지지만 전체적으로 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점은 빨라진다는 장점이 있다. 더불어 SEO(search engine optimization) 또한 쉽게 구성할 수 있다.
출처: The Benefits of Server Side Rendering Over Client Side Rendering
SSR 을 위한 가장 대표적인 라이브러리는 Next. js 이며, 이는 리액트 공식문서에도 명시되어있을 만큼 거의 모든 기능을 지원하는 좋은 프로젝트이다.
그러나 리액트 기본 앱에서도 next.js 의 기능 대부분을 지원할 수는 있다. React-router와 @loadable-component의 조합으로 Server-side-rendering을 지원하는 Code-splitting을 사용할 수 있다.
요즘 프론트 진영에서 많이 사용되는 SSR은 엄밀히말하면 Server-side rendering과 Client-side rendering을 혼합한 방법이다. SPA의 장점을 살리면서도 SEO 최적화를 위한 최초 렌더링을 SSR로 하는 것이 대표적이다. universal rendering 은 최초 렌더링에 필요한 node/ 파일과 CSR 에 필요한 web/ 2가지의 파일이 필요하다. rendering server 는 node/ 를 이용해 markup 을 만들고 web/ 의 파일들을 script 에 주입시켜 클라이언트로 전달하는 express server이다.
Serverside - rendering 을 위해 실제로 신경써야하는 부분은 3가지 이다.
1. @loadable-component 적용.
:React 공식 홈페이지에서 서버사이드 렌더링용 코드 스플리팅으로 추천하는 라이브러리이다. 현재는 next.js 없이 서버사이드 렌더링용 코드 스플리팅 을 구현하는 최선의 방법이다. webpack 설정이 다소 까다롭다.
2. Webpack & babel 설정.
:Server-side-rendering 에서는 Webpack과 babel을 사용해 코드를 node/ , web/ 2종류로 컴파일해야 한다. Webpack으로 여러종류의 Output을 만들어 내는 방식은 Multil-compiler 라고 하는데, Array로 export 해주면 webpack engine이 각각 컴파일해준다.
3. 렌더링 용 express server 구축.
: URL에 맞는 초기 렌더링과 static file, SEO 설정이 어려울 수 있다. 하지만 @loadable-component 와 react-helmet 에서 제공하는 API를 사용하면 손쉽게 처리 가능하다.
출처: https://minoo.medium.com/next-js-%EC%B2%98%EB%9F%BC-server-side-rendering-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0-7608e82a0ab1
https://www.digitalocean.com/community/tutorials/react-server-side-rendering
https://d2.naver.com/helloworld/7804182
