2023\ub144 10\uc6d4 12\uc77c<\/p>\n<\/header>\n \n \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uac1c\ubc1c\uc5d0\uc11c “\ub80c\ub354\ub9c1”\uc740 \ud074\ub77c\uc774\uc5b8\ud2b8 \uce21\uc5d0\uc11c HTML, CSS, JavaScript\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc6f9 \ud398\uc774\uc9c0\uc758 \uc694\uc18c\uac00 \uc2e4\uc81c\ub85c \ud654\uba74\uc5d0 \ud45c\uc2dc\ub418\ub294 \uacfc\uc815\uc744 \uc758\ubbf8\ud569\ub2c8\ub2e4. \uc774\ub7ec\ud55c \ub80c\ub354\ub9c1\uc740 \uc8fc\ub85c \ub450 \uac00\uc9c0 \ubc29\ubc95, \uc989 \uc11c\ubc84 \uc0ac\uc774\ub4dc \ub80c\ub354\ub9c1(SSR)\uacfc \ud074\ub77c\uc774\uc5b8\ud2b8 \uc0ac\uc774\ub4dc \ub80c\ub354\ub9c1(CSR)\uc744 \ud1b5\ud574 \uc774\ub8e8\uc5b4\uc9d1\ub2c8\ub2e4.\n <\/p>\n \n \uc774 \ub450 \ubc29\ubc95\uc740 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \ub85c\ub529 \uc18d\ub3c4, SEO \ucd5c\uc801\ud654, \uc0ac\uc6a9\uc790 \uacbd\ud5d8 \ub4f1\uc5d0 \ud070 \uc601\ud5a5\uc744 \ubbf8\uce58\ubbc0\ub85c, \uac01 \ubc29\ubc95\uc758 \ud2b9\uc9d5 \ubc0f \uc7a5\ub2e8\uc810\uc744 \uc774\ud574\ud558\uace0 \uc801\uc808\ud558\uac8c \ud65c\uc6a9\ud558\ub294 \uac83\uc774 \uc911\uc694\ud569\ub2c8\ub2e4.\n <\/p>\n<\/section>\n \n \ud074\ub77c\uc774\uc5b8\ud2b8 \uc0ac\uc774\ub4dc \ub80c\ub354\ub9c1(CSR)\uc740 \uc0ac\uc6a9\uc790\uac00 \uc6f9 \ud398\uc774\uc9c0\ub97c \uc694\uccad\ud558\uba74, \uc11c\ubc84\uac00 HTML \ud398\uc774\uc9c0\ub97c \ubc18\ud658\ud558\ub294 \ub300\uc2e0 JavaScript \ud30c\uc77c\uc744 \ubcf4\ub0b4\ub294 \ubc29\uc2dd\uc785\ub2c8\ub2e4. \uadf8\ub7f0 \ub2e4\uc74c, \uc6f9 \ube0c\ub77c\uc6b0\uc800\uac00 JavaScript\ub97c \uc2e4\ud589\ud558\uc5ec \ud074\ub77c\uc774\uc5b8\ud2b8 \uce21\uc5d0\uc11c \ud398\uc774\uc9c0\ub97c \ub3d9\uc801\uc73c\ub85c \uc0dd\uc131\ud569\ub2c8\ub2e4.\n <\/p>\n \n \uc11c\ubc84 \uc0ac\uc774\ub4dc \ub80c\ub354\ub9c1(SSR)\uc740 \uc6f9 \ud398\uc774\uc9c0\uc758 \ucf58\ud150\uce20\uac00 \uc11c\ubc84\uc5d0\uc11c \ubbf8\ub9ac \uc0dd\uc131\ub418\uc5b4 \ud074\ub77c\uc774\uc5b8\ud2b8\uc5d0\uac8c \uc804\ub2ec\ub418\ub294 \ubc29\uc2dd\uc785\ub2c8\ub2e4. \uc0ac\uc6a9\uc790\uac00 \uc6f9 \ud398\uc774\uc9c0\ub97c \uc694\uccad\ud558\uba74, \uc11c\ubc84\ub294 \uc694\uccad\uc5d0 \ub530\ub77c HTML\uc744 \uc0dd\uc131\ud558\uc5ec \ud074\ub77c\uc774\uc5b8\ud2b8\uc5d0 \ubc18\ud658\ud569\ub2c8\ub2e4.\n <\/p>\n \n Next.js\ub294 React\ub97c \uae30\ubc18\uc73c\ub85c \ud558\ub294 \ud504\ub808\uc784\uc6cc\ud06c\ub85c, \uc11c\ubc84 \uc0ac\uc774\ub4dc \ub80c\ub354\ub9c1(SSR)\uacfc \uc815\uc801 \uc0ac\uc774\ud2b8 \uc0dd\uc131(SSG)\uc744 \ubaa8\ub450 \uc9c0\uc6d0\ud569\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \uac1c\ubc1c\uc790\ub4e4\uc740 \ub2e4\uc591\ud55c \uc720\ud615\uc758 \uc6f9 \uc0ac\uc774\ud2b8 \ubc0f \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc27d\uac8c \uad6c\ucd95\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n <\/p>\n \n Next.js\uc5d0\uc11c SSR\uc744 \uad6c\ud604\ud558\uae30 \uc704\ud574\uc11c\ub294 `getServerSideProps`\ub77c\ub294 \ud568\uc218\ub97c \uc0ac\uc6a9\ud574\uc57c \ud569\ub2c8\ub2e4. \uc774 \ud568\uc218\ub294 \ud398\uc774\uc9c0\uac00 \uc694\uccad\ub420 \ub54c\ub9c8\ub2e4 \ud638\ucd9c\ub418\uc5b4 \ub370\uc774\ud130\ub97c \uac00\uc838\uc624\uace0 \ud574\ub2f9 \ub370\uc774\ud130\ub97c \uae30\ubc18\uc73c\ub85c HTML\uc744 \ub80c\ub354\ub9c1\ud569\ub2c8\ub2e4.\n <\/p>\n {data.content}<\/p>\n <\/div>\n );\n };\n\n export async function getServerSideProps() {\n const res = await fetch('https:\/\/api.example.com\/data');\n const data = await res.json();\n return { props: { data } };\n }\n\n export default Page;\n <\/code><\/pre>\n \n Next.js\uc5d0\uc11c \uc815\uc801 \uc0ac\uc774\ud2b8 \uc0dd\uc131\uc744 \uc704\ud574\uc11c\ub294 `getStaticProps`\uc640 `getStaticPaths`\ub77c\ub294 \ud568\uc218\ub97c \uc0ac\uc6a9\ud574 \ub370\uc774\ud130 \uac00\uc838\uc624\uae30 \ubc0f \ub3d9\uc801 \uacbd\ub85c \uc0dd\uc131\uc744 \ucc98\ub9ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774 \ud568\uc218\ub294 \ube4c\ub4dc \ud0c0\uc784\uc5d0 \ud638\ucd9c\ub418\uc5b4 HTML\uc744 \uc0dd\uc131\ud569\ub2c8\ub2e4.\n <\/p>\n {data.content}<\/p>\n <\/div>\n );\n };\n\n export async function getStaticProps() {\n const res = await fetch('https:\/\/api.example.com\/data');\n const data = await res.json();\n return { props: { data } };\n }\n\n export default Page;\n <\/code><\/pre>\n \n SSR\uacfc CSR\uc740 \uac01\uac01\uc758 \uc7a5\ub2e8\uc810\uc774 \uc788\uc73c\uba70, Next.js\ub294 \uc774\ub7ec\ud55c \ub450 \uac00\uc9c0 \ubc29\ubc95\ub860\uc744 \ubaa8\ub450 \uc9c0\uc6d0\ud558\uc5ec \uac1c\ubc1c\uc790\uac00 \ud504\ub85c\uc81d\ud2b8\uc5d0 \uc801\ud569\ud55c \uc120\ud0dd\uc744 \ud560 \uc218 \uc788\ub3c4\ub85d \ub3d5\uc2b5\ub2c8\ub2e4. <\/body><\/p>\n","protected":false},"excerpt":{"rendered":"1. \ub80c\ub354\ub9c1\uc758 \uc774\ud574<\/h2>\n
2. \ud074\ub77c\uc774\uc5b8\ud2b8 \uc0ac\uc774\ub4dc \ub80c\ub354\ub9c1(CSR)<\/h2>\n
2.1 \uc815\uc758<\/h3>\n
2.2 \uc7a5\uc810<\/h3>\n
\n
2.3 \ub2e8\uc810<\/h3>\n
\n
3. \uc11c\ubc84 \uc0ac\uc774\ub4dc \ub80c\ub354\ub9c1(SSR)<\/h2>\n
3.1 \uc815\uc758<\/h3>\n
3.2 \uc7a5\uc810<\/h3>\n
\n
3.3 \ub2e8\uc810<\/h3>\n
\n
4. SSR\uacfc CSR \ube44\uad50<\/h2>\n
\n\n
\n \n\ud2b9\uc9d5<\/th>\n \ud074\ub77c\uc774\uc5b8\ud2b8 \uc0ac\uc774\ub4dc \ub80c\ub354\ub9c1(CSR)<\/th>\n \uc11c\ubc84 \uc0ac\uc774\ub4dc \ub80c\ub354\ub9c1(SSR)<\/th>\n<\/tr>\n<\/thead>\n \n \ucd08\uae30 \ub85c\ub529 \uc18d\ub3c4<\/td>\n \ub290\ub9bc<\/td>\n \ube60\ub984<\/td>\n<\/tr>\n \n \ud398\uc774\uc9c0 \uc804\ud658 \uc18d\ub3c4<\/td>\n \ube60\ub984<\/td>\n \ub290\ub9bc<\/td>\n<\/tr>\n \n SEO<\/td>\n \ubd88\ub9ac<\/td>\n \uc720\ub9ac<\/td>\n<\/tr>\n \n \uc11c\ubc84 \ubd80\ud558<\/td>\n \ub0ae\uc74c<\/td>\n \ub192\uc74c<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/section>\n 5. Next.js\uc758 SSR\uacfc SSG(\uc815\uc801 \uc0ac\uc774\ud2b8 \uc0dd\uc131) \uc124\uc815<\/h2>\n
5.1 Next.js \uc18c\uac1c<\/h3>\n
5.2 Next.js\uc5d0\uc11c SSR \uad6c\ud604\ud558\uae30<\/h3>\n
\n import React from 'react';\n\n const Page = ({ data }) => {\n return (\n {data.title}<\/h1>\n
5.3 Next.js\uc5d0\uc11c SSG \uad6c\ud604\ud558\uae30<\/h3>\n
\n import React from 'react';\n\n const Page = ({ data }) => {\n return (\n {data.title}<\/h1>\n
5.4 \uacb0\ub860<\/h3>\n
\n \ube44\uc988\ub2c8\uc2a4\uc758 \uc694\uad6c \uc0ac\ud56d\uacfc \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \ubaa8\ub450 \uace0\ub824\ud558\uc5ec \uc801\uc808\ud55c \ubc29\ubc95\uc744 \uc120\ud0dd\ud558\ub294 \uac83\uc774 \uc911\uc694\ud569\ub2c8\ub2e4.
\n Next.js\ub294 \uc774\ub7ec\ud55c \uacfc\uc815\uc744 \ubcf4\ub2e4 \uc6a9\uc774\ud558\uac8c \ub9cc\ub4e4\uc5b4 \uc8fc\uba70, \ud604\ub300\uc801 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uad6c\ucd95\uc5d0 \uc788\uc5b4 \uac15\ub825\ud55c \ub3c4\uad6c\ub85c \uc790\ub9ac \uc7a1\uace0 \uc788\uc2b5\ub2c8\ub2e4.\n <\/p>\n<\/section>\n<\/article>\n