엘리스에서의 마지막 프로젝트 중 - Next.js, SEO,SSR, CSR에 대해서(정리중)

현재 엘리스에서 마지막프로젝트를 진행중에 있는데요, 

바로 인공지능 프로젝트를 시작하게 되었습니다!

현재까지의 프로젝트에서 써보지 않은 기술을 연습해보고싶었는데요, 

그래서 리액트 프레임워크인 Next.js를 써보기로 하였습니다.

 

1. Next.js를 사용하는 이유
React로 커뮤니티 사이트 프로젝트를 진행중에 SPA를 사용할 경우 SEO문제가 있습니다.

  Next.js 프레임워크를 사용하면 react를 node환경에서 사용할 수 있기 때문에 페이지에 따라 pre-rendering, CSR을 쉽게 선택적으로 적용할 수 있고 코드 스플리팅과 페이지 최적화가 자동으로 이루어진다. 또한 typescript, sass, autoprefix, babel 적용도 간단하게 할 수 있습니다. 

2.  SEO란
   검색 엔진 최적화를 말합니다.  네이버나 구글같은 검색 엔진에 뭔가를 검색했을 때, 내가 만든 사이트가 검색 결과에 더 잘 보이게 하기 위한 과정입니다.

검색을 하면,검색 엔진이 내 사이트 내용물(meta tag나 html 등)을 훑어가고 내용물에 특정한 인덱스 같은 것을 만들어 검색 결과에 보여준다. 검색 엔진 최적화는 검색엔진이 내 사이트를 크롤링할 때 정보를 더 잘 가져갈 수 있도록 도와주는 과정이기도 합니다.

 `React는 HTML 파일이 딱 1개 뿐이고, 렌더링이 되기 전까지(javascript를 실행하기 전까지)는 껍데기 html만 있어, 기본적으로는 검색 엔진에 올라가기 어렵다. 그래서 react에서도 검색 엔진이 긁어갈 수 있도록 미리 html 파일 내용을 보여줄 필요가 있다.

 

 

*meta tag 란https://conol.tistory.com/23

 

 

*pre-rendering이란 : 

*SSR이란:https://www.apollographql.com/docs/react/performance/server-side-rendering/

https://d2.naver.com/helloworld/7804182 

https://linked2ev.github.io/devlog/2018/11/15/Javascript-2.-What-is-SSR/

* CSR이란: 

* 서버사이드렌더링(SSR) & 클라이언트사이드렌더링(CSR) :

https://velog.io/@zansol/%ED%99%95%EC%9D%B8%ED%95%98%EA%B8%B0-%EC%84%9C%EB%B2%84%EC%82%AC%EC%9D%B4%EB%93%9C%EB%A0%8C%EB%8D%94%EB%A7%81SSR-%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8%EC%82%AC%EC%9D%B4%EB%93%9C%EB%A0%8C%EB%8D%94%EB%A7%81CSR

[주니어탈출기] 서버사이드렌더링(SSR) & 클라이언트사이드렌더링(CSR)

*코드스플리팅이란:https://velog.io/@velopert/react-code-splitting
* babel이란: https://babeljs.io/docs/en/

* react 개발환경 설정: https://edu.goorm.io/learn/lecture/16422/%EA%B0%80%EC%9E%A5-%ED%95%AB%ED%95%9C-fe-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-react-%EA%B0%80%EC%A7%80%EA%B3%A0-%EB%86%80%EC%95%84%EB%B3%B4%EA%B8%B0/lesson/783920/react-%EA%B0%9C%EB%B0%9C-%ED%99%98%EA%B2%BD-%EC%84%A4%EC%A0%95

구름EDU - 모두를 위한 맞춤형 IT교육

* https://titus94.tistory.com/4

정적인 페이지와 동적인 페이지의 차이점이란?

https://velog.io/@ouo_yoonk/react%EC%97%90%EC%84%9C-SEO

react에서 SEO

* 검색엔진봇: https://devlop.tistory.com/10
react render vs hydrate : https://simsimjae.tistory.com/389  https://stackoverflow.com/questions/46516395/whats-the-difference-between-hydrate-and-render-in-react-16 

What's the difference between hydrate() and render() in React 16?

https://www.digitalocean.com/community/tutorials/react-server-side-rendering

How to Enable Server-Side Rendering for a React App | DigitalOcean

https://oneroomtable.tistory.com/entry/%EC%84%9C%EB%B2%84-%EC%82%AC%EC%9D%B4%EB%93%9C-%EB%A0%8C%EB%8D%94%EB%A7%81%EA%B3%BC-%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8-%EC%82%AC%EC%9D%B4%EB%93%9C-%EB%A0%8C%EB%8D%94%EB%A7%81%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80%EC%9A%94

 

https://nextjs.org/

Next.js by Vercel - The React Framework

 

 

+추가

SPA에서 서버사이드 렌더링을 구축하지 않고 SEO 최적화하기

찾아보니 SSR을 구축하지 않고도 SEO를 적용할 수 있는 방법이 있습니다. 하지만  임시방편인 만큼 완벽하게 pre-render 하지 않는다고 합니다.