๐Ÿ““

Next.js

โ€ข
Asynchronous/Synchronous Layout(Page)
โ—ฆ
Synchronous Layout (Page)
โ–ช
๋ฐ์ดํ„ฐ๊ฐ€ ์„œ๋กœ ์˜์กด์ ์ด์–ด์„œ ํ•˜๋‚˜์˜ ์„œ๋ฒ„ ์š”์ฒญ์œผ๋กœ ์ฒ˜๋ฆฌํ•ด์•ผ ํ•  ๊ฒฝ์šฐ.
โ–ช
SEO๊ฐ€ ์ค‘์š”ํ•œ ํŽ˜์ด์ง€๋‚˜ ์ดˆ๊ธฐ ๋กœ๋”ฉ์ด ์กฐ๊ธˆ ๋Š๋ ค๋„ ์ƒ๊ด€์—†๋Š” ๊ฒฝ์šฐ.
โ—ฆ
Asynchronous Layout (Page)
โ–ช
๋ฐ์ดํ„ฐ ์˜์กด์„ฑ์ด ๋‚ฎ๊ณ , ์ ์ง„์  ๋ Œ๋”๋ง์„ ํ†ตํ•ด ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ๊ฐœ์„ ํ•˜๊ณ  ์‹ถ์€ ๊ฒฝ์šฐ.
โ–ช
UX๊ฐ€ ์ค‘์š”ํ•œ ๋Œ€์‹œ๋ณด๋“œ๋‚˜ ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒ ํŽ˜์ด์ง€์— ์ ํ•ฉ.
โ€ข
params, searchParams ๋Š” Page, Layout ์ปดํฌ๋„ŒํŠธ์— ์ž๋™์œผ๋กœ ๋ถ€์—ฌ๋จ
โ—ฆ
๋‹จ, ์ด๋•Œ layout์€ ํ•˜์œ„ ์ž์‹๊ฒฝ๋กœ์—์„œ navigation ๋ ๋•Œ ๋ฆฌ๋ Œ๋”๋ง๋˜์ง€ ์•Š์œผ๋ฏ€๋กœ, searchParams ์†์„ฑ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๋‹ค!
โ€ข
SSR ๋ Œ๋”๋ง ๋ฐฉ์‹
โ€ข
RSC ๋ Œ๋”๋ง ๋ฐฉ์‹

Reference

โ€ข
SSR๊ณผ RSC
Next.js์˜ SSR๊ณผ React์˜ RSC(React Server Components) ์™„๋ฒฝ ์ดํ•ด
SSR๊ณผ RSC์˜ ์ฐจ์ด์— ๋Œ€ํ•ด ์‹ฌ๋„ ์žˆ๊ฒŒ ๊ณต๋ถ€ํ•ด ๋ณด๊ธฐ
https://mycodings.fly.dev/blog/2024-01-28-complete-understanding-nextjs-ssr-and-react-rsc