SSR (4) 썸네일형 리스트형 Next.js 알아보기 4 (주요 렌더링 기법) CSR(Client Side Rendering) 📖 특징 ✨ 순수 리액트 사용했을 때 100%브라우저에서 js를 이용해 동적으로 페이지를 렌더링렌더링의 주체 : 클라이언트장단점 ✅(최초 로드 후) 사용자와의 상호작용이 빠르고 부드럽습니다.서버 부하가 적고, 서버에 추가적인 요청을 보낼 필요가 없기 때문에 사용자 경험이 좋습니다.첫 페이지 로딩 시간(Time To View)이 길 수 있습니다.js가 로딩되고 실행될 때까지 페이지가 비어있어 SEO에 불리합니다. 직접 구현하기 아래 코드처럼 `"use client"`옵션을 추가하 사용할 수 있습니다."use client";import Image from "next/image";import React, { useEffect, useState } from "r.. [트러블 슈팅] Next.js SSR 업데이트 기능 (새로고침 동작x) 발생한 오류 🔥Next.js에서 클라이언트 측 라우팅을 위한 `Link` 컴포넌트를 사용하던 중, 내가 원하던 동작은 `SSR` 페이지로 이동할 때마다 데이터를 가져오는 것이었지만, 첫 번째 렌더링만 데이터를 가져오고 이후에는 router에 의해 캐싱이 돼서 새로운 데이터를 가져오지 못하는 문제가 있었습니다. 기존 코드// app > layout.tsxexport default function RootLayout({ children,}: Readonly) { return ( CSR | ISR | SSR | SSG {children} );}// app > ss.. Next.js 알아보기 1 (App Router, Pages Router) React 프레임워크 Next.js 📖라이브러리와 프레임워크 차이프레임워크개발자가 기능 구현에만 집중할 수 있게 구조와 틀을 제공하는 기술의 조합 라이브러리공통 기능의 모듈화가 이루어진 프로그램의 집합 ❗비슷해 보이지만, 중요한 차이점은 애플리케이션의 제어 흐름의 권한을 누가 가지고 있는지가 핵심입니다.React에서 Routing } /> } /> } /> } /> 위 코드처럼 라우팅 설정을 위해 개발자가 직접 제어를 하고 있습니다. Next.js에서 Routingnext.js에서 미리 정해놨기 때문에 아무것도 안 해도 됩니다! App Router와 Pages Router 차이 📖File System Base 라우팅Next.js는 폴더구조를 기반으로 라우팅을 자동 생성하.. React 입문 1 (SPA, CSR, SSR, 라이브러리) React란 📖UI를 만들기 위한 라이브러리입니다. 1. React가 라이브러리인 이유프레임워크라고 불리기에는 제공해야 하는 기능이 부족하고 `상태관리(Redux)`, `라우팅(React-router-dom)` 등 개발자가 직접 제어하기 때문입니다. 프레임워크 vs 라이브러리📖1. 프레임워크개발자가 기능 구현에만 집중할 수 있게 애플리케이션의 구조 또는 틀을 제공하기 때문에 프레임워크가 정한 규칙과 구조 내에서 개발을 진행할 수 있습니다. 2. 라이브러리라이브러리는 특정 기능을 수행하는 코드의 집합으로 필요에 따라 선택적으로 사용할 수 있습니다.ex) `React.js` `react-router-dom` `redux` 3. 제어의 역전 (IoC)개발 시 `제어`를 하는 것은 개발자의 역할인데 프레임.. 이전 1 다음
