반응형 SSR3 NextJs - 2편: NextJs 버젼 12에서 13으로 넘어오면서 2편: NextJs 버전 12에서 13으로 넘어오면서 NextJs는 12 버젼에서 13으로 넘어오면서 사용방법이 바뀔 정도로 많은 변화가 있었습니다. 당연히 최신 버전인 13을 바로 사용해도 되지만 아직도 많은 프로젝트가 12 버전을 쓰고 있으며 유지보수를 위해서라도 13 버전 이전의 NextJs 사용 방법을 알고 가는 것이 맞다고 생각합니다. 아직 13버전의 Appdir와 같은 기능들이 공식 Docs에서 공식적으로 스테이블 단계에 들어갔다고 발표한 것도 몇 달이 채 되지 않았으며 12과 13의 차이점을 알고서 개발에 임하는 것이 매우 중요할 거 같아 이렇게 2편에 12과 13 버전의 차이점과 사용방법을 기록하고자 합니다. 우선 1편을 보고 읽는 것을 추천드립니다. 기본 이론 개념들이 많이 스킵됩니다. .. 2023. 9. 11. NextJs - 1편: NextJs 시작을 위한 기본 이론 그리고 프로젝트 생성하기 1편: NextJs 시작을 위한 기본 이론 그리고 프로젝트 생성하기 NextJS는 ReactJs의 몇몇 한계점을 극복한 프레임워크라고 말할수 있습니다. ReactJs의 기반에서 더 좋은 SEO(검색 엔진 최적화), SSR을 통한 효율적으로 최적화된 랜더링 속도와 비용 절감 등등이 추가되었습니다. 하지만 그만큼 ReactJs에 비해 NextJs의 러닝커브가 올라갔다고 할 수도 있습니다. 그래서 NextJs에 대한 기본적인 이론과 알아야할점들을 기록하고자 합니다. ReactJs에 대한 개념이 우선적으로 알고나서 이 글을 보시면 NexJs에 대하여 더 디테일 하게 이해하는데 좋을거 같습니다. CSR과 SSR CSR과 SSR을 크게 두 가지로 비교할 수 있습니다. 1. 초기 화면 랜더링 방법. 2. 그 이후 페.. 2023. 9. 8. 서버 사이드 랜더링(SSR)과 클라이언트 사이드 랜더링(SPA) 클라이언트 사이드 랜더링(CSR) 클라이언트 사이드 랜더링(CSR)는 최초 한 번 페이지 전체를 로딩한 후 데이터만 변경하여 사용할 수 있는 애플리케이션을 의미합니다. 클라이언트 사이드 랜더링(CSR)은 사용자의 행동에 따라 필요한 부분만 다시 읽어들이기 때문에 서버 측에서 렌더링하여 전체 페이지를 다시 읽어들이는 것보다 빠른 인터렉션을 기대할 수 있습니다. 서버는 단지 JSON파일만 보내주고, html을 그리는 역할은 자바스크립트를 통해 클라이언트 측에서 수행할 수 있습니다. 뷰 렌더링을 유저의 브라우저가 담당하도록 하고, 먼저 웹앱을 브라우저에 로드 한 다음에 정말 필요한 데이터만 전달받아 보여주는 클라이언트사이드렌더링은 트래픽을 감소시키고, 사용자에게 더 나은 경험을 제공합니다. - 장점 트래픽감소.. 2022. 4. 23. 이전 1 다음 반응형
