프로그래밍 공부 노트

Next.js에서 styled-components를 작성해도 ssr시 제대로 적용되지 않는 문제가 발생하였다. 이를 해결하기위해서 몇가지 설정이 필요하다. 1. babel 설정 Next.js는 첫 방문한 최초 페이지를 ssr방식으로 렌더링하고 이후에 페이지 내부에서 라우팅을 통해 다른 페이지로 이동하게되면 csr방식을 이용하게 된다. 이때 서버에서 생성하는 해시값과 브라우저에서 생성하는 해시값이 서로 달라서 문제가 발생하게 된다. 이를 해결하기위해서 바벨 플러그인 패키지를 설치한다. $ npm i -D babel-plugin-styled-components 바벨 플러그인을 설치한 뒤 root 디렉토리에  .babelrc 파일을 생성하고 아래 코드를 작성한다. { " presets " : [ " next/babel " ], " plugins " : [ [ " babel-plugin-styled-components " , { " ssr " : true, } ] ] } 공식문서 참고 https://github.com/vercel/next.js/blob/master/examples/with-styled-components/.babelrc 2. _document.js 설정 pages 폴더안에 _document.js 파일을 생성한다.  ssr시에 실행되는 파일인 _documents.js에 styled-compoents의 스타일 코드를 추출하는 로직을 작성한다. 공식문서 참고 https://github.com/vercel/next.js/tree/master/examples/with-styled-components import React from ' react '; import Document , { Html , Head , Main , NextScript } from '

  Next.js는 React의 SSR(Server Side Rendering)을 쉽게 구현할 수 있게 도와주는 프레임워크이다. 과거의 웹사이트들은 대부분 SSR 방식으로 동작해 왔지만 스마트폰이 대중화 되면서 기존의 웹들이  모바일에 최적화 되어있지 않아 사용에 불편함이 생기게 되었다. 그래서 사용자들은 모바일 앱과 같은 형태의 웹페이지가 필요하게 되었는데 이러한 문제를 해결하기 위해서 React, Angular, Vue 등 과 같은 라이브러리, 프레임워크가 생기게 되었고 CSR(Client Side Rendering)이 가능한 SPA가 등장하게 되었다. SPA는 Single Page Application으로 기존의 웹페이지와 다르게 1개의 페이지에서 여러 동작을  수행할 수 있어 모바일 앱과 비슷한 형태로 메뉴바는 고정되어있고 컨텐츠 영역만 계속 변경되는 방식이다. # CSR 과  SSR  비교 둘의 차이점을 확인해보자. 프론트엔드 개발자라면 누구나 한번 들어봤을 React는 CSR 방식을 이용한다. CSR 방식은 화면의 프레임 등을 먼저 렌더링한 뒤 비동기방식으로 데이터를 요청해서 불러와 화면에 데이터를 출력해준다. 이러한 방식을 사용하는 이유는 보통 사용자가 3초이내에 화면이 렌더링 되지 않으면 해당 페이지를 떠난다고 한다.  그렇기 때문에 CSR 렌더링 방식으로 하면 데이터를 불러오기 전 까지 로딩창을 보여주던지 또는 화면의 일부를 보여줌으로서 사용자를 조금이라도 더 해당페이지에 길게 머물수 있도록 도와준다. 반면에 CSR을 사용하면 한번에 모든 데이터를 불러와야하기 때문에 초기 로딩속도가 느릴 수 있다.  또한 검색엔진 최적화에 문제가 발생할 수 있다. 좋은 검색엔진의경우 해당 페이지가 CSR 방식이라는것을  알아 차리고 곧 데이터가 불러와지겠다는것을 판단할 수 있지만 좋지 못한 검색엔진의 경우 해당 페이지가 초반에 로딩 되어있을때 어떠한 데이터도 존재하지 않기 때문에 웹사이트가 검색 순위에서 밀려나는 문제가 발생할 수 있다. 반면에 SSR 방식을