{"id":3510,"date":"2023-08-29T17:10:31","date_gmt":"2023-08-29T10:10:31","guid":{"rendered":"https:\/\/www.marketenterprise.vn\/blog\/?p=3510"},"modified":"2023-09-07T18:41:13","modified_gmt":"2023-09-07T11:41:13","slug":"fresh-vs-nextjs","status":"publish","type":"post","link":"https:\/\/www.marketenterprise.vn\/blog\/fresh-vs-nextjs.html","title":{"rendered":"Kh\u00e1m ph\u00e1 v\u00e0 so s\u00e1nh 2 framework Fresh v\u00e0 Nextjs"},"content":{"rendered":"<h2>GI\u1edaI THI\u1ec6U NEXTJS VS FRESH:<\/h2>\n<ul>\n<li style=\"font-weight: 400;\"><a href=\"https:\/\/l.workplace.com\/l.php?u=https%3A%2F%2Ffresh.deno.dev%2Fdocs%2Fintroduction&amp;h=AT20AaUnJFf-yiJWYf_fAAZNVeHhmb6jiIxgxqTzeN-zr8FqOotH-Lh-scfvRFOeP-DDUgy8YW8CBjx-5VPXJYaau0wDV8NIYrcFsoAVPJz6xPMHN8FLxf_QwTqB9YMrd6Ji0jlOF6S7awH2qEQv6MbjiF5a4qwsgbE&amp;__tn__=-UK-R&amp;c[0]=AT09B42vRIj7RSPqnkmyKUI9uSOCMpBesKR5KJbMyXaLPnq3dzrQct_ZZpErsGQqVrZdb9UuV9L02rMrHicWL7AdTXle_JPjztRiCMf_VO9R-kSOtm01xBelj5u9pnV73_SxpkdXlf6tItu5-GmhmRSCf-aYIQ8tlZNlXhk2y5gwL4nq1RNbwTBXnBLLng8ShZNPiJkXQTjS51HBqkeYbw\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Fresh<\/span><\/a><span style=\"font-weight: 400;\">:<\/span>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Deno Fresh x\u00e2y d\u1ef1ng c\u00e1c trang web theo k\u1ebft xu\u1ea5t ph\u00eda m\u00e1y ch\u1ee7 (SSR). C\u00f3 c\u1ea5u h\u00ecnh \u0111\u01a1n gi\u1ea3n v\u00e0 d\u1ef1a tr\u00ean c\u00e1c API Web.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Deno l\u00e0 Runtime Environment cho Javascript v\u00e0 TypeScript, s\u1eed d\u1ee5ng V8 Engine v\u00e0 ng\u00f4n ng\u1eef l\u1eadp tr\u00ecnh Rust. Deno c\u00f3 m\u1ed9t s\u1ed1 \u0111i\u1ec3m n\u1ed5i b\u1eadt nh\u01b0:<\/span>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">B\u1ea3o m\u1eadt theo m\u1eb7c \u0111\u1ecbnh. Kh\u00f4ng th\u1ec3 truy c\u1eadp c\u00e1c m\u00f4-\u0111un khi ch\u01b0a \u0111\u01b0\u1ee3c enabled.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">H\u1ed7 tr\u1ee3 TypeScript.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">H\u1ec7 th\u1ed1ng m\u00f4-\u0111un chu\u1ea9n ho\u00e1 \u0111\u01b0\u1ee3c \u0111\u1ea3m b\u1ea3o ho\u1ea1t \u0111\u1ed9ng v\u1edbi Deno.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Ch\u1ec9 g\u1eedi duy nh\u1ea5t m\u1ed9t t\u1eadp tin.<\/span><\/li>\n<\/ul>\n<\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">C\u00f9ng t\u00ecm hi\u1ec3u m\u1ed9t \u00edt v\u1ec1 Deno:<\/span>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Theo t\u00e1c gi\u1ea3, b\u1ea3o m\u1eadt l\u00e0 m\u1ed9t trong nh\u1eefng t\u00ednh n\u0103ng quan tr\u1ecdng nh\u1ea5t c\u1ee7a Deno.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Tr\u00e1i ng\u01b0\u1ee3c v\u1edbi Node, Deno m\u1eb7c \u0111\u1ecbnh th\u1ef1c thi trong m\u00f4i tr\u01b0\u1eddng \u1ea3o ho\u00e1 (sandbox), \u0111i\u1ec1u \u0111\u00f3 c\u00f3 ngh\u0129a l\u00e0 Runtime kh\u00f4ng c\u00f3 quy\u1ec1n truy c\u1eadp v\u00e0o:<\/span>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">C\u00e1c file h\u1ec7 th\u1ed1ng<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">H\u1ec7 th\u1ed1ng m\u1ea1ng<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">C\u00e1c k\u1ecbch b\u1ea3n kh\u00e1c nhau<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">C\u00e1c bi\u1ebfn m\u00f4i tr\u01b0\u1eddng<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li style=\"font-weight: 400;\"><a href=\"https:\/\/l.workplace.com\/l.php?u=https%3A%2F%2Fnextjs.org%2Fdocs&amp;h=AT3yIHg_y8t1DbaUc81xElIHk7uz_co-3NcJqx24DbR2gcMox72HBgUAh4smiESSl_vlZd5QSWkqck0TXhhrtLDTQK63fG6VH8HdO_LWtmDptH9XK4G4HB9lm9hxtLFWk0Gwf5wAKS3PkM1ozSTYqtDe_sEt5PnhWko&amp;__tn__=-UK-R&amp;c[0]=AT09B42vRIj7RSPqnkmyKUI9uSOCMpBesKR5KJbMyXaLPnq3dzrQct_ZZpErsGQqVrZdb9UuV9L02rMrHicWL7AdTXle_JPjztRiCMf_VO9R-kSOtm01xBelj5u9pnV73_SxpkdXlf6tItu5-GmhmRSCf-aYIQ8tlZNlXhk2y5gwL4nq1RNbwTBXnBLLng8ShZNPiJkXQTjS51HBqkeYbw\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Nextjs<\/span><\/a><span style=\"font-weight: 400;\">:<\/span>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Next.js l\u00e0 m\u1ed9t framework \u0111\u01b0\u1ee3c ph\u00e1t tri\u1ec3n tr\u00ean n\u1ec1n c\u1ee7a React. Ch\u00ednh v\u00ec d\u1ef1a tr\u00ean n\u1ec1n c\u1ee7a React n\u00ean Next.js mang nh\u1eefng c\u1ed1t l\u00f5i t\u01b0\u01a1ng t\u1ef1 nh\u01b0 React. Next.js cung c\u1ea5p cho ch\u00fang ta nh\u1eefng \u01b0u th\u1ebf m\u1edbi v\u00e0 v\u01b0\u1ee3t tr\u1ed9i m\u00e0 \u1edf React kh\u00f4ng c\u00f3 \u0111\u01b0\u1ee3c. Next.js gi\u00fap c\u00e1c nh\u00e0 ph\u00e1t tri\u1ec3n t\u1ea1o ra c\u00e1c \u1ee9ng d\u1ee5ng c\u00f3 hi\u1ec7u su\u1ea5t t\u1ed1t v\u00e0 web t\u0129nh si\u00eau nhanh. \u0110i\u1ec1u n\u00e0y \u0111\u01b0\u1ee3c ch\u1ee9ng minh khi c\u00e1c t\u00ean tu\u1ed5i l\u1edbn \u0111ang s\u1eed d\u1ee5ng Next.js nh\u01b0: Netflix, Uber, GitHub, Twitch,\u2026<\/span><\/li>\n<li style=\"font-weight: 400;\"><a href=\"https:\/\/l.workplace.com\/l.php?u=https%3A%2F%2Fkb.pavietnam.vn%2Fnextjs-la-gi-1-vai-uu-nhuoc-diem-cua-nextjs.html&amp;h=AT1vaEE2UWk3s1AYJe0_bdBsSHdzLevHhU4drVbVgA-zenzsmKdDNrg_gSPc4kyIrxI6nzbi-sOnYdFCmFadkU-Aov6e6jieI5ZJQwaKWcHVpzkxVbtImT3alILucnTJ1LRLm-P8tGaEbtdAqU7D7NVK5FDfpr9gR04&amp;__tn__=-UK-R&amp;c[0]=AT09B42vRIj7RSPqnkmyKUI9uSOCMpBesKR5KJbMyXaLPnq3dzrQct_ZZpErsGQqVrZdb9UuV9L02rMrHicWL7AdTXle_JPjztRiCMf_VO9R-kSOtm01xBelj5u9pnV73_SxpkdXlf6tItu5-GmhmRSCf-aYIQ8tlZNlXhk2y5gwL4nq1RNbwTBXnBLLng8ShZNPiJkXQTjS51HBqkeYbw\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">\u0110\u1eb7c \u0111i\u1ec3m ch\u00ednh:<\/span><\/a>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Image Optimization: T\u1ef1 \u0111\u1ed9ng t\u1ed1i \u01b0u h\u00f3a h\u00ecnh \u1ea3nh, cho ph\u00e9p thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc. Chuy\u1ec3n h\u00ecnh \u1ea3nh l\u1edbn \u0111\u1ebfn c\u00e1c thi\u1ebft b\u1ecb nh\u1ecf h\u01a1n. T\u1ed1i \u01b0u h\u00f3a h\u00ecnh \u1ea3nh theo y\u00eau c\u1ea7u, \u0111i\u1ec1u n\u00e0y kh\u00f4ng l\u00e0m gi\u1ea3m t\u1ed1c \u0111\u1ed9 t\u1ea3i c\u1ea3u website.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Internationalization: H\u1ed7 tr\u1ee3 \u0111inh tuy\u1ebfn qu\u1ed1c t\u1ebf t\u1eeb b\u1ea3n v10.0.0 . B\u1ea1n c\u00f3 th\u1ec3 cung c\u1ea5p c\u00e1c ng\u00f4n ng\u1eef, ng\u00f4n ng\u1eef m\u1eb7c \u0111\u1ecbnh v\u00e0 ng\u00f4n ng\u1eef mi\u1ec1n c\u1ee5 th\u1ec3. Nextjs s\u1ebd t\u1ef1 \u0111\u1ed9ng x\u1eed l\u00ed vi\u1ec7c \u0111\u1ecbnh tuy\u1ebfn.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">NextJS Analytics: V\u1edbi vi\u1ec7c \u0111i\u1ec1u c\u1ea7n thi\u1ebft cho s\u1ef1 ph\u00e1t tri\u1ec3n khi ki\u1ec3m tra xem ng\u01b0\u1eddi d\u00f9ng \u0111ang tr\u1ea3i nghi\u1ec7m \u1ee9ng d\u1ee5ng nh\u01b0 th\u1ebf n\u00e0o. NextJS cung c\u1ea5p t\u00ednh n\u0103ng v\u1edbi ch\u1ebf \u0111\u1ed9 xem Analytics, gi\u00fap b\u1ea1n c\u00f3 \u0111\u01b0\u1ee3c th\u00f4ng tin v\u1ec1 \u0111i\u1ec3m s\u1ed1 v\u00e0 d\u1eef li\u1ec7u thay \u0111\u1ed5i t\u1ed5ng quan.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Zero Config: T\u1ef1 \u0111\u1ed9ng th\u1ef1c hi\u1ec7n bi\u00ean d\u1ecbch v\u00e0 \u0111\u00f3ng g\u00f3i t\u1ef1 \u0111\u1ed9ng. T\u1ed1i \u01b0u h\u00f3a cho s\u1ea3n ph\u1ea9m ngay t\u1eeb \u0111\u1ea7u.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Hybrid SSG v\u00e0 SSR : S\u1eed d\u1ee5ng c\u01a1 ch\u1ebf Pre-render \u0111\u1ec3 buil-time v\u00e0 request time \u1edf (SSR) trong d\u1ef1 \u00e1n Single.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Incremental Static Regeneration: Nextjs cho ph\u00e9p b\u1ea1n t\u1ea1o ho\u1eb7c c\u1eadp nh\u1eadt c\u00e1c trang t\u0129nh sau khi x\u00e2y d\u1ef1ng trang web c\u1ee7a m\u00ecnh. T\u00e1i t\u1ea1o t\u0129nh t\u0103ng d\u1ea7n cho ph\u00e9p b\u1ea1n s\u1eed d\u1ee5ng t\u1ea1o t\u0129nh tr\u00ean n\u1ec1n m\u00e0 kh\u00f4ng c\u1ea7n ph\u1ea3i x\u00e2y d\u1ef1ng l\u1ea1i to\u00e0n b\u1ed9 trang web.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">TypeScript Support: T\u1ef1 \u0111\u1ed9ng h\u1ed7 tr\u1ee3 c\u1ea5u h\u00ecnh TypeScript v\u00e0 bi\u00ean d\u1ecbch.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Fast Refresh: M\u1ed9t t\u00ednh n\u0103ng c\u1ef1c k\u00ec hay v\u00e0 th\u00fa v\u1ecb cho ph\u00e9p ph\u1ea3n h\u1ed3i t\u1ee9c th\u1eddi v\u1ec1 c\u00e1c ch\u1ec9nh s\u1eeda \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n \u0111\u1ed1i v\u1edbi c\u00e1c th\u00e0nh ph\u1ea7n tr\u00ean d\u1ef1 \u00e1n c\u1ee7a b\u1ea1n. \u0110\u1ec9nh \u0111i\u1ec3m l\u00e0 ch\u1ec9nh s\u1eeda c\u00e1c hi\u1ec3n th\u1ecb nhanh trong v\u00f2ng m\u1ed9t \u0111\u1ebfn hai gi\u00e2y m\u00e0 kh\u00f4ng l\u00e0m m\u1ea5t tr\u1ea1ng th\u00e1i hi\u1ec7n t\u1ea1i.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">File-system Routing: Nextjs cung c\u1ea5p cho ch\u00fang ta m\u1ed9t b\u1ed9 \u0111\u1ecbnh tuy\u1ebfn d\u1ef1a tr\u00ean h\u1ec7 th\u1ed1ng c\u00e1c t\u1ec7p \u0111\u01b0\u1ee3c x\u00e2y d\u1ef1ng v\u1ec1 trang (pages). Khi t\u1ec7p \u0111\u01b0\u1ee3c th\u00eam v\u00e0o th\u01b0 m\u1ee5c pages, n\u00f3 s\u1ebd \u0111\u01b0\u1ee3c t\u1ea1o d\u1ef1ng s\u1eb3n d\u01b0\u1edbi d\u1ea1ng m\u1ed9t tuy\u1ebfn. C\u00e1c t\u1ec7p b\u00ean trong c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng h\u1ea7u h\u1ebft ph\u1ed5 bi\u1ebfn.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">API Routes: \u0110\u00e2y l\u00e0 m\u1ed9t t\u00ednh n\u0103ng th\u00fa v\u1ecb v\u00e0 m\u1ea1nh m\u1ebd, Nextjs cung c\u1ea5p cho ch\u00fang ta \u0111\u1ec3 t\u1ea1o \u0111i\u1ec3m cu\u1ed1i API trong \u1ee9ng d\u1ee5ng Nextjs. C\u00e1c tuy\u1ebfn API ho\u1ea1t \u0111\u1ed9ng d\u01b0\u1edbi d\u1ea1ng \/pages\/api\/ trong th\u01b0 m\u1ee5c v\u00e0 \u0111\u01b0\u1ee3c h\u01b0\u1edbng t\u1edbi api \u0111i\u1ec3m cu\u1ed1i th\u01b0 m\u1ee5c.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Built-In CSS Support: Nextjs cho ph\u00e9p b\u1ea1n nh\u1eadp t\u1ec7p CSS t\u1eeb m\u00f4t t\u1ec7p Javascript. B\u1ea1n ch\u1ec9 c\u1ea7n t\u1ea1o 1 file CSS v\u00e0 import tr\u1ef1c ti\u1ebfp n\u00f3 v\u00e0o file Javascript. V\u00e0 m\u1ecdi th\u1ee9 b\u1eaft \u0111\u1ea7u ho\u1ea1t \u0111\u1ed9ng nh\u01b0 c\u00e1ch ch\u00fang ta mu\u1ed1n.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Code-splitting and Bundling: H\u1ed7 tr\u1ee3 thu\u1eadt to\u00e1n t\u00e1ch g\u00f3i \u0111\u01b0\u1ee3c t\u1ed1i \u01b0u h\u00f3a \u0111\u01b0\u1ee3c t\u1ea1o b\u1edfi nh\u00f3m Google Chrome.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2>KH\u00c1C NHAU C\u01a0 B\u1ea2N:<\/h2>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Fresh:<\/span>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">S\u1eed d\u1ee5ng ESM nh\u01b0 ki\u1ec3u CDN k\u1ebft n\u1ed1i nhanh ch\u00f3ng cho c\u00e1c g\u00f3i NPM v\u1edbi \u0111\u1ecbnh d\u1ea1ng ESM.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2023\/08\/28183634\/image1.jpg\" alt=\"S\u1eed d\u1ee5ng esm nh\u01b0 ki\u1ec3u edm\" width=\"504\" height=\"50\" class=\"aligncenter wp-image-3512 size-full\" srcset=\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2023\/08\/28183634\/image1.jpg 504w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2023\/08\/28183634\/image1-300x30.jpg 300w\" sizes=\"auto, (max-width: 504px) 100vw, 504px\" \/><\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Qu\u00e1 tr\u00ecnh hydrat ho\u00e1 ch\u1ec9 s\u1ea3y ra \u1edf nh\u1eefng file trong th\u01b0 m\u1ee5c island. C\u00f2n l\u1ea1i nh\u1eefng file \u1edf th\u01b0 m\u1ee5c components s\u1ebd \u0111\u01b0\u1ee3c build th\u00e0nh file html. <\/span><span style=\"font-weight: 400;\">VD: C\u00f9ng m\u1ed9t ch\u1ee9c n\u0103ng \u0111\u1ebfm Count:<\/span>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">N\u1ebfu \u0111\u1eb7t Count.tsx \u1edf component th\u00ec ch\u1ee9c n\u0103ng kh\u00f4ng ho\u1ea1t \u0111\u1ed9ng<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2023\/08\/28183641\/image4-1024x439.jpg\" alt=\"Counter.tsx trong components\" width=\"504\" class=\"aligncenter wp-image-3515\" srcset=\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2023\/08\/28183641\/image4-1024x439.jpg 1024w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2023\/08\/28183641\/image4-300x129.jpg 300w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2023\/08\/28183641\/image4-768x329.jpg 768w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2023\/08\/28183641\/image4.jpg 1026w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2023\/08\/28183646\/image6.jpg\" alt=\"Kh\u00f4ng ch\u1ea1y \u0111\u01b0\u1ee3c\" width=\"504\" class=\"aligncenter wp-image-3517\" srcset=\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2023\/08\/28183646\/image6.jpg 530w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2023\/08\/28183646\/image6-300x101.jpg 300w\" sizes=\"(max-width: 530px) 100vw, 530px\" \/><\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">N\u1ebfu \u0111\u1eb7t Count.tsx \u1edf islands th\u00ec ch\u1ee9c n\u0103ng m\u1edbi ho\u1ea1t \u0111\u1ed9ng<\/span><img decoding=\"async\" src=\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2023\/08\/28183644\/image5.jpg\" alt=\"Counter.tsx trong Islands\" width=\"504\" class=\"aligncenter wp-image-3516\" srcset=\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2023\/08\/28183644\/image5.jpg 866w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2023\/08\/28183644\/image5-300x160.jpg 300w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2023\/08\/28183644\/image5-768x410.jpg 768w\" sizes=\"(max-width: 866px) 100vw, 866px\" \/><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2023\/08\/28183638\/image3.jpg\" alt=\"Counter trong islands m\u1edbi ch\u1ea1y \u0111\u01b0\u1ee3c\" width=\"504\" class=\"aligncenter wp-image-3514\" srcset=\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2023\/08\/28183638\/image3.jpg 516w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2023\/08\/28183638\/image3-300x99.jpg 300w\" sizes=\"(max-width: 516px) 100vw, 516px\" \/><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Nextjs:<\/span>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">V\u1eabn s\u1eed d\u1ee5ng ki\u1ec3u import npm th\u00f4ng qua node_modules b\u1eb1ng c\u00e1ch d\u00f9ng npm install<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2023\/08\/28183636\/image2.jpg\" alt=\"Component trong NextJS\" width=\"504\" class=\"aligncenter wp-image-3513\" srcset=\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2023\/08\/28183636\/image2.jpg 1000w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2023\/08\/28183636\/image2-300x42.jpg 300w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2023\/08\/28183636\/image2-768x108.jpg 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Qu\u00e1 tr\u00ecnh hydrat ho\u00e1 \u1edf to\u00e0n file<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2>GI\u1ed0NG NHAU C\u01a0 B\u1ea2N:<\/h2>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Fresh &#8211; Nextjs:<\/span>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">\u0110\u1ec1u d\u00f9ng File-system routing<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">\u0110\u1ec1u \u0111\u01b0\u1ee3c ph\u00e1t tri\u1ec3n tr\u00ean n\u1ec1n t\u1ea3ng React<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">\u0110\u1ec1u l\u00e0 nh\u1eefng framework nh\u1eb9 v\u00e0 h\u1ed7 tr\u1ee3 SEO t\u1ed1t<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2>\u01afU \u0110I\u1ec2M:<\/h2>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Fresh:<\/span>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">C\u00e1c components ki\u1ec3u island th\u00ec nh\u1eefng page c\u1ea7n c\u00f3 t\u01b0\u01a1ng t\u00e1c \u1edf ph\u00eda m\u00e1y kh\u00e1ch th\u00ec s\u1ebd \u0111\u01b0\u1ee3c \u0111\u1eb7t \u1edf th\u01b0 m\u1ee5c island \u0111\u1ec3 qu\u00e1 tr\u00ecnh Hydrat ho\u00e1 ch\u1ec9 s\u1ea3y ra \u1edf nh\u1eefng th\u01b0 m\u1ee5c n\u00e0y th\u00f4i, gi\u00fap gi\u1ea3m th\u1eddi gian t\u1ea3i c\u1ee7a trang web. Nh\u1eb1m m\u1ee5c \u0111\u00edch gi\u1ea3m kh\u1ed1i l\u01b0\u1ee3ng JavaScript \u0111\u01b0\u1ee3c chuy\u1ec3n \u0111\u1ebfn ph\u00eda m\u00e1y kh\u00e1ch. \u0110i\u1ec1u n\u00e0y l\u00e0m t\u0103ng \u0111\u00e1ng k\u1ec3 hi\u1ec7u su\u1ea5t v\u00ec m\u00e1y ch\u1ee7 s\u1ebd g\u1eedi c\u00e0ng \u00edt m\u00e3 c\u00e0ng t\u1ed1t cho m\u00e1y kh\u00e1ch (tr\u00ecnh duy\u1ec7t).<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Deno Fresh s\u1eed d\u1ee5ng just-in-time \u0111\u1ec3 k\u1ebft xu\u1ea5t tr\u00ean m\u00e1y ch\u1ee7, c\u00f3 ngh\u0129a l\u00e0 m\u00e3 \u0111\u01b0\u1ee3c bi\u00ean d\u1ecbch khi c\u1ea7n.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Fresh kh\u00f4ng cung c\u1ea5p b\u01b0\u1edbc x\u00e2y d\u1ef1ng. B\u1ea5t k\u1ef3 m\u00e3 TypeScript ho\u1eb7c JSX n\u00e0o th\u00e0nh m\u00e3 JavaScript \u0111\u01a1n gi\u1ea3n \u0111\u1ec1u \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n khi c\u1ea7n<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Kh\u00f4ng c\u00f3 b\u01b0\u1edbc x\u00e2y d\u1ef1ng<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Kh\u00f4ng c\u1ea7n c\u1ea5u h\u00ecnh<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">K\u1ebft xu\u1ea5t JIT tr\u00ean m\u00e1y ch\u1ee7 tr\u01b0\u1edbc khi g\u1edfi y\u00eau c\u1ea7u \u0111\u1ebfn m\u00e1y kh\u00e1ch<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Nh\u1ecf &amp; nhanh (khung kh\u00f4ng y\u00eau c\u1ea7u JS \u1ee9ng d\u1ee5ng kh\u00e1ch)<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">T\u00f9y ch\u1ecdn hydrat h\u00f3a ph\u00eda kh\u00e1ch h\u00e0ng c\u1ee7a c\u00e1c th\u00e0nh ph\u1ea7n ri\u00eang l\u1ebb<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Kh\u1ea3 n\u0103ng ph\u1ee5c h\u1ed3i cao nh\u1edd c\u1ea3i ti\u1ebfn li\u00ean t\u1ee5c v\u00e0 s\u1eed d\u1ee5ng c\u00e1c t\u00ednh n\u0103ng c\u1ee7a tr\u00ecnh duy\u1ec7t g\u1ed1c<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">TypeScript \u0111\u01b0\u1ee3c t\u00edch h\u1ee3p s\u1eb5n<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">File-system routing<\/span><\/li>\n<\/ul>\n<\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Nextjs:<\/span>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">M\u1ea1ng l\u1ea1i kh\u1ea3 n\u0103ng SEO t\u1ed1t<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng t\u1ed1t h\u01a1n<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">L\u00e0m vi\u1ec7c v\u1edbi c\u01a1 ch\u1ebf SSG (Static Site Generation) , SSR (Server Side Rendering) v\u00e0 c\u1ea3 CSR (Client Side Rendering)<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Kh\u1edfi t\u1ea1o nhanh ch\u00f3ng<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">H\u1ed7 tr\u1ee3 n\u1ec1n React c\u1ef1c k\u00ec t\u1ed1t<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">H\u1ed7 tr\u1ee3 c\u1ea5u tr\u00fac v\u00e0 t\u1ed5 h\u1ee3p m\u1ed9t c\u00e1ch t\u1ed1i \u01b0u<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">H\u1ed7 tr\u1ee3 ph\u00e1t tri\u1ec3n t\u00ednh n\u0103ng nhanh ch\u00f3ng cho vi\u1ec7c c\u1ea5u h\u00ecnh nh\u01b0: Webpack, Babel,\u2026<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">B\u1ea3o m\u1eadt v\u1ec1 d\u1eef li\u1ec7u<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Kh\u1ea3 n\u0103ng th\u00edch \u1ee9ng v\u00e0 \u0111\u00e1p \u1ee9ng thay \u0111\u1ed5i<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">\u0110\u01b0\u1ee3c ra \u0111\u1eddi l\u00e2u n\u00ean ph\u00f9 h\u1ee3p v\u1edbi m\u1ecdi d\u1ef1 \u00e1n h\u01a1n, ph\u00f9 h\u1ee3p \u0111\u1ec3 ph\u00e1t tri\u1ec3n c\u00e1c d\u1ef1 \u00e1n l\u1edbn h\u01a1n l\u00e0 framework Fresh.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Nextjs cung c\u1ea5p kh\u00e1 nhi\u1ec1u t\u00edch h\u1ee3p s\u1eb5n v\u00e0 gi\u1ea3i ph\u00e1p m\u1eb7c \u0111\u1ecbnh cho vi\u1ec7c x\u00e2y d\u1ef1ng \u1ee9ng d\u1ee5ng web, gi\u00fap gi\u1ea3m thi\u1ec3u vi\u1ec7c ph\u1ea3i t\u1ea1o to\u00e0n b\u1ed9 front-end t\u1eeb \u0111\u1ea7u.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2>NH\u01af\u1ee2C \u0110I\u1ec2M:<\/h2>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Fresh:<\/span>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Tuy l\u00e0 m\u1ed9t framework nh\u1ecf nh\u1eb9 nhanh nh\u01b0ng \u0111\u1ec3 \u0111\u00e1p \u1ee9ng c\u00e1c d\u1ef1 \u00e1n l\u1edbn v\u00e0 n\u1eb7ng th\u00ec v\u1eabn ch\u01b0a \u0111\u01b0\u1ee3c ki\u1ec3m ch\u1ee9ng \u0111\u1ed9 hi\u1ec7u qu\u1ea3. N\u1ebfu trong tr\u01b0\u1eddng h\u1ee3p n\u00e0y th\u00ec d\u00f9ng Nextjs v\u1eabn t\u1ed1t h\u01a1n.<\/span><\/li>\n<\/ul>\n<\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><a href=\"https:\/\/www.marketenterprise.vn\/blog\/gioi-thieu-ve-nextjs-phan-1.html\">Nextjs<\/a>:<\/span>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">\u00cdt plug-in th\u00edch \u1ee9ng<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Next.js b\u1ecb gi\u1edbi h\u1ea1n b\u1edfi vi\u1ec7c ch\u1ec9 s\u1eed d\u1ee5ng b\u1ed9 \u0111\u1ecbnh tuy\u1ebfn tr\u00ean t\u1ec7p c\u1ee7a n\u00f3, b\u1ea1n kh\u00f4ng th\u1ec3 n\u00e0o s\u1eeda \u0111\u1ed5i c\u00e1ch n\u00f3 giao d\u1ecbch v\u1edbi c\u00e1c tuy\u1ebfn. V\u00ec v\u1eady, \u0111\u1ec3 s\u1eed d\u1ee5ng tuy\u1ebfn \u0111\u1ed9ng, b\u1ea1n c\u1ea7n l\u00e0m vi\u1ec7c th\u00eam v\u1edbi Node.js m\u00e1y ch\u1ee7.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>C\u00f9ng t\u00ecm hi\u1ec3u v\u1ec1 2 framework Fresh\ud83c\udf4b vs Nextjs\u25b2, \u0111\u1ec3 t\u1eeb \u0111\u00f3 c\u00e1c b\u1ea1n s\u1ebd c\u00f3 nh\u1eefng l\u1ef1a ch\u1ecdn ph\u00f9 h\u1ee3p cho t\u1eebng d\u1ef1 \u00e1n<\/p>\n","protected":false},"author":36,"featured_media":3521,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3510","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology"],"_links":{"self":[{"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/posts\/3510","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/comments?post=3510"}],"version-history":[{"count":0,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/posts\/3510\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/media\/3521"}],"wp:attachment":[{"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/media?parent=3510"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/categories?post=3510"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/tags?post=3510"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}