Next.js(3)

Server Side Rendering

React는 JavaScript를 이용하기때문에
JS가없으면 렌더링 되지않는다.
하지만 Next.js로만든 웹 페이지는 리로드해서 렌더링이 잘 되는데
이는 .Next폴더의 서버에서 리액트를 실행하여 이를 렌더링 하기 때문이다.
즉 JS 가 아닌 랜더링 된 HTML을 보여준다.

단점으로는 재방문하는 페이지를 모든 내용을 다시 받아야한다.
이 문제는

<a>컴포넌트를
<Link>컴포넌트로 변경해준다.

정적데이터 사용

1. "./public"폴더 안에 이미지를 넣어준다.
   2.<img/> 태그를 사용하여 src에 이미지 주소를 넣어준다.

JSON으로 서버 구축 후 가져오기

npx json-server@0.17.4 -port9999 -watch db.json
을 입력하여 json-server를 만들어준다.

db.json생성을 확인하고

http://localhost:[설정한 포트번호]/["json"]
로 들어가면 아래와같이 'json'형태의 데이터로 리턴받는걸 확인할 수 있다.

json-server데이터를 JS를 이용해 값 가져오기

서버 통신 명령어인 "fetch"를 이용하여 값을 가져온다.

'f12'를 통해 개발자도구를 열어 'esc'를 눌러 콘솔창을 열어 입력해준다.

fetch('http://localhost:9999/topics') //해당 주소에서
.then((resp) => {
    return resp.json(); 		//resp값을 받아 json으로 변환하고
})
.then(result=> {

    console.log('result', result)	//이를 출력해준다.

});