Dug_House

어떤 것이 궁금한지 Server Side Rendering(SSR) 페이지에서도 lazy loading이 필요할까? 왜 궁금한지 SSR은 서버에서 HTML을 생성하여 클라이언트로 보내기 때문에 초기 렌더링 속도가 빠를 것 같은데, lazy loading으로 한 번 더 최적화할 필요가 있는지 의문이 생김. lazy loading이란? 최초에 모든 모듈을 가져오지 않고, 필요한 경우에만 클라이언트(브라우저)에서 모듈을 로드하여 네트워크 트래픽을 줄이고 초기 렌더링 속도를 향상시키는 기술. 필요한 상황 페이지 크기 최적화: 서버에서 클라이언트로 전송하는 HTML의 크기를 줄이고, 필요한 리소스만 브라우저에서 로드하여 초기 렌더링 속도를 더욱 향상. ..

어떤 것이 궁금한지모든 컴포넌트를 lazy loading한다면 어떤 결과가 나올까?왜 궁금한지 React로 개발 시 어차피 클라이언트에서 렌더링이 이루어져 SEO가 중요하지 않다면, 초기 로딩 속도를 더 빠르게 하기 위해 모든 컴포넌트를 lazy loading해도 괜찮지 않을까 궁금하다. lazy loading이란? 필요한 모듈만 동적으로 로드하여 초기 로딩 속도를 개선하고 네트워크 트래픽을 줄이며, 사용자 경험을 향상시키는 방법입니다. 초기 렌더링 시 모든 모듈을 가져오지 않고, 실제로 필요한 순간에만 로드합니다.장점 초기 로딩 시간 감소: 초기 로딩 시 필요한 최소한의 리소스만 로드하여 초기 렌더링 속도를 개선. 네트워크 효율성: 사용자가 필요한 컴포넌트만 로드하므로 네트워크 ..

어떤 것이 궁금한지 Next.js에서 미들웨어를 사용하여 서버 측에서 페이지 접근을 막는 것이 좋을지, 클라이언트 컴포넌트를 사용하여 클라이언트 측에서 페이지 접근을 막는 것이 좋을지 고민된다. 왜 궁금한지 (상황) 서버와 클라이언트 모두 구현 가능하지만, 최선의 방법을 선택하기 위해 각 접근 방식의 장단점을 비교하고 싶다. 미들웨어 사용 장점 보안 강화: 서버에서 직접 관리하므로 클라이언트가 우회하기 어렵다. 중앙 집중 관리: 모든 접근 제어 로직을 한곳에서 관리할 수 있어 유지보수와 일관성이 용이하다. 단점 복잡성 증가: 미들웨어 설정 및 관리가 까다로울 수 있다. 서버 부하: 모든 요청에 대해 미들웨어가 실행되어 서버..

1. rewrite정의: URL을 내부적으로 변경하여 다른 리소스에 요청을 전달합니다. 사용자에게는 변경된 URL이 보이지 않습니다.용도: SEO 최적화, URL 구조 개선 등을 위해 사용됩니다.예시:요청 URL: /old-page내부적으로: /new-page사용자에게는 여전히 /old-page로 보입니다.2. redirect정의: 클라이언트에게 새로운 URL로 이동하라는 응답을 보냅니다. 이 경우, 브라우저의 주소창도 변경됩니다.용도: 페이지 이동, 사이트 구조 변경 시 사용자 안내 등을 위해 사용됩니다.예시:요청 URL: /old-page응답: 301 Moved Permanently → /new-page브라우저 주소창이 /new-page로 변경됩니다.요약Rewrite는 내부 리소스 변경, 사용자에게 ..

사건의 발단상사 : 제품 소개 페이지들을 만들자.나 : 속으로 생각 중 ( 제품 소개 페이지들은 변경될 일이 거의 없으니까 SSG로 만들까? 근데 만약에 관리자 페이지에서 해당 제품 정보를 변경하면 어떡하지…? SSG는 프로젝트를 빌드한 시점에 페이지를 생성해서 변경되지 않잖아…)나 : ISR로 캐싱시간을 10분? 1시간? 하루?를 줘서 페이지를 업데이트해주는 건 어떻게 생각하세요?상사 : 만약에 그 10분, 1시간, 하루 사이에 중요한 정보가 바뀐다면 어떡할래? 책임질 수 있어?나 : 어…그럼 사용자도 거의 없으니까… 그냥 요청마다… SSR하시죠… 캐싱하지 말죠… 하하하 (친구와 한풀이를 하며,,,) 나 : 오늘 이런 일이 있었다,,,친구 : 어 그거 ISR on demand revalidation라고..

글을 작성하게 된 이유현재 하고 있는 프로젝트는 Next.js와 TypeScript를 사용한 프로젝트다. 그러던 와중에 SSR의 개념에 대해서 얘기가 나왔다.팀원 의견 : getserversideprops 를 사용해야 SSR이다. 내 의견 : Next.js 자체로 SSR이 지원되니까 SSR을 하고 있는 것이다.CSR vs SSRCSR과 SSR에 대해서는 해당 POST에 정리해두었다.  넥스트 공식 홈페이지에서 설명https://nextjs.org/docs/basic-features/pagesNext.js는 기본으로는 정적 페이지를 생성해주는 프레임워크이다.SSR은 개발자의 선택사항으로 정하면 된다.hydrationPre-Rendering된 웹 페이지를 클라이언트에게 먼저 보내고, 번들링 된 자바스크립트 ..