• 5 分钟理解 Next.js Static Export


    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)}>addbutton>
    <div className='data'>{data}div>
    div>
    );
    }
    function Home() {
    return (
    <main>
    <ComponentA />
    <ComponentB />
    main>
    );
    }

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

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

    这里的关键区别在于:

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

    而传统的 SPA(Single Page Application),在构建后,通常你只会得一个空空如也的HTML:

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

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

    总结

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

  • 相关阅读:
    博客项目(前台功能实现)
    计算机毕业设计之java+springcloud基于vue的智慧养老平台-老人信息管理-敬老院管理系统
    【C++】--模拟实现vector
    CS144(2023 Spring)Lab 1: stitching substrings into a byte stream
    Pytorch 的基本概念和使用场景介绍
    解决ubuntu22.04共享文件夹问题
    联想刘军:做深做透全栈AI产品方案和服务,建立差异化竞争优势
    智能家居现状分析及未来展望
    你们看吧,一看一个不吱声
    价值9890元的600集Python教程,在此透露给大家!速度来拿哇
  • 原文地址:https://www.cnblogs.com/forzhaokang/p/17730038.html