[React] ์น์ ์ญ์ฌ์ Next.js
๐ธ ์น์ ์ญ์ฌ
1. Mosaic Web Browser(1993)์ Netscape Navigator(1994) ๋ฑ์ฅ
Mosaic Web Browser์ Netscape Navigator๋ HTML๊ณผ CSS๋ก๋ง ์ด๋ฃจ์ด์ง ์ ์ ์ธ ์น์ฌ์ดํธ์์ต๋๋ค.
์ฌ์ฉ์์๊ฒ ์กฐ๊ธ ๋ ์ข์ ์๋น์ค๋ฅผ ์ ๊ณตํ๊ณ ์ ๋์ ์ธ ์น์ฌ์ดํธ๋ฅผ ๋ง๋ค๊ธฐ ์ํด ๊ณ ๋ฏผํฉ๋๋ค.
2. Javascript์ ๋ฑ์ฅ
Brendan Eich๊ฐ Javascript๋ฅผ ๊ฐ๋ฐํ์๊ณ , Netscape Navigator์๋ javascript ์์ง์ ๋ด์ฅํ์ฌ ์ถ์ํ๊ฒ ๋ฉ๋๋ค.
3. AJAX ๋ฑ์ฅ
Jesse James Garrett์ด ๋น๋๊ธฐ์ ์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ๋ฐ์์ค๊ณ ์ฒ๋ฆฌํ ์ ์๋ ๊ธฐ์ ์ด ๋ฑ์ฅํฉ๋๋ค.
4. jQuery์ ๋ฑ์ฅ
Microsoft๊ฐ Internet Explorer๋ฅผ ์ถ์ํ๋ฉฐ, ๊ฐ๋ฐ์๋ค์ Netscape Navigator์ Internet Explorer์์ ๋ชจ๋ ๋์ํ๋๋ก ๊ฐ๋ฐํด์ผํ์ต๋๋ค.
๊ฐ๋ฐ์ ์ปค๋ฎค๋ํฐ์์ ์ด ๋ถํธํจ์ ํด๊ฒฐํ๊ธฐ ์ํด jQuery๋ฅผ ์ถ์ํ์๊ณ , ๊ฐ๋ฐ์๋ค์ jQuery์์ ์ ๊ณตํ๋ API๋ฅผ ์ฌ์ฉํ์ฌ ๋ธ๋ผ์ฐ์ ์ ๊ตฌํ ์ฌํญ์ ์ ๊ฒฝ์ฐ์ง ์๊ณ ์ฝ๊ฒ ๊ฐ๋ฐํ ์ ์๊ฒ ๋์์ต๋๋ค.
5. ECMA Script ๋ฐํ
๋ชจ๋ ๋ธ๋ผ์ฐ์ ํ์ฌ๋ค์ด ๋ชจ์ฌ์ Javascript ํ์ค์์ ์ ํ์ฌ ECMA Script๋ฅผ ๋ฐํํ๊ฒ ๋ฉ๋๋ค.
๋ชจ๋ ๋ธ๋ผ์ฐ์ ๊ฐ ํ์ค์ ์ ๋ฐ๋ผ๊ฐ๊ณ ์๊ธฐ ๋๋ฌธ์ jQuery์ ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์์ด javascript๋ง์ผ๋ก๋ ๋ชจ๋ ๋ธ๋ผ์ฐ์ ์์ ๋์ํ๋ ์๋น์ค๋ฅผ ๊ฐ๋ฐํ ์ ์๊ฒ ๋ฉ๋๋ค.
6. Single Page Application
Javascript ํ์ค์ด ์ ํด์ง๋ฉด์ js๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ํ ํ๋ ์์ํฌ, ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ๊ฐ๋ฐ๋์์ต๋๋ค. (ex. Backbone.js, Angular.js, React.js)
์ด๋ฅผ ํ์ฉํ์ฌ SPA๋ฅผ ์ฝ๊ฒ ๊ตฌํํ์ฌ ์ฌ์ฉ์ ๊ฒฝํ์ ํฅ์์ํฌ ์ ์๊ฒ ๋์์ต๋๋ค.
SPA : ํ๋์ ํ์ด์ง๋ง ๋ก๋ํ๊ณ , ํ์ํ ๋ถ๋ถ๋ง ์ ๋ฐ์ดํธ ํ๋ ๊ฒ์ Single Page Application์ด๋ผ๊ณ ํฉ๋๋ค.
๐ธ React.js
React๋ ์ฌ์ฉ์ ์ธํฐํ์ด์ค๋ฅผ ๊ตฌ์ถํ๊ธฐ ์ํ Javascript ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋๋ค.
ํน์ง
1. Virtual DOM ์ฌ์ฉ
UI๊ฐ ๋ณ๊ฒฝ๋๋ฉด Virtual DOM์ผ๋ก ๋ ๋๋งํ๊ณ , Virtual DOM๊ณผ ์ด์ Virtual DOM์ ๋น๊ตํ์ฌ ๋ณ๊ฒฝ๋ ๋ถ๋ถ์ ์ค์ DOM์ ๋ฐ์ํฉ๋๋ค.
์ด๋ฅผ ํตํด ๋ธ๋ผ์ฐ์ ๋ด์์ ๋ฐ์ํ๋ ์ฐ์ฐ์ ์์ ์ค์ด๊ณ ์ฑ๋ฅ์ ๊ฐ์ ํ ์ ์์ต๋๋ค.
2. ๋จ๋ฐฉํฅ ๋ฐ์ดํฐ ๋ฐ์ธ๋ฉ
์ด๋ฒคํธ๋ฅผ ํตํด ๋ณํ๋ฅผ ๊ฐ์งํ๊ณ , ์์ ๋ ๋ฐ์ดํฐ๊ฐ ํ๋ฉด์ ์
๋ฐ์ดํธ ๋ฉ๋๋ค.
3. JSX
Javascript๋ฅผ ํ์ฅํ ๋ฌธ๋ฒ์ผ๋ก UI๋ฅผ ์ ์ํ ๋ ์ฌ์ฉํฉ๋๋ค.
4. ์ ์ธ์ ํ๋ก๊ทธ๋๋ฐ
'์ด๋ป๊ฒ'๋ณด๋ค๋ '๋ฌด์'์ ์ด์ ์ ๋ง์ถ์ด ๊ธฐ์ ํฉ๋๋ค.
๋ช
๋ น์
var arr = [1, 2, 3, 4, 5]
var elem = document.querySelector("#list");
for(var i = 0; i < arr.length; i ++) {
var child = document.createElement("li");
child.innerHTML = arr[i];
elem.appendChild(child);
}
์ ์ธ์
const arr = [1, 2, 3, 4, 5];
return (
<ul>
{arr.map((elem) => (
<li>{elem}</li>
))}
</ul>
);
5. ์ปดํฌ๋ํธ ๊ธฐ๋ฐ
์ปดํฌ๋ํธ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก UI๋ฅผ ๊ตฌ์ฑํ๋ฉฐ, ์ปดํฌ๋ํธ๋ ์ฌ์ฌ์ฉํ ์ ์๊ธฐ ๋๋ฌธ์ ๊ฐ๋ฐ ์์ฐ์ฑ์ ํฅ์์ํฌ ์ ์์ต๋๋ค.
๐ธ CSR, SSR, SSG
- CSR (Client Side Rendering)
: ํด๋ผ์ด์ธํธ(๋ธ๋ผ์ฐ์ )์์ ๋ ๋๋ง์ ์งํํฉ๋๋ค.
์น ์๋น์ค ๊ตฌ๋์ ํ์ํ HTML, Javascript, CSS ํ์ผ ๋ฑ์ ๋ชจ๋ ๋ค์ด๋ก๋ํ ํ์ ๋ทฐ๊ฐ ๊ตฌ์ฑ๋ฉ๋๋ค.
์ฅ์
TTV(Time To View) ์์ ๊ณผ TTI(Time To Interact) ์์ ์ด ์ผ์นํฉ๋๋ค.
ํ์ด์ง๋ฅผ ์ด๋ํ ๋๋ ํ๋ฉด์ด ๊น๋นก์ด์ง ์์ต๋๋ค.
๋จ์
์ด๊ธฐ์ ํ์ํ ํ์ผ์ ๋ชจ๋ ๋ค์ด๋ก๋ํ ํ์ ๋ทฐ๋ฅผ ๊ตฌ์ฑํด์ผํ๊ธฐ ๋๋ฌธ์ ๋ก๋ฉ ์๊ฐ์ด ์ค๋ ๊ฑธ๋ฆฝ๋๋ค.
(์ฌ์ฉ์๊ฐ ๋น ํ๋ฉด์ ๋ณด๋ ์๊ฐ์ด ๊ธธ์ด์ง ์ ์์ต๋๋ค.)
SEO(Search-Engine-Optimization)์ ์ทจ์ฝํ์ฌ, ์ฌ์ดํธ๊ฐ ๊ฒ์ ์์ ๋
ธ์ถ์ ๋ถ๋ฆฌํฉ๋๋ค.
- SSR (Server Side Rendering)
: ์๋ฒ์์ HTML์ ๊ตฌ์ฑํ์ฌ ๋ธ๋ผ์ฐ์ ์ ๋ฐํํ๊ณ , ๋ธ๋ผ์ฐ์ ์์ ํ์ด์ง ์ ์ฒด๋ฅผ ๋ ๋๋งํฉ๋๋ค.
์ฅ์
์๋ฒ์์ ์ด๋ฏธ HTML์ ๊ตฌ์ฑํ๊ธฐ ๋๋ฌธ์ ํ์ด์ง ๋ก๋ฉ์ด ๋นจ๋ผ์ง๋๋ค.
SEO์ ์ ๋ฆฌํฉ๋๋ค.
๋จ์ ์์ฒญ์ ๋ฐ์ ๋๋ง๋ค ์๋ฒ์์ HTML์ ๊ตฌ์ฑํ๊ธฐ ๋๋ฌธ์ ์๋ฒ ๋ถํ๊ฐ ์๊ธธ ์ ์์ต๋๋ค.
ํ์ด์ง๋ฅผ ์ด๋ํ ๋ ๊น๋นก์์ด ๋ฐ์ํฉ๋๋ค.
TTV(Time To View) ์์ ๊ณผ TTI(Time To Interact) ์์ ๊ฐ์ ์ฐจ์ด๊ฐ ์๊ฒจ์, ์ฌ์ฉ์์ ์
๋ ฅ์ ์๋ฌด๋ฐ ๋ฐ์์ด ์์ ์ ์์ต๋๋ค.
- SSG (Static Site Generation)
: ํด๋ผ์ด์ธํธ์์ ํ์ํ ํ์ด์ง๋ค์ ๋ฏธ๋ฆฌ ์ค๋นํด๋๋ค๊ฐ, ์์ฒญ์ ๋ฐ์ผ๋ฉด ์ค๋นํด๋ ํ์ผ์ ๋ฐํํฉ๋๋ค.
์ฅ์
์ด๋ฏธ ์ค๋น๋์ด์๋ ํ์ด์ง๋ฅผ ๋ณด์ฌ์ฃผ๊ธฐ ๋๋ฌธ์ ์๋๊ฐ ๋น ๋ฆ
๋๋ค.
SEO์ ์ ๋ฆฌํฉ๋๋ค.
Serverlessํ ์๋น์ค๋ฅผ ๊ตฌํํ ์ ์์ต๋๋ค.
๋จ์
์ฌ์ดํธ ๊ท๋ชจ๊ฐ ํฌ๋ฉด ๋น๋์ ์๊ฐ์ด ์ค๋๊ฑธ๋ฆฝ๋๋ค.
๋ฐ์ดํฐ๊ฐ ๋ณ๊ฒฝ๋๋ค๋ฉด ๋ค์ ๋น๋ํด์ผํฉ๋๋ค.
๐ธ Next.js ๋?
Next.js๋ ์น์ ๋น ๋ฅด๊ฒ ๋ง๋ค ์ ์๋๋ก ๋์์ฃผ๋ React framework์
๋๋ค.
์ฃผ๋ก Server Side Rendering, Static Site Generation ๊ธฐ๋ฅ์ ํธ๋ฆฌํ๊ฒ ์ด์ฉํ๊ธฐ ์ํด ์ฌ์ฉํฉ๋๋ค.
ํน์ง
๋ผ์ฐํ
pages ๊ฒฝ๋ก ๋ฐ์ ํ์ผ์ ์์ฑํ๋ฉด, ํ์ผ ์ด๋ฆ์ผ๋ก ํด๋น ํ์ด์ง์ ์ ๊ทผํ ์ ์์ต๋๋ค.
ex) pages/posts/first-post.js ํ์ผ ์์ฑ ์, /posts/first-post๋ก ์ ๊ทผ ๊ฐ๋ฅํฉ๋๋ค.
* dynamic routing
getStaticPaths ํจ์ ์ฌ์ฉํ์ฌ dynamic path ์ด๋ฆ์ผ๋ก ๊ฐ๋ฅํ ๊ฒ์ return ํด์ค์ผ ํจ.
getStaticPaths๋ development ํ๊ฒฝ์์๋ ๋งค๋ฒ ์คํ๋์ง๋ง, production ํ๊ฒฝ์์๋ build time์๋ง ์คํ๋ฉ๋๋ค.
(fallback ์ต์
์ ๋ํด์๋ ๊ณต๋ถ๊ฐ ๋ ํ์ํ ๋ฏ)
Link ์ปดํฌ๋ํธ ์ ๊ณต
Link ํ๊ทธ๋ก ํ์ด์ง๋ฅผ ์ด๋ํ๋ฉด CSR๊ณผ ๊ฐ์ด ๋์ํ์ฌ ์ฌ์ฉ์ ๊ฒฝํ์ ํฅ์์ํฌ ์ ์์ต๋๋ค.
Image Optimization
build time์ Image๋ฅผ ์ต์ ํํ์ง ์๊ณ , ์ฌ์ฉ์ ์์ฒญ์ด ์์ ๋ ์ต์ ํํฉ๋๋ค.
(viewport์ ๋ค์ด์ฌ๋ load๋ฉ๋๋ค.)
์ด๋ฏธ์ง์ ์๊ฐ ๋์ด๋จ์ ๋ฐ๋ผ build time์ด ๋์ด๋์ง ์์ต๋๋ค.
Pre-rendering
Server-side Rendering๊ณผ Static Generation ํํ๋ก Pre-rendering์ ์ ๊ณตํฉ๋๋ค.
SSR, SSG ํ์ด์ง๋ฅผ ๋ ๋๋งํ ๋ ๋ฐ์ดํฐ๊ฐ ํ์ํ ๊ฒฝ์ฐ, Next.js์์ ์ ๊ณตํ๋ ํจ์๋ฅผ ์ด์ฉํ๋ฉด ๋ฉ๋๋ค.
Static Generation : build time์ HTML์ ์์ฑํ๊ณ , ๋งค ์์ฒญ์ ์ฌ์ฌ์ฉ.(with data - getStaticProps ์ฌ์ฉ/ js bundle์๋ ํฌํจ๋์ง ์๊ธฐ ๋๋ฌธ์ db ์ฟผ๋ฆฌ ๊ฐ์ ๊ฒ๋ ์์ฑํด๋ ๋จ, development ํ๊ฒฝ์์๋ ๋งค๋ฒ ํธ์ถ๋์ง๋ง, production์์๋ build time์ ํธ์ถ๋จ)
Server-side Rendering : ๋งค ์์ฒญ์ ๋ฐ๋ผ HTML์ ์์ฑํจ. (with data - getServerSideProps ์ฌ์ฉ)
* Client-side Rendering ์ฌ์ฉ ๊ฐ๋ฅ (=> SWR ์ฌ์ฉ ์ถ์ฒ)
Code Splitting ์ ๊ณต
pages ๊ฒฝ๋ก ๋ฐ์ ์์ฑ๋ ํ์ผ์ ๋ํด์ ๋ชจ๋ ์๋ code splitting์ ์ ๊ณตํฉ๋๋ค.
์ฐธ๊ณ
https://www.youtube.com/watch?v=wcsVjmHrUQg
https://nextjs.org/
https://parkgang.github.io/blog/2021/09/07/lets-properly-understand-and-use-the-ssg-of-nextjs/
https://ajdkfl6445.gitbook.io/study/web/csr-vs-ssr-vs-ssg