Web Programming/Next.js

[Next.js] router query(props) 값이 비어있는 오류

1. 개요 Next.js에서 router를 사용해서 페이지 이동을 할때, query에 keyword를 담아서 페이지 이동을 시키려고 했습니다. search라는 페이지에 해당하는 tsx에서 props로 저 쿼리가 읽혀야 하는데 props.data에 값이 비어있었습니다... 2. 해결 방법 const router = useRouter(); const queries = router.query; // 전달받은 쿼리 내용 useEffect(() => { if (!router.isReady) return; console.log(queries) }, () => { }) }, [router.isReady]) 위와 같이 전달 받은 tsx에서 useRouter() 객체를 가지고 초기화를 해서 사용해야 합니다. 이유는 정적..

[Next.js] Proxy Axios 설정

1. 개요 Axios를 사용해 Next.js서버가 아닌 다른 도메인으로 url을 요청할 때가 있는데, 이때 프록시 설정을 하지 않으면 CORS 오류로 인해 호출이 되지 않는 경우가 있습니다. 또한, React에서 package.json에 프록시를 명시한 것과 다르게 Next.js에서 Proxy는 조금 다른 방법으로 설정을 해야만 했습니다. 2. 코드 Axios 호출 useEffect(() => { async function get() { try { const result: AxiosResponse = await axios.post("/redis/visit"); console.log(result.data) if (result) setVisitor(result.data) } catch (e) { } } ge..

[Next.js] SSG, SSR 개념 정리

1. 개요 전 글에서는 Hydrate에 대해서 알아봤는데, 이번에는 SSG(Server-Side-Generation, Static-Site-Generation)와 SSR(Sever-Side-Rendering)에 대해 알아보려고 합니다. CSR에 알고 싶으신 분은 아래 링크 참고 부탁드릴게요! https://narup.tistory.com/264?category=1044606 [React] SSR과 CSR(SPA) 차이 1. 개요 먼저 브라우저가 동작되어 우리에게 정보를 표현할 때, HTML의 정보를 읽어 이를 내부적으로 렌더링 한 후 js나 css를 반영해 최종적으로 정보를 표현합니다. 이러한 렌더링을 하는 방식이 narup.tistory.com React: CSR(Client-Side-Rendering..

[Next.js] Hydrate란?

1. 개요 Hydrate란, Server Side단에서 렌더링 된 정적 페이지와 번들링된 js파일(Webpack)을 클라이언트에게 보낸 뒤, 클라이언트 단에서 HTML 코드와 React인 js 코드를 서로 매칭시키는 과정을 말합니다. 일단, Client Side Rendering인 기본 React에서는 js파일만을 이용하여 public/index.html의 기본 뼈대만 있는 내용을 제외하고 src/index.js의 자바스크립트 코드에서 모든 화면을 렌더링 한 뒤, HTML DOM 요소 중 root라는 엘리먼트를 찾아 하위로 주입을 하여 웹 화면이 구성합니다. Next.js에서는 클라이언트에게 웹 페이지를 보내기 전에 Server Side 단에서 미리 웹 페이지를 Pre-Rendering 합니다. Pre-..