5 分钟理解 Next.js Static Export

分钟,理解,next,js,static,export · 浏览次数 : 15

小编点评

**Next.js Static Export** Next.js 中的 Static Export 功能允许我们在构建网站时将页面提前生成为静态 HTML 文件，而不是在每次请求时动态生成。这可以提高网站的性能和降低网站托管成本。 **Static Export 的基本概念** * Static Export 是一个 Web 开发模式，它允许我们在构建网站时将页面提前生成为静态 HTML 文件。 * 静态网站由静态文件组成，这些文件包含所有页面内容，包括 HTML、CSS 和 JavaScript。 * 与 SSR (Server Side Rendering) 相比，静态页面不需要在每次请求时动态生成，这意味着页面内容在构建时就已经准备好。 * 与 SPA (Single Page Application) 相比，静态页面有利于 SEO且有更好的首屏加载性能。 **Server Components** Server Components 是 Next.js 中用于创建静态页面的组件。它们在构建时会根据页面类型渲染页面。 **Client Components** Client Components 是用于在用户每次请求页面时获取新数据组件。它们会根据页面状态进行渲染。 **Static Export 构建过程** 在 Static Export 构建时，页面会被分为多个静态文件，这些文件包含页面的 HTML、CSS 和 JavaScript。这些文件会被从静态服务器中加载，并用于构建最终的页面。 **示例** ```javascript function Home() { return (

); } ``` **Static Export 的优点** * 提高网站性能 *降低网站托管成本 *有利于 SEO *提供更好的首屏加载性能

正文

5 分钟理解 Next.js Static Export

在本篇文章中，我们将介绍：

Next.js 中的 Static Export 功能，以及它是如何工作的；
在 Next.js 中如何使用 Server Components 和 Client Components 来实现不同的数据获取策略；
一些相关的基本概念。

什么是 Static Export

Static Export 是一种 Web 开发模式，它允许我们在构建网站时将页面提前生成为静态 HTML 文件，而不是在每次请求时动态生成。这意味着页面内容在构建时就已经准备好，而不是等待用户请求时才生成。这样做的好处是：

和 SSR（Server Side Rendering）相比，可以提高网站的性能和降低网站托管成本：因为页面主要内容可以直接从静态文件中提供，而无需进行服务器端渲染；
和 SPA（Single Page Application）相比，有利于SEO且有更好的首屏加载性能：因为作为网页骨架的 Server Components 是在构建时渲染的，只有少量的 Client Components 点缀其中。这也会进一步降低 Static Export 构建出的 JS bundle 大小。

什么是静态网站

静态网站是一种最原始的 Web 形式，它由静态文件组成。和 JSP/Blade/Pug 等后端模板引擎不同，它不需要服务器端代码来生成页面内容（拼接 HTML）。一个简单的静态网站可以通过将HTML、CSS和JavaScript等文件放入静态服务器中或者本地文件系统中，通过浏览器进行访问。

Server Components

在 Next.js 中，组件默认被视为 Server Components。Server Components 在 Static Export 时可以生成静态页面。让我们看一个示例：

function Home() {
  return (
    <main>
      <ComponentA />
    </main>
  );
}

async function ComponentA() {
  const data = await fetchData(
    '/some_data_that_rarely_changes_so_we_fetch_when_building'
  );

  return <div className='component-a'>{data}</div>;
}

在 Static Export 构建时，上述代码会生成如下的HTML：

<main>
  <div className='component-a'>
    some data that rarely changes
  </div>
</main>

这意味着数据在构建时就被获取，并且在每个用户请求页面时都是相同的。

Client Components

但如果我们希望在每次用户访问页面或与页面交互时获取新数据，就需要使用 Client Components。以下是一个示例：

'use client';
// ...
export function ComponentB() {
  const [count, setCount] = useState(0);
  const [data, setData] = useState();
  useEffect(() => {
    fetchData(
      `/some_frequently_changing_data_so_we_fetch_every_time_user_open_the_page_or_click_the_button?param=${count}`
    ).then(setData);
  }, [count]);

  return (
    <div className='component-b'>
      <div className='count'>{count}</div>
      <button onClick={() => setCount((val) => val + 1)}>add</button>
      <div className='data'>{data}</div>
    </div>
  );
}

function Home() {
  return (
    <main>
      <ComponentA />
      <ComponentB />
    </main>
  );
}

在 Static Export 构建时，上述代码会生成如下的HTML：

<main>
  <div className='component-a'>
    some data that rarely changes
  </div>
  <div className='component-b'>
    <div className='count'>0</div>
    <button>add</button>
    <div className='data'></div>
  </div>
</main>

这里的关键区别在于:

some_data_that_rarely_changes 在构建时就被获取;
some_frequently_changing_data 只有在用户打开页面且水合（Hydration）完成之后才会获取，或点击 "add" 按钮后才会获取，而不是在构建时就提前获取。

而传统的 SPA（Single Page Application），在构建后，通常你只会得一个空空如也的HTML：

<div id='root'></div>
<script src="app.js" />

在 app.js 下载和执行完成之前，用户只能面对一个空白的网页。

总结

在 Next.js 中，Static Export 是一种强大的工具，它允许我们在构建时生成静态页面，从而提高网站的性能和降低网站托管成本，且有更好的 SEO。通过 Server Components 和 Client Components，我们可以选择何时获取数据，以满足不同的需求。使用这些工具，你可以更灵活地构建出适应不同场景的网站。