짧은코딩

Next는 브라우저에서 기본적으로 pre-rendering(사전 렌더링)을 한다. => pre-rendering은 Server에서 DOM 요소들을 Build 하여 HTML 문서를 렌더링 하는 것을 말한다. SSG SSG는 Static Site Generation 빌드 시 html에 데이터를 미리 담아서 파일을 만들고 접속하는 유저들에게 보여주는 방식 장점 이미 만들어진 html를 여러 사람들에게 보여주는 것 서버 부담이 적고 응답 시간이 빠름 보통 마케팅 페이지, 블로그 글 등 한번 만들고 변화가 적은 페이지에 적합함 단점 데이터가 바뀌면 다시 빌드해줘야 함 동적 컨텐츠를 사용하면 SSG는 좋지 않음 SSR이나 CSR을 사용하면 되는 거 아님? -SSR 서버 부하가 높아짐 -CSR 초기 로딩 느림 seo..

CSR과 SSR CSR CSR은 데이터를 얻기 위해서 요청이 2번 간다. 사용자가 새로고침을 하면 프론트 서버에서 HTML과 JS를 브라우저에 주고 그 이후에 또 요청을 하여 추가적으로 데이터를 불러온다. SSR SSR은 데이터를 얻기 위해 요청이 1번 간다. 서버에서 즉시 렌더링 가능한 html 파일이 만들어져 있기 때문에 바로 렌더링이 된다. 이로 인해 초기 로딩 속도가 빨라진다. 즉, 사용자는 콘텐츠가 빠르게 보이는 느낌을 줄 수 있다. SSR 적용 방법 index.js useEffect(() => { dispatch({ type: LOAD_MY_INFO_REQUEST, }); dispatch({ type: LOAD_POSTS_REQUEST, }); }, []); 처음 시작이 되는 페이지인 inde..

Next.js Next.js는 리액트를 기반으로 만들어진 프레임워크이다. 기능이 더 추가 되었지만 프레임워크다 보니까 자유도는 떨어졌다. 그리고 서버 사이드 렌더링(SSR)을 사용한다. 전통적인 SSR 이런식으로 요청을 한다. 이런 방법도 비교적 간단한 방법이다. -단점 사용자는 방문 할 페이지가 1개인데 다른 페이지도 주면 낭비가 될 수 있다. => 코드 스플리팅을 하면 모든 페이지를 불러오지 않아도 되기 때문에 위에서 말한 단점을 해결할 수 있다. Pre-Rendering 프리 랜더링은 검색 엔진이라는 것을 알아차리고 검색 엔진일때만 백엔드 서버에서 데이터를 받아서 html을 완성해서 준다. 일반 유저에서는 리액트 방식처럼 준다. Sever Side Rendering 첫 방문만 전통적인 방식으로 불러..