프론트엔드/Next.JS11 SSR / CSR / SSG 웹 페이지 렌더링 방식 CSR, SSR, SSG 각각의 특징과 각 방식을 어떤 상황에 사용하면 좋을지 설명해 주세요.SSR(Server Side Rendering)웹 페이지를 제공하는 가장 흔한 방법이다. SSR의 장점은 다음과 같다. 1. 더 안전한 웹 애플리케이션페이지를 서버에서 렌더링한다는 것은 쿠키 관리, 주요 API, 데이터 검증 등과 같은 작업을 서버에서 처리한다는 뜻이며, 중요한 데이터를 클라이언트에 노출할 필요가 없기 때문에 더 안전하다. 2. 더 뛰어난 웹 사이트 호환성클라이언트 환경이 자바스크립트를 사용하지 못하거나 오래된 브라우저를 사용하더라도 웹 페이지를 제공할 수 있다. 3. 더 뛰어난 SEO클라이언트에서 서버가 렌더링한 HTML 콘텐츠를 받기 때문에 봇이나 웹 크롤러 같은 검색 .. 2024. 4. 27. React 와 Next.js 비교 1. 라이브러리(Library) / 프레임워크(Framework) - 리액트(React)는 자바스크립트의 라이브러리 - Next.JS는 자바스크립트의 프레임워크 라이브러리(Library) - 어플리케이션을 만들 때 필요한 자원(기능: 함수)의 모임 - 응용 프로그램이 라이브러리를 사용한다. 프레임워크(Framework) - 코드를 작성하는 기본적인 틀을 제공해서 보다 효율적으로 어플리케이션을 만들 수 있도록 하는 소프트웨어 환경 - 프레임워크에 의해 응용 프로그램이 사용된다. 2. CSR / SSR 둘의 차이는 유저가 브라우저에서 보는 화면(UI)를 어디에서 만들어 주는지에 따라 다르다. - React는 CSR(Client-Side-Rendering) - Next.js는 SSR(Server-Side-Re.. 2023. 8. 9. 미들웨어(middleware) ## 미들웨어 실행 순서 다음은 프로젝트의 모든 라우트에 대해 미들웨어가 호출되는 실행 순서입니다. 1. `next.config.js`의 header 실행 2. `next.config.js`의 redirects 실행 3. **Middleware (rewrites, redirects, etc.) 실행** 4. `next.config.js`의 `beforeFiles` (rewrites) 실행 5. Filesystem routes (`public/`, `_next/static/`, `pages/`, `app/`, etc.) 6. `next.config.js`의 `afterFiles` (rewrites) 실행 7. 동적 라우팅 실행 (`/blog/[slug]`) 8. `next.config.js`의 `fallb.. 2023. 7. 24. 로딩 UI / 병렬적으로 수행 / 에러 UI 선택적으로 사용할 수 있다. 로딩 UI는 해당 경로의 페이지 UI가 준비되기 전에 사용자에게 로딩 중임을 나타내기 위한 UI 컴포넌트입니다. 이를 사용하면 React의 suspense boundary와 동일한 기능을 자동으로 사용할 수 있습니다. 로딩 UI를 사용하면 `settings` 폴더 내에서 자동으로 레이아웃 안에 `children`이라는 자식 컴포넌트를 suspense로 감싸게 됩니다. 레이아웃은 정적으로 표시되지만 그 안의 컴포넌트는 페이지가 준비되기 전에 로딩 컴포넌트로 보여지며, 데이터가 로드되면 준비된 컴포넌트를 보여주는 방식입니다. === 병렬 수행 promise all 보다는 suspense를 사용하자. === 에러 UI는 선택적으로 사용할 수 있다. 2023. 7. 24. 서버 컴포넌트 / 클라이언트 컴포넌트 app 폴더에 있는 컴포넌트는 기본적으로 서버 컴포넌트이다. 되도록 무조건 서버 컴포넌트로! 정말 필요한 곳에서만 클라이언트 컴포넌트로! 1. Next.js 13부터는 기본적으로 모든 컴포넌트가 서버 컴포넌트로 작동합니다. 2. 서버 컴포넌트로 실행된 코드는 서버에서 만들어져 HTML 형태로 클라이언트에 전송되기 때문에 콘솔 로그는 브라우저에서 실행되지 않습니다. 3. 서버에서 동작하기 때문에 브라우저에서 제공하는 API는 사용할 수 없지만, Node.js API는 사용 가능합니다. 클라이언트 컴포넌트 - app 폴더가 아닌 별도의 components 폴더에 파일을 생성 'use client'; import { useState } from 'react'; export default function Cou.. 2023. 7. 24. 이전 1 2 3 다음