SSR (4) 썸네일형 리스트형 [Web] SSG, ISR의 개념과 차이점 1. SSG SSG는 Static Site Generation의 약자로, 정적인 웹사이트를 만들 때 사용한다. SSR과 똑같이 서버에서 렌더링 하지만 렌더링 되는 시기가 SSR과 다르다. SSG는 서버에 배포한 후, 빌드할 때 렌더링(html 코드로 변환됨)된다. 실제 html 파일들은 빌드할 때 미리 만들어 둔다고 생각하면 된다. 1) SSG Rendering 방식 서버에 배포 한 후 빌드시 렌더링이 일어나면서 html 파일이 생성된다. 이후 사용자가 홈페이지에 접속하면, 클라이언트가 서버에 요청을 보내고 서버는 만들어준 html 파일을 보내준다. 클라이언트는 받은 데이터를 통해 html을 표기해 준다. 2) 장점 ① 페이지 로딩 시간(Time To View)이 짧다 ② 자바스크립트 필요 없음 ③ SE.. [Web] CSR, SSR의 개념과 차이점 렌더링 방식에는 CSR, SSR, SSG, ISR처럼 다양한 방법이 존재한다. 어떻게 렌더링하냐에 따라 웹 사이트의 성능이 달라지기 때문에 각 사이트에 맞는 렌더링 방식을 사용해야 한다. 따라서 이번엔 각 렌더링 방식의 개념과 차이점에 대해 알아보려 한다. 우선 CSR과 SSR에 대해서 알아보자. 브라우저 엔진은 html 구문을 해석해 DOM tree를 수정하고, CSSOM 스타일링 객체를 구성한다. 그리고 여러 과정을 통해 화면에 코드를 그려낸다. 이때 html 구문을 서버와 클라이언트 중 누가 가져오냐에 따라 CSR과 SSR이 나눠진다. 말 그대로 어느 Side에서 렌더링을 하냐에 따라 나뉜다고 생각하면 된다. 1. CSR CSR은 Client Side Rendering의 약자로, 렌더링의 주체자가 .. [Error] nextjs localStorage is not defined error (feat. window is undefined error) localStorage is not defined sessionStorage is not defined nextjs 에서 localStorage, sessionStorage 를 이용해서 로그인 로그아웃을 구현하려는데 localStorage is not defined error 가 발생했다 페이지라 클라이언트에 로드되지 않았는데, localstorage에 접근했기 때문에 발생한 에러였다. localstorage, sessionStorage는 window 안에 있는 메서드이다. window는 브라우저 전역 객체로 서버에서는 사용할 수가 없다. next.js의 경우 ssr, 즉 서버가 먼저 정의된 후 클라이언트가 정의되기 때문에 에러가 발생한다. typeof window !== 'undefined' 따.. [Next] Next.js 란? SSR, CSR 1. Next.js Next.js 는 리액트(react)로 만드는 서버 사이드 렌더링(SSR, Server Side Rendering) 프레임워크이다. 서버 사이드 렌더링(SSR)은 말 그대로 서버에서 자바스크립트를 렌더링 하는 것을 의미한다. 리액트의 경우 클라이언트 사이드 렌더링(CSR, Client Side Rendering)이기 때문에 자바스크립트를 클라이언트에서 로드한다. 즉, 사용자가 웹사이트를 요청하면 우선 빈 html을 가져오고 스크립트를 로딩한다. 따라서 자바스크립트가 모두 로드될 때까지 기다려야만 웹을 볼 수 있기 때문에 첫 로딩 시간이 오래 걸리고, 검색 엔진 최적화(SEO, Search Engine Optimization)에 취약하다. 반면, 서버 사이드 렌더링(SSR)의 경우 서버.. 이전 1 다음
