diff --git a/docs/reference/api-reference.md b/docs/reference/api-reference.md index ec78948dd..3f3d8526b 100644 --- a/docs/reference/api-reference.md +++ b/docs/reference/api-reference.md @@ -171,7 +171,7 @@ Astro will generate an RSS 2.0 feed at `/feed/[collection].xml` (for example, `/ All ESM modules include a `import.meta` property. Astro adds `import.meta.env` through [Snowpack](https://www.snowpack.dev/). -**import.meta.env.SSR** can be used to know when rendering on the server. Some times you might want different logic, for example a component that should only be rendered in the client: +**import.meta.env.SSR** can be used to know when rendering on the server. Sometimes you might want different logic, for example a component that should only be rendered in the client: ```jsx import { h } from 'preact'; diff --git a/docs/src/pages/blog/island-architecture.md b/docs/src/pages/blog/island-architecture.md index 78be15c92..faf1cab2a 100644 --- a/docs/src/pages/blog/island-architecture.md +++ b/docs/src/pages/blog/island-architecture.md @@ -128,7 +128,7 @@ Using ESM in the Browser, tools can build once and cache forever. Tree-shaking a Tools like [Snowpack](https://www.snowpack.dev/) and [Vite](https://vitejs.dev/) introduce a whole new experience that developers were previously denied in their development process and that is speed. -With cut-edge DX features like [HMR](https://npm.io/package/esm-hmr) has quickly became the industry de facto, and build times reduced by a factor of 100x. +With cut-edge DX features like [HMR](https://npm.io/package/esm-hmr) has quickly become the industry de facto, and build times reduced by a factor of 100x. This new generation of ESM tools is extremely encouraging for web developers. diff --git a/docs/src/pages/comparing-astro-vs-other-tools.md b/docs/src/pages/comparing-astro-vs-other-tools.md index 1db11c35f..86c5f293e 100644 --- a/docs/src/pages/comparing-astro-vs-other-tools.md +++ b/docs/src/pages/comparing-astro-vs-other-tools.md @@ -52,7 +52,7 @@ Elder.js supports both Static Site Generation (SSG) and Server-Side Rendering (S Conceptually, Eleventy is aligned with Astro's "minimal client-side JavaScript" approach to web development. Eleventy and Astro both offer similar, zero-JavaScript-by-default performance baselines. -Eleventy achieves this by pushing you to avoid JavaScript entirely. Eleventy sites are often written with little to no JavaScript at all. This becomes an issue when you do need client-side JavaScript. It is up to you to create your own asset build pipeline for Eleventy. This can be time consuming and forces you to set up bundling, minification, and other complex optimizations yourself. +Eleventy achieves this by pushing you to avoid JavaScript entirely. Eleventy sites are often written with little to no JavaScript at all. This becomes an issue when you do need client-side JavaScript. It is up to you to create your own asset build pipeline for Eleventy. This can be time-consuming and forces you to set up bundling, minification, and other complex optimizations yourself. By contrast, Astro automatically builds your client-side JavaScript & CSS for you. Astro automatically strips unnecessary JavaScript from the page, hydrating only the individual components that need it. This feature is called [partial hydration](/core-concepts/component-hydration). While it is possible to achieve this yourself in Eleventy, Astro offers it built in by default. @@ -86,7 +86,7 @@ In most cases, Astro websites will load significantly faster than Gatsby website Gatsby doesn't support partial hydration, and instead makes the user load and rehydrate the entire page in the browser, even if most of the page content is static. This creates a slower page load and worse performance for your website. Gatsby has [a community plugin](https://www.gatsbyjs.com/plugins/gatsby-plugin-no-javascript/) for removing all JavaScript from the page, but this would break many websites. This leaves you with an all-or-nothing decision for interactivity on each page. -Gatsby has a great plugin ecosystem, which could make make Gatsby a better choice for your project depending on your needs. [gatsby-plugin-image](https://www.gatsbyjs.com/plugins/gatsby-plugin-image/) is a popular plugin for image optimizations, which could make Gatsby a better choice for some image-heavy websites. +Gatsby has a great plugin ecosystem, which could make Gatsby a better choice for your project depending on your needs. [gatsby-plugin-image](https://www.gatsbyjs.com/plugins/gatsby-plugin-image/) is a popular plugin for image optimizations, which could make Gatsby a better choice for some image-heavy websites. #### Case Study: Building a Documentation Website @@ -202,7 +202,7 @@ Nuxt has great built-in image optimizations, which could make Nuxt a better choi - **Nuxt performance score**: 48 out of 100 [(full audit)](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fnuxtjs.org%2Fdocs%2F2.x%2Fget-started%2Finstallation) - **Astro performance score**: 99 out of 100 [(full audit)](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fdocs.astro.build%2Fgetting-started) -One big reason behind this performance difference is Astro's smaller JavaScript payload: [nuxtjs.org/docs](https://nuxtjs.org/docs/2.x/get-started/installation) loads **469kb** of JavaScript on first page load while [docs.astro.build](https://docs.astro.build) loads **78.7kb** (83% less JavaScript, _after_ first load. +One big reason behind this performance difference is Astro's smaller JavaScript payload: [nuxtjs.org/docs](https://nuxtjs.org/docs/2.x/get-started/installation) loads **469kb** of JavaScript on first page load while [docs.astro.build](https://docs.astro.build) loads **78.7kb** (83% less JavaScript), _after_ first load. ## VuePress vs. Astro