next.js (9) 썸네일형 리스트형 SEO 향상시키기 next.js를 사용해서 작은 프로젝트를 공부할 겸 만들어 보면서 SEO에 대해서도 공부하게 되었다. next-seo라는 라이브러리를 이용하였다. _document파일을 이용할 수 있다. 이 파일은 HTML의 head, body tag를 수정할 수 있는 페이지다. 전역적으로 적용된다. //_document.tsx 그러나 이렇게 사용하게 되면 페이지마다 바뀌어야하는 title의 경우 전역적으로 바꾸는 _document파일이 적합하지않다. 그래서 import Head from "next/head"; 를 사용할 수 있지만, 많은 페이지마다 title을 하나씩 지정하는 것도 비효율적이기 때문에 라이브러리의 도움을 받을 수 있다. //landingPage import { NextSeo } from “next-se.. SSG의 부족한 점을 보완한 ISR 계속해서 SSG, SSR, CSR에 대해서 복습 중에 간단하게 정리를 하고 싶어서 글을 쓰게 되었다. next.js는 크게 3가지의 렌더링 방식을 사용할 수 있다. CSR : useEffect, SWR과 같은 상태관리 툴을 사용하여 렌더링 책임을 사용자에게 전가하는 것. SSR : 사용자가 요청 할때마다 서버로부터 완전한 HTML을 받아 새로운 페이지를 생성해내는 방식. SSG : 렌더링이 SSR과 비슷하지만 build시간에 미리 HTML을 생성하여 사용자에게 만들어진 화면을 제공. ** 위와 같은 렌더링 방식 속에서 next.js 성능상의 이점은 챙기면서도 업데이트된 내용을 제공할 수 있는 방식 = ISR ISR:incremental static regerernation SSG는 요청마다 build 타.. 회원기능 [과정] 1. 회원가입은 DB에 아이디랑 비번을 저장해놓는다. 2. 유저가 아이디 / 비번을 server에 보낸다. 3. 서버는 DB와 일치하는지 확인한다. 4. 맞다면 입장권(토근,session)을 유저한테 발급해준다. 5. 유저는 데이터를 요청할때마다 자동으로 입장권을 서버에 보낸다. 6. 입장권을 확인하고 server는 요청하는 데이터를 보내준다. **입장권은 유저에서 관리하면 안되므로 쿠키저장소에 숨겨놓는다. [입장권을 만들때] 1. session방식 : 입장권에 sessionID(랜덤한 문자열)이 포함되어 있다. 이 입장권을 가지고 유저는 데이터를 요청하고 받을 수 있다. 대신 요청할때마다 DB에서 데이터를 요청해야하므로 부담이 될 수 있다. ex)redis라는 보관용 DB을 사용할 수 있다. .. 서버로 데이터 전송 1. 수정하기 - 기존의 글쓰기와 같지만 대신 input에는 그 전에 썼던 글이 들어가있어야한다. 그래서 input 속성에 defaultValue를 주고 그 전의 데이터들을 넣어주었다. - 서버에서는 기존의 값들을 update해주기 위해 id가 필요하다. (input에다가 id를 같이 담아보내준다. display:none을 통해 브라우저에서는 나타나지 않는다.) //edit API let newList = { title: req.body.title, content: req.body.content, }; let result = await db .collection('post') .updateOne({ _id: new ObjectId(req.body._id) }, { $set: newList }); 수정한 .. next.js server DB에 위험을 낮추기 위해서 바로 DB로 데이터를 전송하지 않고 서버에 저장하고 나서 DB에 넣는다. next는 자동 라우팅 기능이 있어서 쉽게 서버를 다룰 수 있다. (즉, 누군가가 api/test로 데이터를 GET/POST/...등을 요청하면 파일안의 코드를 실행해준다.) 파일부터 생성하자. 사용자가 요청하면 데이터를 보여줄 서버가 필요하다. src파일 아래 page/api/test.js파일을 만들어 준다.(기존에 생성된 api파일 아래 만들어도 된다.) DBmongo를 사용하고 있으므로 거기에 맞게 데이터를 요청해야한다. 먼저 html, 글 불러오기 // action URL로 POST를 한다. (GET,POST)만 가능하다. 버튼 /api/test로 데이터를 GET요청 한다. import { con.. [next.js] getStaticPaths 지금까지 상황) 지도 api를 가지고와서 매장의 위치가 핀에 꽂혀있을 수 있도록 만들고 해당 핀을 누르면 그 매장의 상세정보를 보려고 한다. 그럼 그 핀에 알맞는 상세page가 필요하게 되었다. 과정) [name].tsx 파일을 pages 하위 파일로 만들어 준다. 여기서 []안에 들어가는 params를 지정해주면 페이지가 생성된다. 유동적으로 페이지를 만들 수 있다는 것. 예시 코드) //[name].tsx const StoreDetail : NextPage = ({store:Store})=>{ return detail; } export default StoreDetail export const getStaticPaths: GetStaticPaths = async()=>{ const paths = [{.. [next.js] Image 3가지를 비교해보려고 한다. 기존 img태그, next13 의 Image이다. 1.img태그 //평상 시 img의 경우 _ lazyLoading이라는 속성을 따로 줘야한다. 간단하게 외부경로로 이미지를 평상시 처럼 불러올 수 있다. 그러나 밑에 경고(?)처럼 next/Image를 사용하라는 문구가 뜬다. width와 height를 지정해주지 않으면 기존의 이미지 크기대로 불러와진다. next/image의 장점을 밑에서 얘기할꺼지만 img에서 lazyLoading을 하고 싶으면 따로 지정해야한다. ** lazyLoading은 불필요한 호출을 줄인다.img태그의 경우 무조건 해당 페이지에 들어오게 되면 이미지를 호출한다. 이때 loading="lazy";를 해주면 해당 이미지가 보일때만 네트워크탭에서 보면 .. [Next.js] link next는 SSG + CSR을 결합한 방식을 사용한다. 처음 렌더링 일땐 SSG를 사용하고 링크를 통해 다른 페이지로 넘어가면 CSR을 사용한다. => 네트워크 창에 보면 확인이 가능하다. /getStaticProps Links라는 파일안에 getStaticProps페이지로 갈 수 있는 링크를 만들어놨다. 처음 Link페이지가 렌더링 되면 SSG방식으로 서버로 부터 HTML을 받아온다. (맨위에 links라는 목록_prefetching이 되고있다.미리 HTML화면을 받아 볼 수 있다는 점) 그리고 링크를 누르면, getStaticProps페이지의 경우 HTML을 받아오지 않고 js파일이 생성되는 것을 네트워크 탭에서 확인이 가능하다. 이말인 즉슨 CSR형식으로 js파일과 JSON데이터를 가지고 렌더링을 .. 이전 1 2 다음
