docs:32-dịch-4-advanced-sveltekit-page-options (sveltevietnam#67)

Author: tymon3568

content/tutorial/04-advanced-sveltekit/02-page-options/01-page-options/README.md

@@ -1,16 +1,16 @@
 ---
-title: Basics
+title: Cơ bản
 ---
 
-In the chapter on [loading data](/tutorial/page-data), we saw how you can export `load` functions from `+page.js`, `+page.server.js`, `+layout.js` and `+layout.server.js` files. We can also export various **page options** from these modules:
+Trong chương về [tải dữ liệu](/tutorial/page-data), chúng ta đã thấy làm thế nào bạn có thể xuất các hàm `load` từ các tệp `+page.js`, `+page.server.js`, `+layout.js` và `+layout.server.js`. Chúng ta cũng có thể xuất các **tùy chọn trang** từ những module này:
 
-- `ssr` — whether or not pages should be server-rendered
-- `csr` — whether to load the SvelteKit client
-- `prerender` — whether to prerender pages at build time, instead of per-request
-- `trailingSlash` — whether to strip, add, or ignore trailing slashes in URLs
+- `ssr` — nên hoặc không nên render trang trên server
+- `csr` — có nên tải SvelteKit client hay không
+- `prerender` — có nên prerender trang vào thời điểm build, thay vì mỗi request
+- `trailingSlash` — có nên loại bỏ, thêm hoặc bỏ qua dấu gạch chéo sau cùng trong URL
 
-In the following exercises, we'll learn about each of these in turn.
+Trong các bài tập tiếp theo, chúng ta sẽ tìm hiểu về từng tùy chọn này một cách chi tiết.
 
-Page options can apply to individual pages (if exported from `+page.js` or `+page.server.js`), or groups of pages (if exported from `+layout.js` or `+layout.server.js`). To define an option for the whole app, export it from the root layout. Child layouts and pages override values set in parent layouts, so — for example — you can enable prerendering for your entire app then disable it for pages that need to be dynamically rendered.
+Các tùy chọn trang có thể áp dụng cho từng trang cụ thể (nếu được xuất từ `+page.js` hoặc `+page.server.js`), hoặc nhóm các trang (nếu được xuất từ `+layout.js` hoặc `+layout.server.js`). Để xác định một tùy chọn cho toàn bộ ứng dụng, hãy xuất nó từ layout gốc. Layout con và trang sẽ ghi đè các giá trị được đặt trong các layout cha, vì vậy - ví dụ - bạn có thể bật prerender cho toàn bộ ứng dụng của mình, sau đó tắt nó cho các trang cần được render động.
 
-You can mix and match these options in different areas of your app — you could prerender your marketing pages, dynamically server-render your data-driven pages, and treat your admin pages as a client-rendered SPA. This makes SvelteKit very versatile.
+Bạn có thể pha trộn và kết hợp các tùy chọn này trong các khu vực khác nhau của ứng dụng của bạn - bạn có thể prerender các trang tiếp thị, render động trên server các trang dựa trên dữ liệu, và xem xét các trang quản trị của mình như là một SPA có thể render trên client. Điều này làm cho SvelteKit rất linh hoạt.

content/tutorial/04-advanced-sveltekit/02-page-options/01-page-options/app-a/src/routes/+page.svelte

@@ -1 +1 @@
-<h2>Page options</h2>
+<h2>Tùy chọn trang</h2>

content/tutorial/04-advanced-sveltekit/02-page-options/02-ssr/README.md

@@ -2,13 +2,15 @@
 title: ssr
 ---
 
-Server-side rendering (SSR) is the process of generating HTML on the server, and is what SvelteKit does by default. It's important for performance and [resilience](https://kryogenix.org/code/browser/everyonehasjs.html), and is very beneficial for search engine optimization (SEO) — while some search engines can index content that is rendered in the browser with JavaScript, it happens less frequently and reliably.
+Server-side rendering (SSR) là quá trình tạo ra HTML trên máy chủ và là điều mà SvelteKit thực hiện mặc định. Điều này quan trọng cho hiệu suất và [độ bền](https://kryogenix.org/code/browser/everyonehasjs.html), và rất hữu ích để tối ưu hóa công cụ tìm kiếm (SEO) - tuy một số công cụ tìm kiếm có thể đánh chỉ mục nội dung được render trong trình duyệt với JavaScript, điều này xảy ra ít thường xuyên và ít tin cậy hơn.
+
+Tuy nhiên, một số thành phần _không thể_ được render trên server, có thể do chúng mong đợi có thể truy cập các biến toàn cục của trình duyệt như `window` ngay lập tức. Nếu có thể, bạn nên thay đổi những thành phần đó để chúng _có thể_ render trên server, nhưng nếu không thì bạn có thể tắt SSR:
 
-That said, some components _can't_ be rendered on the server, perhaps because they expect to be able to access browser globals like `window` immediately. If you can, you should change those components so that they _can_ render on the server, but if you can't then you can disable SSR:
 
 ```js
 /// file: src/routes/+page.server.js
 export const ssr = false;
 ```
 
-> Setting `ssr` to `false` inside your root `+layout.server.js` effectively turns your entire app into a single-page app (SPA).
+> Đặt `ssr` thành `false` bên trong `+layout.server.js` gốc của bạn thực tế chuyển ứng dụng của bạn thành một ứng dụng một trang đơn (SPA).
+

content/tutorial/04-advanced-sveltekit/02-page-options/03-csr/README.md

@@ -2,13 +2,13 @@
 title: csr
 ---
 
-Client-side rendering is what makes the page interactive — such as incrementing the counter when you click the button in this app — and enables SvelteKit to update the page upon navigation without a full-page reload.
+Client-side rendering làm cho trang có thể tương tác - chẳng hạn như tăng giảm số lần khi bạn nhấp vào nút trong ứng dụng này - và cho phép SvelteKit cập nhật trang sau mỗi lần điều hướng mà không cần tải lại trang.
 
-As with `ssr`, you can disable client-side rendering altogether:
+Tương tự như `ssr`, bạn có thể tắt việc render trên phía client hoàn toàn:
 
 ```js
 /// file: src/routes/+page.server.js
 export const csr = false;
 ```
 
-This means that no JavaScript is served to the client, but it also means that your components are no longer interactive. It can be a useful way to check whether or not your application is usable for people who — for whatever reason — cannot use JavaScript.
+Điều này có nghĩa là không có mã JavaScript nào được đưa đến client, nhưng cũng có nghĩa là các thành phần của bạn không còn tương tác được. Đây có thể là một cách hữu ích để kiểm tra xem ứng dụng của bạn có dùng được đối với những người không sử dụng JavaScript vì bất kỳ lý do nào.

content/tutorial/04-advanced-sveltekit/02-page-options/04-prerender/README.md

@@ -2,21 +2,20 @@
 title: prerender
 ---
 
-Prerendering means generating HTML for a page once, at build time, rather than dynamically for each request.
+Prerendering có nghĩa là tạo HTML cho một trang một lần vào thời điểm build, thay vì linh động tạo HTML cho trang cho mỗi lần có yêu cầu request.
 
-The advantage is that serving static data is extremely cheap and performant, allowing you to easily serve large numbers of users without worrying about cache-control headers (which are easy to get wrong).
+Ưu điểm khi dùng dữ liệu tĩnh là rất rẻ và hiệu suất, cho phép bạn dễ dàng phục vụ một số lượng lớn người dùng mà không phải lo lắng về cache-control headers (cái rất dễ gặp lỗi).
 
-The tradeoff is that the build process takes longer, and prerendered content can only be updated by building and deploying a new version of the application.
-
-To prerender a page, set `prerender` to `true`:
+Đổi lại là quá trình build mất thời gian hơn và nội dung được prerender chỉ có thể được cập nhật bằng cách build và triển khai một phiên bản mới của ứng dụng.
 
+Để prerender một trang, đặt `prerender` thành `true`:
 ```js
 /// file: src/routes/+page.server.js
 export const prerender = true;
 ```
 
-Here in the tutorial, this won't have any observable effect, since the application is running in `dev` mode.
+Trong hướng dẫn này, sẽ không có bất kỳ dấu hiệu nào để bạn quan sát được, vì ứng dụng đang chạy ở chế độ `dev` mode.
 
-Not all pages can be prerendered. The basic rule is this: for content to be prerenderable, any two users hitting it directly must get the same content from the server, and the page must not contain form actions. Pages with dynamic route parameters can be prerendered as long as they are specified in the [`prerender.entries`](https://kit.svelte.dev/docs/configuration#prerender) configuration or can be reached by following links from pages that _are_ in `prerender.entries`.
+Không phải tất cả các trang đều có thể prerender được. Quy tắc cơ bản là: để nội dung có thể prerender, bất kỳ hai người dùng nào truy cập trực tiếp đều phải nhận cùng một nội dung từ server, và trang không được chứa các form actions. Trang có dynamic route parameters _(tham số động trong đường dẫn)_ có thể được prerender miễn là chúng được chỉ định trong cấu hình [`prerender.entries`](https://kit.svelte.dev/docs/configuration#prerender) hoặc có thể được truy cập bằng cách theo các liên kết từ các trang nằm trong `prerender.entries`.
 
-> Setting `prerender` to `true` inside your root `+layout.server.js` effectively turns SvelteKit into a static site generator (SSG).
+> Đặt `prerender` thành `true` trong `+layout.server.js` gốc của bạn về cơ bản biến SvelteKit thành một trình tạo trang tĩnh (SSG).

content/tutorial/04-advanced-sveltekit/02-page-options/05-trailingslash/README.md

@@ -2,24 +2,24 @@
 title: trailingSlash
 ---
 
-Two URLs like `/foo` and `/foo/` might look the same, but they're actually different. A relative URL like `./bar` will resolve to `/bar` in the first case and `/foo/bar` in the second, and search engines will treat them as separate entries, harming your SEO.
+Hai URL như `/foo` và `/foo/` có vẻ giống nhau, nhưng thực sự chúng khác nhau. Một URL tương đối như `./bar` sẽ trở thành `/bar` trong trường hợp đầu tiên và `/foo/bar` trong trường hợp thứ hai, và các công cụ tìm kiếm sẽ xem xét chúng như các mục riêng biệt, ảnh hưởng đến SEO của bạn.
 
-In short, being loosey-goosey about trailing slashes is a bad idea. By default, SvelteKit strips trailing slashes, meaning that a request for `/foo/` will result in a redirect to `/foo`.
+Nói một cách ngắn gọn, việc thoải mái thêm dấu gạch chéo ở cuối là một ý tưởng không hay. Theo mặc định, SvelteKit loại bỏ dấu gạch chéo ở cuối, có nghĩa là một yêu cầu cho `/foo/` sẽ dẫn đến một chuyển hướng đến `/foo`.
 
-If you instead want to ensure that a trailing slash is always present, you can specify the `trailingSlash` option accordingly:
+Nếu bạn muốn thêm một dấu gạch chéo ở cuối, bạn có thể chỉ định tùy chọn `trailingSlash` như sau:
 
 ```js
 /// file: src/routes/always/+page.server.js
 export const trailingSlash = 'always';
 ```
 
-To accommodate both cases (this is not recommended!), use `'ignore'`:
+Để điều chỉnh cả hai trường hợp (điều này không được khuyến khích!), sử dụng `'ignore'`:
 
 ```js
 /// file: src/routes/ignore/+page.server.js
 export const trailingSlash = 'ignore';
 ```
 
-The default value is `'never'`.
+Giá trị mặc định là `'never'`.
 
-Whether or not trailing slashes are applied affects prerendering. A URL like `/always/` will be saved to disk as `always/index.html` whereas a URL like `/never` will be saved as `never.html`.
+Việc áp dụng hay không dấu gạch chéo ở cuối ảnh hưởng đến quá trình prerendering. Một URL như `/always/` sẽ được lưu vào ổ đĩa dưới dạng `always/index.html` trong khi một URL như `/never` sẽ được lưu dưới dạng `never.html`.

content/tutorial/04-advanced-sveltekit/02-page-options/meta.json

@@ -1,3 +1,3 @@
 {
-	"title": "Page options"
+	"title": "Tùy chọn trang"
 }