{"id":1583,"date":"2024-10-01T22:50:40","date_gmt":"2024-10-01T15:50:40","guid":{"rendered":"https:\/\/fstack.io.vn\/?p=1583"},"modified":"2024-10-15T23:33:47","modified_gmt":"2024-10-15T16:33:47","slug":"rendering-server-component-trong-next-js-ma-ban-nen-biet","status":"publish","type":"post","link":"https:\/\/fstack.io.vn\/blog\/rendering-server-component-trong-next-js-ma-ban-nen-biet\/","title":{"rendered":"Rendering Server Component trong Next.Js m\u00e0 b\u1ea1n n\u00ean bi\u1ebft"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"1583\" class=\"elementor elementor-1583\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5aa0246 e-flex e-con-boxed e-con e-parent\" data-id=\"5aa0246\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e3f59d0 elementor-widget elementor-widget-heading\" data-id=\"e3f59d0\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Danh m\u1ee5c b\u00e0i vi\u1ebft<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/fstack.io.vn\/blog\/rendering-server-component-trong-next-js-ma-ban-nen-biet\/#Server_Components\" >Server Components<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/fstack.io.vn\/blog\/rendering-server-component-trong-next-js-ma-ban-nen-biet\/#Loi_ich_cua_viec_Server_Rendering\" >L\u1ee3i \u00edch c\u1ee7a vi\u1ec7c Server Rendering<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/fstack.io.vn\/blog\/rendering-server-component-trong-next-js-ma-ban-nen-biet\/#Su_dung_Server_Components_trong_Nextjs\" >S\u1eed d\u1ee5ng Server Components trong Next.js<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/fstack.io.vn\/blog\/rendering-server-component-trong-next-js-ma-ban-nen-biet\/#Chien_luoc_ket_xuat_Server\" >Chi\u1ebfn l\u01b0\u1ee3c k\u1ebft xu\u1ea5t Server<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/fstack.io.vn\/blog\/rendering-server-component-trong-next-js-ma-ban-nen-biet\/#Ket_xuat_dong_Dynamic_Rendering\" >K\u1ebft xu\u1ea5t \u0111\u1ed9ng (Dynamic Rendering)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/fstack.io.vn\/blog\/rendering-server-component-trong-next-js-ma-ban-nen-biet\/#Chuyen_sang_ket_xuat_dong\" >Chuy\u1ec3n sang k\u1ebft xu\u1ea5t \u0111\u1ed9ng<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/fstack.io.vn\/blog\/rendering-server-component-trong-next-js-ma-ban-nen-biet\/#Streaming\" >Streaming<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"Server_Components\"><\/span>Server Components<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8b34908 elementor-widget elementor-widget-text-editor\" data-id=\"8b34908\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><a href=\"https:\/\/fstack.io.vn\/blog\/react-query-la-gi-tai-sao-nen-dung-react-query\/\">React<\/a> Server Components cho ph\u00e9p b\u1ea1n vi\u1ebft UI c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c render v\u00e0 t\u00f9y ch\u1ecdn l\u01b0u v\u00e0o b\u1ed9 nh\u1edb \u0111\u1ec7m tr\u00ean m\u00e1y ch\u1ee7. Trong <a href=\"https:\/\/fstack.io.vn\/blog\/nextjs-la-gi-kien-thuc-co-ban-ve-nextjs-ban-nen-biet\/\">Next.js<\/a>, c\u00f4ng vi\u1ec7c render \u0111\u01b0\u1ee3c chia nh\u1ecf h\u01a1n n\u1eefa theo c\u00e1c ph\u00e2n \u0111o\u1ea1n tuy\u1ebfn \u0111\u01b0\u1eddng \u0111\u1ec3 cho ph\u00e9p streaming v\u00e0 render m\u1ed9t ph\u1ea7n, v\u00e0 c\u00f3 ba chi\u1ebfn l\u01b0\u1ee3c render m\u00e1y ch\u1ee7 kh\u00e1c nhau:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2bb48d6 elementor-widget elementor-widget-text-editor\" data-id=\"2bb48d6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li><a href=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/rendering\/server-components#static-rendering-default\" rel=\"nofollow noopener\" target=\"_blank\">K\u1ebft xu\u1ea5t t\u0129nh<\/a><\/li><li><a href=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/rendering\/server-components#dynamic-rendering\" rel=\"nofollow noopener\" target=\"_blank\">K\u1ebft xu\u1ea5t \u0111\u1ed9ng<\/a><\/li><li><a href=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/rendering\/server-components#streaming\" rel=\"nofollow noopener\" target=\"_blank\">Ph\u00e1t tr\u1ef1c tuy\u1ebfn<\/a><\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-05b355a elementor-widget elementor-widget-text-editor\" data-id=\"05b355a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Trang n\u00e0y s\u1ebd h\u01b0\u1edbng d\u1eabn c\u00e1ch th\u1ee9c ho\u1ea1t \u0111\u1ed9ng c\u1ee7a Th\u00e0nh ph\u1ea7n M\u00e1y ch\u1ee7, th\u1eddi \u0111i\u1ec3m b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng ch\u00fang v\u00e0 c\u00e1c chi\u1ebfn l\u01b0\u1ee3c k\u1ebft xu\u1ea5t m\u00e1y ch\u1ee7 kh\u00e1c nhau.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-46420b4 elementor-widget elementor-widget-heading\" data-id=\"46420b4\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"Loi_ich_cua_viec_Server_Rendering\"><\/span>L\u1ee3i \u00edch c\u1ee7a vi\u1ec7c Server Rendering<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-87009d5 elementor-widget elementor-widget-text-editor\" data-id=\"87009d5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>C\u00f3 m\u1ed9t s\u1ed1 l\u1ee3i \u00edch khi th\u1ef1c hi\u1ec7n c\u00f4ng vi\u1ec7c k\u1ebft xu\u1ea5t tr\u00ean m\u00e1y ch\u1ee7, bao g\u1ed3m:<\/p><ul><li><strong>L\u1ea5y d\u1eef li\u1ec7u<\/strong>: C\u00e1c th\u00e0nh ph\u1ea7n m\u00e1y ch\u1ee7 cho ph\u00e9p b\u1ea1n di chuy\u1ec3n d\u1eef li\u1ec7u \u0111ang l\u1ea5y \u0111\u1ebfn m\u00e1y ch\u1ee7, g\u1ea7n h\u01a1n v\u1edbi ngu\u1ed3n d\u1eef li\u1ec7u c\u1ee7a b\u1ea1n. \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 c\u1ea3i thi\u1ec7n hi\u1ec7u su\u1ea5t b\u1eb1ng c\u00e1ch gi\u1ea3m th\u1eddi gian c\u1ea7n thi\u1ebft \u0111\u1ec3 l\u1ea5y d\u1eef li\u1ec7u c\u1ea7n thi\u1ebft \u0111\u1ec3 k\u1ebft xu\u1ea5t v\u00e0 s\u1ed1 l\u01b0\u1ee3ng y\u00eau c\u1ea7u m\u00e0 m\u00e1y kh\u00e1ch c\u1ea7n th\u1ef1c hi\u1ec7n.<\/li><li><strong>B\u1ea3o m\u1eadt<\/strong>: C\u00e1c th\u00e0nh ph\u1ea7n m\u00e1y ch\u1ee7 cho ph\u00e9p b\u1ea1n gi\u1eef d\u1eef li\u1ec7u v\u00e0 logic nh\u1ea1y c\u1ea3m tr\u00ean m\u00e1y ch\u1ee7, ch\u1eb3ng h\u1ea1n nh\u01b0 m\u00e3 th\u00f4ng b\u00e1o v\u00e0 kh\u00f3a API, m\u00e0 kh\u00f4ng c\u00f3 nguy c\u01a1 ti\u1ebft l\u1ed9 ch\u00fang cho m\u00e1y kh\u00e1ch.<\/li><li><strong>L\u01b0u tr\u1eef \u0111\u1ec7m<\/strong>: B\u1eb1ng c\u00e1ch k\u1ebft xu\u1ea5t tr\u00ean m\u00e1y ch\u1ee7, k\u1ebft qu\u1ea3 c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c l\u01b0u v\u00e0o b\u1ed9 nh\u1edb \u0111\u1ec7m v\u00e0 s\u1eed d\u1ee5ng l\u1ea1i trong c\u00e1c y\u00eau c\u1ea7u ti\u1ebfp theo v\u00e0 tr\u00ean nhi\u1ec1u ng\u01b0\u1eddi d\u00f9ng. \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 c\u1ea3i thi\u1ec7n hi\u1ec7u su\u1ea5t v\u00e0 gi\u1ea3m chi ph\u00ed b\u1eb1ng c\u00e1ch gi\u1ea3m l\u01b0\u1ee3ng k\u1ebft xu\u1ea5t v\u00e0 l\u1ea5y d\u1eef li\u1ec7u \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n tr\u00ean m\u1ed7i y\u00eau c\u1ea7u.<\/li><li><strong>Hi\u1ec7u su\u1ea5t<\/strong>: C\u00e1c th\u00e0nh ph\u1ea7n m\u00e1y ch\u1ee7 cung c\u1ea5p cho b\u1ea1n c\u00e1c <a href=\"https:\/\/fstack.io.vn\/blog\/top-10-cong-cu-digital-marketing-co-ban-cho-nguoi-moi-bat-dau\/\">c\u00f4ng c\u1ee5<\/a> b\u1ed5 sung \u0111\u1ec3 t\u1ed1i \u01b0u h\u00f3a hi\u1ec7u su\u1ea5t t\u1eeb \u200b\u200b\u0111\u01b0\u1eddng c\u01a1 s\u1edf. V\u00ed d\u1ee5, n\u1ebfu b\u1ea1n b\u1eaft \u0111\u1ea7u v\u1edbi m\u1ed9t \u1ee9ng d\u1ee5ng bao g\u1ed3m to\u00e0n b\u1ed9 Th\u00e0nh ph\u1ea7n m\u00e1y kh\u00e1ch, vi\u1ec7c di chuy\u1ec3n c\u00e1c ph\u1ea7n kh\u00f4ng t\u01b0\u01a1ng t\u00e1c c\u1ee7a UI sang Th\u00e0nh ph\u1ea7n m\u00e1y ch\u1ee7 c\u00f3 th\u1ec3 gi\u1ea3m l\u01b0\u1ee3ng <a href=\"https:\/\/fstack.io.vn\/blog\/mot-so-cau-hoi-phong-van-javascript-tu-co-ban-den-nang-cao\/\">JavaScript<\/a> c\u1ea7n thi\u1ebft \u1edf ph\u00eda m\u00e1y kh\u00e1ch. \u0110i\u1ec1u n\u00e0y c\u00f3 l\u1ee3i cho ng\u01b0\u1eddi d\u00f9ng c\u00f3 m\u1ea1ng internet ch\u1eadm h\u01a1n ho\u1eb7c thi\u1ebft b\u1ecb y\u1ebfu h\u01a1n v\u00ec tr\u00ecnh duy\u1ec7t c\u00f3 \u00edt JavaScript ph\u00eda m\u00e1y kh\u00e1ch h\u01a1n \u0111\u1ec3 t\u1ea3i xu\u1ed1ng, ph\u00e2n t\u00edch v\u00e0 th\u1ef1c thi.<\/li><li><strong>T\u1ea3i trang ban \u0111\u1ea7u v\u00e0\u00a0<a href=\"https:\/\/web.dev\/fcp\/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">V\u1ebd n\u1ed9i dung \u0111\u1ea7u ti\u00ean (FCP)<\/a><\/strong>: Tr\u00ean m\u00e1y ch\u1ee7, ch\u00fang t\u00f4i c\u00f3 th\u1ec3 t\u1ea1o HTML \u0111\u1ec3 cho ph\u00e9p ng\u01b0\u1eddi d\u00f9ng xem trang ngay l\u1eadp t\u1ee9c, m\u00e0 kh\u00f4ng c\u1ea7n ch\u1edd m\u00e1y kh\u00e1ch t\u1ea3i xu\u1ed1ng, ph\u00e2n t\u00edch v\u00e0 th\u1ef1c thi JavaScript c\u1ea7n thi\u1ebft \u0111\u1ec3 hi\u1ec3n th\u1ecb trang.<\/li><li><strong>T\u1ed1i \u01b0u h\u00f3a c\u00f4ng c\u1ee5 t\u00ecm ki\u1ebfm v\u00e0 kh\u1ea3 n\u0103ng chia s\u1ebb tr\u00ean m\u1ea1ng x\u00e3 h\u1ed9i<\/strong>: HTML \u0111\u00e3 hi\u1ec3n th\u1ecb c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c bot c\u00f4ng c\u1ee5 t\u00ecm ki\u1ebfm s\u1eed d\u1ee5ng \u0111\u1ec3 l\u1eadp ch\u1ec9 m\u1ee5c cho c\u00e1c trang c\u1ee7a b\u1ea1n v\u00e0 bot m\u1ea1ng x\u00e3 h\u1ed9i \u0111\u1ec3 t\u1ea1o b\u1ea3n xem tr\u01b0\u1edbc th\u1ebb x\u00e3 h\u1ed9i cho c\u00e1c trang c\u1ee7a b\u1ea1n.<\/li><li><strong>Truy\u1ec1n ph\u00e1t<\/strong>: C\u00e1c th\u00e0nh ph\u1ea7n m\u00e1y ch\u1ee7 cho ph\u00e9p b\u1ea1n chia nh\u1ecf c\u00f4ng vi\u1ec7c hi\u1ec3n th\u1ecb th\u00e0nh c\u00e1c ph\u1ea7n v\u00e0 truy\u1ec1n ph\u00e1t ch\u00fang \u0111\u1ebfn m\u00e1y kh\u00e1ch khi ch\u00fang \u0111\u00e3 s\u1eb5n s\u00e0ng. \u0110i\u1ec1u n\u00e0y cho ph\u00e9p ng\u01b0\u1eddi d\u00f9ng xem c\u00e1c ph\u1ea7n c\u1ee7a trang s\u1edbm h\u01a1n m\u00e0 kh\u00f4ng c\u1ea7n ph\u1ea3i \u0111\u1ee3i to\u00e0n b\u1ed9 trang \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb tr\u00ean m\u00e1y ch\u1ee7.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d350e84 elementor-widget elementor-widget-heading\" data-id=\"d350e84\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"Su_dung_Server_Components_trong_Nextjs\"><\/span>S\u1eed d\u1ee5ng Server Components trong Next.js<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d4fcc99 elementor-widget elementor-widget-text-editor\" data-id=\"d4fcc99\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\tTheo m\u1eb7c \u0111\u1ecbnh, Next.js s\u1eed d\u1ee5ng Server Components. \u0110i\u1ec1u n\u00e0y cho ph\u00e9p b\u1ea1n t\u1ef1 \u0111\u1ed9ng tri\u1ec3n khai k\u1ebft xu\u1ea5t m\u00e1y ch\u1ee7 m\u00e0 kh\u00f4ng c\u1ea7n c\u1ea5u h\u00ecnh b\u1ed5 sung v\u00e0 b\u1ea1n c\u00f3 th\u1ec3 ch\u1ecdn s\u1eed d\u1ee5ng Client Components khi c\u1ea7n, h\u00e3y xem Client Components.\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b8dad50 elementor-widget elementor-widget-text-editor\" data-id=\"b8dad50\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Tr\u00ean m\u00e1y ch\u1ee7, Next.js s\u1eed d\u1ee5ng API c\u1ee7a React \u0111\u1ec3 s\u1eafp x\u1ebfp qu\u00e1 tr\u00ecnh k\u1ebft xu\u1ea5t. Qu\u00e1 tr\u00ecnh k\u1ebft xu\u1ea5t \u0111\u01b0\u1ee3c chia th\u00e0nh c\u00e1c ph\u1ea7n: theo t\u1eebng ph\u00e2n \u0111o\u1ea1n tuy\u1ebfn \u0111\u01b0\u1eddng v\u00e0 ranh gi\u1edbi Suspense.<\/p><p>M\u1ed7i ph\u1ea7n \u0111\u01b0\u1ee3c k\u1ebft xu\u1ea5t theo hai b\u01b0\u1edbc:<\/p><p>React k\u1ebft xu\u1ea5t c\u00e1c Th\u00e0nh ph\u1ea7n M\u00e1y ch\u1ee7 th\u00e0nh \u0111\u1ecbnh d\u1ea1ng d\u1eef li\u1ec7u \u0111\u1eb7c bi\u1ec7t \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 T\u1ea3i tr\u1ecdng Th\u00e0nh ph\u1ea7n M\u00e1y ch\u1ee7 React (RSC Payload).<br \/>Next.js s\u1eed d\u1ee5ng c\u00e1c l\u1ec7nh JavaScript T\u1ea3i tr\u1ecdng RSC v\u00e0 Th\u00e0nh ph\u1ea7n M\u00e1y kh\u00e1ch \u0111\u1ec3 k\u1ebft xu\u1ea5t HTML tr\u00ean m\u00e1y ch\u1ee7.<br \/>Sau \u0111\u00f3, tr\u00ean m\u00e1y kh\u00e1ch:<\/p><p>HTML \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 hi\u1ec3n th\u1ecb ngay b\u1ea3n xem tr\u01b0\u1edbc nhanh kh\u00f4ng t\u01b0\u01a1ng t\u00e1c c\u1ee7a tuy\u1ebfn \u0111\u01b0\u1eddng &#8211; ch\u1ec9 d\u00e0nh cho l\u1ea7n t\u1ea3i trang ban \u0111\u1ea7u.<br \/>T\u1ea3i tr\u1ecdng Th\u00e0nh ph\u1ea7n M\u00e1y ch\u1ee7 React \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 \u0111i\u1ec1u h\u00f2a c\u00e1c c\u00e2y Th\u00e0nh ph\u1ea7n M\u00e1y kh\u00e1ch v\u00e0 M\u00e1y ch\u1ee7 v\u00e0 c\u1eadp nh\u1eadt <a href=\"https:\/\/fstack.io.vn\/blog\/dom-la-gi-cach-thao-tac-voi-dom-trong-javascript\/\">DOM<\/a>.<br \/>C\u00e1c l\u1ec7nh JavaScript \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 cung c\u1ea5p n\u01b0\u1edbc cho c\u00e1c Th\u00e0nh ph\u1ea7n M\u00e1y kh\u00e1ch v\u00e0 l\u00e0m cho \u1ee9ng d\u1ee5ng tr\u1edf n\u00ean t\u01b0\u01a1ng t\u00e1c.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9e4444e elementor-widget elementor-widget-heading\" data-id=\"9e4444e\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"Chien_luoc_ket_xuat_Server\"><\/span>Chi\u1ebfn l\u01b0\u1ee3c k\u1ebft xu\u1ea5t Server<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-85e1d03 elementor-widget elementor-widget-text-editor\" data-id=\"85e1d03\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>C\u00f3 ba t\u1eadp h\u1ee3p con c\u1ee7a k\u1ebft xu\u1ea5t m\u00e1y ch\u1ee7: T\u0129nh, \u0110\u1ed9ng v\u00e0 Ph\u00e1t tr\u1ef1c tuy\u1ebfn.<\/p><p>K\u1ebft xu\u1ea5t t\u0129nh (M\u1eb7c \u0111\u1ecbnh)<br \/>V\u1edbi K\u1ebft xu\u1ea5t t\u0129nh, c\u00e1c tuy\u1ebfn \u0111\u01b0\u1ee3c k\u1ebft xu\u1ea5t t\u1ea1i th\u1eddi \u0111i\u1ec3m x\u00e2y d\u1ef1ng ho\u1eb7c \u1edf ch\u1ebf \u0111\u1ed9 n\u1ec1n sau khi x\u00e1c th\u1ef1c l\u1ea1i d\u1eef li\u1ec7u. K\u1ebft qu\u1ea3 \u0111\u01b0\u1ee3c l\u01b0u v\u00e0o b\u1ed9 nh\u1edb \u0111\u1ec7m v\u00e0 c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c \u0111\u1ea9y l\u00ean M\u1ea1ng ph\u00e2n ph\u1ed1i n\u1ed9i dung (CDN). T\u1ed1i \u01b0u h\u00f3a n\u00e0y cho ph\u00e9p b\u1ea1n chia s\u1ebb k\u1ebft qu\u1ea3 c\u1ee7a c\u00f4ng vi\u1ec7c k\u1ebft xu\u1ea5t gi\u1eefa ng\u01b0\u1eddi d\u00f9ng v\u00e0 c\u00e1c y\u00eau c\u1ea7u c\u1ee7a m\u00e1y ch\u1ee7.<\/p><p>K\u1ebft xu\u1ea5t t\u0129nh h\u1eefu \u00edch khi m\u1ed9t tuy\u1ebfn c\u00f3 d\u1eef li\u1ec7u kh\u00f4ng \u0111\u01b0\u1ee3c c\u00e1 nh\u00e2n h\u00f3a cho ng\u01b0\u1eddi d\u00f9ng v\u00e0 c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c bi\u1ebft t\u1ea1i th\u1eddi \u0111i\u1ec3m x\u00e2y d\u1ef1ng, ch\u1eb3ng h\u1ea1n nh\u01b0 b\u00e0i \u0111\u0103ng tr\u00ean <a href=\"https:\/\/fstack.io.vn\/blog\/\">blog<\/a> t\u0129nh ho\u1eb7c trang s\u1ea3n ph\u1ea9m.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7483957 elementor-widget elementor-widget-heading\" data-id=\"7483957\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"Ket_xuat_dong_Dynamic_Rendering\"><\/span>K\u1ebft xu\u1ea5t \u0111\u1ed9ng (Dynamic Rendering)<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1529eb5 elementor-widget elementor-widget-text-editor\" data-id=\"1529eb5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>V\u1edbi Dynamic Rendering, c\u00e1c tuy\u1ebfn \u0111\u01b0\u1eddng \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb cho t\u1eebng ng\u01b0\u1eddi d\u00f9ng t\u1ea1i th\u1eddi \u0111i\u1ec3m y\u00eau c\u1ea7u.<\/p><p>Dynamic rendering h\u1eefu \u00edch khi m\u1ed9t tuy\u1ebfn \u0111\u01b0\u1eddng c\u00f3 d\u1eef li\u1ec7u \u0111\u01b0\u1ee3c c\u00e1 nh\u00e2n h\u00f3a cho ng\u01b0\u1eddi d\u00f9ng ho\u1eb7c c\u00f3 th\u00f4ng tin ch\u1ec9 c\u00f3 th\u1ec3 bi\u1ebft t\u1ea1i th\u1eddi \u0111i\u1ec3m y\u00eau c\u1ea7u, ch\u1eb3ng h\u1ea1n nh\u01b0 cookie ho\u1eb7c tham s\u1ed1 t\u00ecm ki\u1ebfm c\u1ee7a URL.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d865439 elementor-widget elementor-widget-text-editor\" data-id=\"d865439\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Trong h\u1ea7u h\u1ebft c\u00e1c trang web, c\u00e1c tuy\u1ebfn \u0111\u01b0\u1eddng kh\u00f4ng ho\u00e0n to\u00e0n t\u0129nh ho\u1eb7c ho\u00e0n to\u00e0n \u0111\u1ed9ng &#8211; \u0111\u00f3 l\u00e0 m\u1ed9t quang ph\u1ed5. V\u00ed d\u1ee5: b\u1ea1n c\u00f3 th\u1ec3 c\u00f3 m\u1ed9t trang th\u01b0\u01a1ng m\u1ea1i \u0111i\u1ec7n t\u1eed s\u1eed d\u1ee5ng d\u1eef li\u1ec7u s\u1ea3n ph\u1ea9m \u0111\u01b0\u1ee3c l\u01b0u trong b\u1ed9 nh\u1edb \u0111\u1ec7m \u0111\u01b0\u1ee3c x\u00e1c th\u1ef1c l\u1ea1i theo kho\u1ea3ng th\u1eddi gian, nh\u01b0ng c\u0169ng c\u00f3 d\u1eef li\u1ec7u kh\u00e1ch h\u00e0ng \u0111\u01b0\u1ee3c c\u00e1 nh\u00e2n h\u00f3a, kh\u00f4ng \u0111\u01b0\u1ee3c l\u01b0u trong b\u1ed9 nh\u1edb \u0111\u1ec7m.<\/p><p>Trong Next.js, b\u1ea1n c\u00f3 th\u1ec3 c\u00f3 c\u00e1c tuy\u1ebfn \u0111\u01b0\u1eddng \u0111\u01b0\u1ee3c k\u1ebft xu\u1ea5t \u0111\u1ed9ng c\u00f3 c\u1ea3 d\u1eef li\u1ec7u \u0111\u01b0\u1ee3c l\u01b0u trong b\u1ed9 nh\u1edb \u0111\u1ec7m v\u00e0 kh\u00f4ng \u0111\u01b0\u1ee3c l\u01b0u trong b\u1ed9 nh\u1edb \u0111\u1ec7m. \u0110i\u1ec1u n\u00e0y l\u00e0 do RSC Payload v\u00e0 d\u1eef li\u1ec7u \u0111\u01b0\u1ee3c l\u01b0u trong b\u1ed9 nh\u1edb \u0111\u1ec7m ri\u00eang bi\u1ec7t. \u0110i\u1ec1u n\u00e0y cho ph\u00e9p b\u1ea1n ch\u1ecdn k\u1ebft xu\u1ea5t \u0111\u1ed9ng m\u00e0 kh\u00f4ng ph\u1ea3i lo l\u1eafng v\u1ec1 t\u00e1c \u0111\u1ed9ng \u0111\u1ebfn hi\u1ec7u su\u1ea5t c\u1ee7a vi\u1ec7c truy xu\u1ea5t t\u1ea5t c\u1ea3 d\u1eef li\u1ec7u t\u1ea1i th\u1eddi \u0111i\u1ec3m y\u00eau c\u1ea7u.<\/p><p>T\u00ecm hi\u1ec3u th\u00eam v\u1ec1\u00a0<a href=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/caching#full-route-cache\" rel=\"nofollow noopener\" target=\"_blank\">b\u1ed9 nh\u1edb \u0111\u1ec7m to\u00e0n tuy\u1ebfn<\/a>\u00a0v\u00e0\u00a0<a href=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/caching#data-cache\" rel=\"nofollow noopener\" target=\"_blank\">B\u1ed9 nh\u1edb \u0111\u1ec7m d\u1eef li\u1ec7u<\/a>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cf2bb11 elementor-widget elementor-widget-heading\" data-id=\"cf2bb11\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"Chuyen_sang_ket_xuat_dong\"><\/span>Chuy\u1ec3n sang k\u1ebft xu\u1ea5t \u0111\u1ed9ng<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2467d59 elementor-widget elementor-widget-text-editor\" data-id=\"2467d59\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Trong qu\u00e1 tr\u00ecnh render, n\u1ebfu ph\u00e1t hi\u1ec7n ra m\u1ed9t h\u00e0m \u0111\u1ed9ng ho\u1eb7c y\u00eau c\u1ea7u d\u1eef li\u1ec7u ch\u01b0a \u0111\u01b0\u1ee3c l\u01b0u trong b\u1ed9 nh\u1edb \u0111\u1ec7m, Next.js s\u1ebd chuy\u1ec3n sang render \u0111\u1ed9ng to\u00e0n b\u1ed9 tuy\u1ebfn \u0111\u01b0\u1eddng. B\u1ea3ng n\u00e0y t\u00f3m t\u1eaft c\u00e1ch c\u00e1c h\u00e0m \u0111\u1ed9ng v\u00e0 b\u1ed9 nh\u1edb \u0111\u1ec7m d\u1eef li\u1ec7u \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn vi\u1ec7c m\u1ed9t tuy\u1ebfn \u0111\u01b0\u1eddng \u0111\u01b0\u1ee3c render t\u0129nh hay \u0111\u1ed9ng:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dbe219c elementor-widget elementor-widget-text-editor\" data-id=\"dbe219c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<table class=\"w-full table-auto\"><thead><tr><th>Dynamic Functions<\/th><th>Data<\/th><th>Route<\/th><\/tr><\/thead><tbody><tr><td>No<\/td><td>Cached<\/td><td>K\u1ebft xu\u1ea5t t\u0129nh<\/td><\/tr><tr><td>Yes<\/td><td>Cached<\/td><td>K\u1ebft xu\u1ea5t \u0111\u1ed9ng<\/td><\/tr><tr><td>No<\/td><td>Not Cached<\/td><td>K\u1ebft xu\u1ea5t \u0111\u1ed9ng<\/td><\/tr><tr><td>Yes<\/td><td>Not Cached<\/td><td>K\u1ebft xu\u1ea5t \u0111\u1ed9ng<\/td><\/tr><\/tbody><\/table>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8ced8ab elementor-widget elementor-widget-text-editor\" data-id=\"8ced8ab\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Trong b\u1ea3ng tr\u00ean, \u0111\u1ec3 m\u1ed9t tuy\u1ebfn \u0111\u01b0\u1eddng ho\u00e0n to\u00e0n t\u0129nh, t\u1ea5t c\u1ea3 d\u1eef li\u1ec7u ph\u1ea3i \u0111\u01b0\u1ee3c l\u01b0u trong b\u1ed9 nh\u1edb \u0111\u1ec7m. Tuy nhi\u00ean, b\u1ea1n c\u00f3 th\u1ec3 c\u00f3 m\u1ed9t tuy\u1ebfn \u0111\u01b0\u1eddng \u0111\u01b0\u1ee3c k\u1ebft xu\u1ea5t \u0111\u1ed9ng s\u1eed d\u1ee5ng c\u1ea3 d\u1eef li\u1ec7u \u0111\u01b0\u1ee3c l\u01b0u trong b\u1ed9 nh\u1edb \u0111\u1ec7m v\u00e0 kh\u00f4ng \u0111\u01b0\u1ee3c l\u01b0u trong b\u1ed9 nh\u1edb \u0111\u1ec7m.<\/p><p>L\u00e0 m\u1ed9t nh\u00e0 ph\u00e1t tri\u1ec3n, b\u1ea1n kh\u00f4ng c\u1ea7n ph\u1ea3i l\u1ef1a ch\u1ecdn gi\u1eefa k\u1ebft xu\u1ea5t t\u0129nh v\u00e0 k\u1ebft xu\u1ea5t \u0111\u1ed9ng v\u00ec Next.js s\u1ebd t\u1ef1 \u0111\u1ed9ng ch\u1ecdn chi\u1ebfn l\u01b0\u1ee3c k\u1ebft xu\u1ea5t t\u1ed1t nh\u1ea5t cho t\u1eebng tuy\u1ebfn \u0111\u01b0\u1eddng d\u1ef1a tr\u00ean c\u00e1c t\u00ednh n\u0103ng v\u00e0 API \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng. Thay v\u00e0o \u0111\u00f3, b\u1ea1n ch\u1ecdn th\u1eddi \u0111i\u1ec3m l\u01b0u trong b\u1ed9 nh\u1edb \u0111\u1ec7m ho\u1eb7c x\u00e1c th\u1ef1c l\u1ea1i d\u1eef li\u1ec7u c\u1ee5 th\u1ec3 v\u00e0 b\u1ea1n c\u00f3 th\u1ec3 ch\u1ecdn ph\u00e1t tr\u1ef1c tuy\u1ebfn c\u00e1c ph\u1ea7n c\u1ee7a UI.<\/p><p>H\u00e0m \u0111\u1ed9ng<br \/>C\u00e1c h\u00e0m \u0111\u1ed9ng d\u1ef1a tr\u00ean th\u00f4ng tin ch\u1ec9 c\u00f3 th\u1ec3 bi\u1ebft \u0111\u01b0\u1ee3c t\u1ea1i th\u1eddi \u0111i\u1ec3m y\u00eau c\u1ea7u nh\u01b0 cookie c\u1ee7a ng\u01b0\u1eddi d\u00f9ng, ti\u00eau \u0111\u1ec1 y\u00eau c\u1ea7u hi\u1ec7n t\u1ea1i ho\u1eb7c tham s\u1ed1 t\u00ecm ki\u1ebfm c\u1ee7a URL. Trong Next.js, c\u00e1c API \u0111\u1ed9ng n\u00e0y l\u00e0:<\/p><ul><li><a href=\"https:\/\/nextjs.org\/docs\/app\/api-reference\/functions\/cookies\" rel=\"nofollow noopener\" target=\"_blank\"><code>cookies()<\/code><\/a><\/li><li><a href=\"https:\/\/nextjs.org\/docs\/app\/api-reference\/functions\/headers\" rel=\"nofollow noopener\" target=\"_blank\"><code>headers()<\/code><\/a><\/li><li><a href=\"https:\/\/nextjs.org\/docs\/app\/api-reference\/functions\/unstable_noStore\" rel=\"nofollow noopener\" target=\"_blank\"><code>unstable_noStore()<\/code><\/a><\/li><li><a href=\"https:\/\/nextjs.org\/docs\/app\/api-reference\/functions\/unstable_after\" rel=\"nofollow noopener\" target=\"_blank\"><code>unstable_after()<\/code><\/a>:<\/li><li><a href=\"https:\/\/nextjs.org\/docs\/app\/api-reference\/file-conventions\/page#searchparams-optional\" rel=\"nofollow noopener\" target=\"_blank\"><code>searchParams<\/code>\u00a0prop<\/a><\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e911ec0 elementor-widget elementor-widget-heading\" data-id=\"e911ec0\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"Streaming\"><\/span>Streaming<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f63d9b7 elementor-widget elementor-widget-image\" data-id=\"f63d9b7\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"263\" src=\"https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/10\/sequential-parallel-data-fetching-1024x336.avif\" class=\"attachment-large size-large wp-image-1589\" alt=\"Streaming\" srcset=\"https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/10\/sequential-parallel-data-fetching-1024x336.avif 1024w, https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/10\/sequential-parallel-data-fetching-300x98.avif 300w, https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/10\/sequential-parallel-data-fetching-768x252.avif 768w, https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/10\/sequential-parallel-data-fetching-1536x504.avif 1536w, https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/10\/sequential-parallel-data-fetching.avif 1600w\" sizes=\"(max-width: 800px) 100vw, 800px\" title=\"\">\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b5dabb9 elementor-widget elementor-widget-text-editor\" data-id=\"b5dabb9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Streaming cho ph\u00e9p b\u1ea1n render UI d\u1ea7n d\u1ea7n t\u1eeb m\u00e1y ch\u1ee7. C\u00f4ng vi\u1ec7c \u0111\u01b0\u1ee3c chia th\u00e0nh c\u00e1c ph\u1ea7n v\u00e0 stream \u0111\u1ebfn m\u00e1y kh\u00e1ch khi n\u00f3 s\u1eb5n s\u00e0ng. \u0110i\u1ec1u n\u00e0y cho ph\u00e9p ng\u01b0\u1eddi d\u00f9ng xem c\u00e1c ph\u1ea7n c\u1ee7a trang ngay l\u1eadp t\u1ee9c, tr\u01b0\u1edbc khi to\u00e0n b\u1ed9 n\u1ed9i dung k\u1ebft th\u00fac render.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f8e6219 elementor-widget elementor-widget-image\" data-id=\"f8e6219\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"800\" height=\"392\" src=\"https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/10\/server-rendering-with-streaming-1024x502.avif\" class=\"attachment-large size-large wp-image-1590\" alt=\"server-rendering-with-streaming\" srcset=\"https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/10\/server-rendering-with-streaming-1024x502.avif 1024w, https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/10\/server-rendering-with-streaming-300x147.avif 300w, https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/10\/server-rendering-with-streaming-768x377.avif 768w, https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/10\/server-rendering-with-streaming-1536x754.avif 1536w, https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/10\/server-rendering-with-streaming.avif 1600w\" sizes=\"(max-width: 800px) 100vw, 800px\" title=\"\">\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a36d6c9 elementor-widget elementor-widget-text-editor\" data-id=\"a36d6c9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Streaming \u0111\u01b0\u1ee3c t\u00edch h\u1ee3p s\u1eb5n trong Next.js App Router theo m\u1eb7c \u0111\u1ecbnh. \u0110i\u1ec1u n\u00e0y gi\u00fap c\u1ea3i thi\u1ec7n c\u1ea3 hi\u1ec7u su\u1ea5t t\u1ea3i trang ban \u0111\u1ea7u c\u0169ng nh\u01b0 UI ph\u1ee5 thu\u1ed9c v\u00e0o vi\u1ec7c truy xu\u1ea5t d\u1eef li\u1ec7u ch\u1eadm h\u01a1n, \u0111i\u1ec1u n\u00e0y s\u1ebd ch\u1eb7n vi\u1ec7c hi\u1ec3n th\u1ecb to\u00e0n b\u1ed9 tuy\u1ebfn \u0111\u01b0\u1eddng. V\u00ed d\u1ee5: \u0111\u00e1nh gi\u00e1 tr\u00ean trang s\u1ea3n ph\u1ea9m.<\/p><p>B\u1ea1n c\u00f3 th\u1ec3 b\u1eaft \u0111\u1ea7u streaming c\u00e1c ph\u00e2n \u0111o\u1ea1n tuy\u1ebfn \u0111\u01b0\u1eddng b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng loading.js v\u00e0 c\u00e1c th\u00e0nh ph\u1ea7n UI v\u1edbi React Suspense. Xem ph\u1ea7n Loading UI v\u00e0 Streaming \u0111\u1ec3 bi\u1ebft th\u00eam th\u00f4ng tin.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-27d70cd elementor-widget elementor-widget-text-editor\" data-id=\"27d70cd\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>b\u1ea1n c\u00f3 th\u1ec3 \u0111\u1ecdc th\u00eam <a href=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/rendering\/server-components\" rel=\"nofollow noopener\" target=\"_blank\">t\u1ea1i \u0111\u00e2y\u00a0<\/a><\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Server Components React Server Components cho ph\u00e9p b\u1ea1n vi\u1ebft UI c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c render v\u00e0 t\u00f9y ch\u1ecdn l\u01b0u v\u00e0o b\u1ed9 nh\u1edb \u0111\u1ec7m tr\u00ean m\u00e1y ch\u1ee7. Trong Next.js, c\u00f4ng vi\u1ec7c render \u0111\u01b0\u1ee3c chia nh\u1ecf h\u01a1n n\u1eefa theo c\u00e1c ph\u00e2n \u0111o\u1ea1n tuy\u1ebfn \u0111\u01b0\u1eddng \u0111\u1ec3 cho ph\u00e9p streaming v\u00e0 render m\u1ed9t ph\u1ea7n, v\u00e0 c\u00f3 ba chi\u1ebfn l\u01b0\u1ee3c render [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1584,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[25,1],"tags":[40],"class_list":["post-1583","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-nextjs","category-cong-nghe","tag-server-component"],"acf":[],"jetpack_featured_media_url":"https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/10\/netlify-static-site-generation-diagram.webp","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/posts\/1583","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/comments?post=1583"}],"version-history":[{"count":10,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/posts\/1583\/revisions"}],"predecessor-version":[{"id":2316,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/posts\/1583\/revisions\/2316"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/media\/1584"}],"wp:attachment":[{"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/media?parent=1583"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/categories?post=1583"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/tags?post=1583"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}