반응형 Frontend, Client/Nextjs3 [Nextjs] SSR vs CSR CSR의 장점:더 나은 상호작용성: 클라이언트 측에서 UI 갱신이 빠르고 반응적이므로 사용자 상호작용에 대한 응답성이 향상됩니다.자원 효율성: 서버 측에서 렌더링을 처리하지 않으므로 서버 부하가 줄어듭니다.CSR의 단점:검색 엔진 최적화 (SEO) 문제: 초기 페이지 로드 시에는 빈 페이지가 표시되고, 검색 엔진 크롤러가 페이지 콘텐츠를 이해하는 데 어려움이 있을 수 있습니다.초기 로딩 속도: 자바스크립트 파일 다운로드와 실행 시간이 필요하므로 초기 로딩 속도가 SSR에 비해 느릴 수 있습니다. SSR의 장점:SEO 개선: 서버에서 완전한 HTML을 생성하므로 검색 엔진이 페이지 콘텐츠를 쉽게 파악할 수 있습니다.더 빠른 초기 로딩: 완전한 HTML이 서버에서 제공되므로 초기 로딩이 빠릅니다.SSR의 단.. 2024. 7. 20. [Nextjs] Nextjs 13버전 라우팅 방식 알아보기 1. app 디렉토리 app 디렉토리가 라우팅의 핵심이며 하위 디렉토리 이름을 통해 라우팅을 합니다. app 디렉토리가 안보여요! 아직 베타버전이기 때문에 프로젝트 초기 생성시 app 디렉토리가 자동으로 생성되지 않습니다. 대신 이전 버전에 사용했던 pages 폴더가 존재하는데요. 이 pages 폴더를 삭제해주기고 app 디렉토리를 만들어주시면 됩니다. 그리고 app 디렉토리 기능을 켜기 위해 아래와 같이 next.config.js 파일에 다음을 추가합니다. /** @type {import('next').NextConfig} */ const nextConfig = { .. experimental: { appDir: true, }, .. } module.exports = nextConfig 2. 파일 컨벤.. 2023. 4. 25. [Nextjs] Nextjs 13 프로젝트 생성 및 테스트 환경 구성 1. 프로젝트 생성 yarn만 설치되어 있다면, 아래와 같은 명령어로 adam 이름을 가진 nextjs 프로젝트를 쉽게 생성할 수 있습니다. yarn create next-app adam 2. Nextjs의 다양한 테스트 도구들 넥스트는 공식문서에서 다양한 테스트 툴을 소개하고 있습니다. https://nextjs.org/docs/testing Jest Cypress Playwright 빠르게 훑어본 결과 모두 비슷비슷한 느낌이었습니다. 저는 제일 위에 있어서 Jest를 사용하기로 했습니다. Jest: https://jestjs.io/docs/getting-started 3. 테스트를 위한 패키지 설치 jest 설치 yarn add --dev jest scripts 등록 jest를 설치하고 나면 yarn.. 2023. 4. 25. 이전 1 다음 반응형
