โช React๋ NextJS๋ฅผ ์ด์ฉํด์ SSR์ ํ ์ ์์ต๋๋ค.
โช Static Generation vs Server-side Rendering
pre-rendering(์ฌ์ ๋ ๋๋ง)
๊ธฐ๋ณธ์ ์ผ๋ก ๋ชจ๋ ํ์ด์ง pre-render - ์ฌ์ ์ HTML ํ์ผ๋ค์ ๋ง๋ ๋ค๋ ์๋ฏธ๋ก ํผํฌ๋จผ์ค๋ฅผ ํฅ์์ํค๊ณ SEO์ ์ต์ ํ๋๋ต๋๋ค. Javascript์ ๋๊ณ ํ์ด์ง๋ฅผ ๋ ๋๋ง์ ํด๋ HTML์ด ๋ ๋๋ง๋๊ธฐ ๋๋ฌธ์ ๊ธฐ๋ณธ ํ์ด์ง๊ฐ ๋ก๋๋ฉ๋๋ค.
์ฌ๊ธฐ์ Javascript์ ๋ณต์์์ผ์ฃผ๋ฉด hydration์ด ๋๋ค๊ณ ํฉ๋๋ค. ์ ์ ์ธ ํ์ด์ง๊ฐ ๋์ ์ผ๋ก ๋ฐ๋๋ ๊ฒ์ ์๋ฏธํฉ๋๋ค
Static Generation : ์ ์ ์์ฑ vs Server-side Rendering : ์๋ฒ ์ฌ์ด๋ ๋ ๋๋ง
์ด ๋ ๊ฐ์ง์ ์ฐจ์ด์ ์ ์ธ์ HTML ์ ๋ง๋๋์ ๋๋ค.
Static Generation์ ๋น๋ ํ ๋ HTML์ ์์ฑํ๋ ๋ ๋๋ง์ ๋๋ค.
๋ฐ๋ฉด Servers-side Rendering์ ์ฌ์ฉ์๊ฐ ์์ฒญ์ ํ๋ฉด ๊ทธ๋์์ผ HTML์ ์์ฑํด์ ๋ณด์ฌ์ค๋๋ค.
NextJS๋ ํ์ด์ง ๋ณ๋ก ์ ์ ์์ฑ์ ํ ์ง ์๋ฒ ์ฌ์ด๋ ๋ ๋๋ง์ ํ ์ง ์ ํ ์ ์์ต๋๋ค.
์ ์ ์์ฑ (Static Generation) | ์๋ฒ ์ฌ์ด๋ ๋ ๋๋ง (SSR) |
user๊ฐ ์์ฒญํ๊ธฐ ์ ์ ํ์ด์ง๋ฅผ ๋ฏธ๋ฆฌ ๋ง๋ค์ด ๋๋ ๊ฒฝ์ฐ, ๋ก๋์์ ํ์ด์ง์ ๋น ํ๋ฉด ์์ด ์ฝํ ์ธ ๊ฐ ๋ชจ๋ ๋ก๋๊ฐ ๋ ์ํฉ์ ๋ณด์ฌ์ค๋ค. ex) ๋ง์ผํ ํ์ด์ง, ๋ธ๋ก๊ทธ ๊ฒ์๊ธ, ์ ํ๋ชฉ๋ก, ๋์๋ง ๋ฑ |
ํญ์ ์ต์ ์ํ๋ฅผ ์ ์งํด์ผํ๋ ํ์ด์ง ex) ๊ด๋ฆฌ์ ํ์ด์ง, ๋ถ์ ์ฐจํธ |
ํ์ต์๋ฃ
- ์ ํ๋ฒ '์ฝ๋ฉ์๋ง' (https://www.youtube.com/c/%EC%BD%94%EB%94%A9%EC%95%99%EB%A7%88)
'๊ฐ๋ฐ > Next.js' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
Next.js14์์ useRouter ์ฌ์ฉํ๊ธฐ (1) | 2024.01.03 |
---|---|
NEXT.js14 API Routes ์ฌ์ฉํ๊ธฐ (with. MONGODB) (1) | 2024.01.03 |
npm start, npm run dev ์ ์ฐจ์ด์ (1) | 2023.12.29 |
[Next.js (SSG) /cloudFront] ๋ฐฐํฌ ์ดํ reload์์ dynamic route๋ฅผ ๋ชป ํ ๋ ํด๊ฒฐ (0) | 2023.08.07 |
NextJs ์ TypeScript ํ๊ฒฝ์์ Jest , React-Testing-Library ์ ํ ํ๊ธฐ (์ฝ์ง์ค์ง๊ฒํจ...) (0) | 2022.10.28 |