页面数据和 UI 呈现

在上节的内容中，我们大致了解了 Next.js 在两种模式下的数据获取方式。在这种中，我们深入这部分，既然有了数据就需要在页面中呈现。

初始的全局数据在页面中的呈现

这里的初始的全局数据是指：所有页面都需要用到的数据。比如站点的 SEO 信息，其他配置项。

这些数据必须在第一时间加载，并且为了 SSR 能够正确渲染 SEO 信息，这些数据的获取必须在服务端进行。

传统路由（Page Router）模式

在 Next.js 传统路由模式中，这个步骤一般在 _app.jsx 文件中进行，使用 getInitialProps 获取数据。

在这里 _app.jsx 入口，充当了页面根布局，在传统的路由模式下，获取初始的全局数据也只有下面的一种方式。

Important
而在前面章节提到的 getServerSideProps 在这里并不适用，这也是为什么虽然一直推 getServerSideProps 也没有删除 getInitialProps 方法。

_app.jsx

// _app.jsx
import type { AppProps } from 'next/app'
import Head from 'next/head';

export default function App({ Component, pageProps, ...props }: AppProps & {
  seo: {
    title: string
  };
  top: {
    posts: { title: string }[]
  }
}) {
  return (
    <>
      <Head>
        <title>
          {props.seo.title} 
        </title>
      </Head>
      <Component {...pageProps} />
    </>
  )
}

App.getInitialProps = async () => {
  return {
    seo: {
      title: 'Hello Nextjs'
    },
    siteOwner: {
      name: 'Innei'
    },
    top: {
      posts: [
        {
          title: 'Top Post1'
        }
      ]
    }
  }
}

上面的例子中，使用 getInitialProps 获取了初始的全局数据，并且用 <Head /> 和 <title /> 给站点加上了标题。当然你也可以加入其他的 SEO 信息，如果你的 SEO 信息都是动态的，那么这样会十分好用。

如上的根布局的数据需要传递到页面，页面中也会使用到全局的数据。

使用上下文传递

例如，在 posts 页面我需要改变其网页标题，需要使用页面的数据和原标题的拼接；然后使用全局数据的 siteOwner 字段。我们需要在 _app.jsx 使用 Context 向下传递数据。

// root-data-provider.tsx
import { createContext, useContext, type PropsWithChildren } from 'react'

export type RootData = {
  seo: {
    title: string
  }
  top: {
    posts: { title: string }[]
  }
  siteOwner: {
    name: string
  }
}

const RootDataContext = createContext<RootData>(null!)
export const RootDataProvider = (props: PropsWithChildren<RootData>) => {
  return (
    <RootDataContext.Provider value={props}>
      {props.children}
    </RootDataContext.Provider>
  )
}

export const useRootData = () => useContext(RootDataContext)

// _app.tsx
import type { AppProps } from 'next/app'
import Head from 'next/head'
import NextApp from 'next/app'

export default function App({
  Component,
  pageProps,
  rootData,
}: AppProps & { rootData: RootData }) {
  return (
    <>
      <Head>
        <title>{rootData.seo.title}</title>
      </Head>
      <RootDataProvider {...rootData}>
        <Component {...pageProps} />
      </RootDataProvider>
    </>
  )
}

App.getInitialProps = async (props: AppContext) => {
  const appProps = await NextApp.getInitialProps(props) // 需要调用页面的 getInitialProps
  return {
    ...appProps,
    rootData: await fetchRootData(),
  }
}

// 一个假设的数据获取方法
async function fetchRootData() {
  console.log('fetch root data')
  return {
    seo: {
      title: 'Hello Nextjs',
    },
    siteOwner: {
      name: 'Innei',
    },
    top: {
      posts: [
        {
          title: 'Top Post1',
        },
      ],
    },
  } as RootData
}

// posts/[id].tsx
import { NextSeo as Seo } from 'next-seo'

const PostPage: NextPage<{
  title: string
  text: string
}> = (props) => {
  const { title, text } = props

  const rootData = useRootData()
  const router = useRouter()

  return (
    <article>
      <Seo title={`${title} | ${rootData.seo.title}`} />

      <h1>{title}</h1>
      <small>{rootData.siteOwner.name}</small>

      <p>{text}</p>

      <p>
        <button
          onClick={() => {
            router.push('/posts/' + parseInt(router.query.id as any) + 1)
          }}
        >
          Next Post
        </button>
      </p>
    </article>
  )
}

export const getServerSideProps = async (ctx) => {
  return {
    props: {
      title: `My ${ctx.query.id} post`,
      text: 'Provident quis veritatis ratione eum sapiente ipsa repellat corrupti. Commodi asperiores tempore perspiciatis nisi. Itaque inventore facere excepturi ea maiores doloremque at quos culpa.',
    },
  }
}
export default PostPage

那么，这样的改造之后页面成功获取到全局数据，SSR 渲染的 HTML 是 SEO 完备的。我们观察 /posts/1 页面的 view-source:

避免重复的数据获取

在上面的 _app.jsx 中，我们虚拟了 fetchRootData 函数去获取数据，注意这个方法中的 console.log，可以用它鉴定数据的获取频次。

当我现在在同一个路由下，更换 params 以切换页面，你会发现全局数据一直在刷新。

这是因为在传统路由中并没有 Layout 的概念，所有的页面 + _app.jsx 为一个整体，所以在每次跳转新页面都需要重新执行一遍 _app 的逻辑。

我们需要缓存这个数据以便每次路由跳转都会重新刷新数据。然而官方并没有解决这个问题，直到新版路由系统的出现。但是不幸的是两者是无法共存的，那么在传统的路由模式下解决这个问题，我们需要利用一点手段。

首先，转换页面的数据获取方式为 getInitialProps 而不是 getServerSideProps。

PostPage.getInitialProps = async () => {
  return {
    title: `My note`,
    text: 'Provident quis veritatis ratione eum sapiente ipsa repellat corrupti. Commodi asperiores tempore perspiciatis nisi. Itaque inventore facere excepturi ea maiores doloremque at quos culpa.',
  }
}

然后，利用 getInitialProps 是混合请求，即前面章节提到的，在转换为 CSR 之后，路由的跳转时请求的数据都由浏览器实现，而不是服务器的特征。那么，我们对 _app.jsx 的 getInitialProps 也进行改造。

App.getInitialProps = async (props: AppContext) => {
  const appProps = await NextApp.getInitialProps(props)
  return {
    ...appProps,
    rootData: await fetchRootData(),
  }
}

let rootData: any
// 一个假设的数据获取方法
async function fetchRootData() {
  if (rootData) return rootData
  console.log('fetch root data')
  const data = {
    seo: {
      title: 'Hello Nextjs',
    },
    siteOwner: {
      name: 'Innei',
    },
    top: {
      posts: [
        {
          title: 'Top Post1',
        },
      ],
    },
  } as RootData

  if (typeof window !== 'undefined') {
    rootData = data
  }
  return data
}

这里利用了如果在浏览器调用，那么使用缓存的数据；而服务器只会在页面的 SSR 所以不受影响。

上面的代码示例，可以在 codesandbox 中亲自尝试。

App Router 模式

在 App Router 模式下，不再有 _app.jsx 的页面路由。而是所有的页面都是由一个或者多个 Layout 构成的，Layout 之间相互嵌套最后组成完整的页面。

所以获取全局数据的写法就变得非常的简单了。我们只需要定义一个根布局。

// app/layout.jsx

export default async function RootLayout({ children }) {
  const rootData = await fetchRootData()

  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  )
}

同理在 posts 页面也可以定义异步服务端组件。

// app/posts/[id]/page.tsx
export default async function (
  props: NextPageParams<{
    id: string;
  }>
) {
  const postData = await fetchPostData(props.params.id);
  const { title, text } = postData;
  return (
    <article>
      <h1>{title}</h1>

      <p>{text}</p>
    </article>
  );
}

const fetchPostData = async (id: string) => {
  return {
    title: `My ${id} post`,
    text: 'Provident quis veritatis ratione eum sapiente ipsa repellat corrupti. Commodi asperiores tempore perspiciatis nisi. Itaque inventore facere excepturi ea maiores doloremque at quos culpa.',
  };
};

这里有两种方式在页面中获取全局数据。

一是和传统路由模式下一样，使用 Context 传递，不过这样的话，由于服务端组件无法使用 Hooks，所以如果这样做你就需要把服务端组件转换为客户端组件。这个方法会丢失服务端组件带来的好处，所以没有特殊情况我们不选择这个方法。

export default async function RootLayout({ children }) {
  const rootData = await fetchRootData();

  return (
    <html lang="en">
      <body className={inter.className}>
        <RootDataProvider {...rootData}>{children}</RootDataProvider>
      </body>
    </html>
  );
}

// root-data-provider.tsx
'use client';

import type { RootData } from '@/api/root-data';
import { createContext, type PropsWithChildren, useContext } from 'react';

const RootDataContext = createContext<RootData>(null!);
export const RootDataProvider = (props: PropsWithChildren<RootData>) => {
  return (
    <RootDataContext.Provider value={props}>
      {props.children}
    </RootDataContext.Provider>
  );
};

export const useRootData = () => useContext(RootDataContext);

我们可以按需把用到全局数据的单独抽离一个成客户端组件，以消费 Context。

// site-owner.tsx
'use client';

import { useRootData } from '@/providers/root-data-provider';

export const SiteOwner = () => {
  const rootData = useRootData();
  return <p>{rootData.siteOwner.name}</p>;
};

页面定义维持服务端组件。

import React from 'react';
import { BottomNav } from './nav';
import { SiteOwner } from './site-owner';

export default async function (
  props: NextPageParams<{
    id: string;
  }>
) {
  const postData = await fetchPostData(props.params.id);
  const { title, text } = postData;

  return (
    <article>
      <h1>{title}</h1>
      <SiteOwner />
      <p>{text}</p>

      <BottomNav id={props.params.id} />
    </article>
  );
}

const fetchPostData = async (id: string) => {
  return {
    title: `My ${id} post`,
    text: 'Provident quis veritatis ratione eum sapiente ipsa repellat corrupti. Commodi asperiores tempore perspiciatis nisi. Itaque inventore facere excepturi ea maiores doloremque at quos culpa.',
  };
};

由于 RootLayout 在路由切换之后并不会被卸载，所以 Layout 上的数据会被缓存，因为，你也不必担心页面跳转会重新请求全局数据。

第二种，使用 cache 函数缓存本次渲染的数据。这样可以所有的渲染仅在服务端完成。

// 一个假设的数据获取方法
export const fetchRootData = cache(async () => {
  console.log('fetch root data');
  return {
    seo: {
      title: 'Hello Nextjs',
    },
    siteOwner: {
      name: 'Innei',
    },
    top: {
      posts: [
        {
          title: 'Top Post1',
        },
      ],
    },
  } as RootData;
});

然后在 posts 中这样调用。

export default async function (
  props: NextPageParams<{
    id: string;
  }>
) {
  const postData = await fetchPostData(props.params.id);
  const { title, text } = postData;

  const rootData = await fetchRootData();

  return (
    <article>
      <h1>{title}</h1>
      <div>From server: {rootData.siteOwner.name}</div>

      <p>{text}</p>

      <BottomNav id={props.params.id} />
    </article>
  );
}

由于被缓存，所以并不会因为这个方法在 RootLayout 和 PostPage 中调用二次而请求数据两次。

但是，在路由切换时，会重复调用获取全局数据的方法。

这时候我们还需要配合 Next.js 魔改的 fetch 进行使用才能解决 Dedup。

我们模拟一个真实接口。

// app/api/root/route.tsx
import { NextResponse } from 'next/server';

export const GET = async () => {
  console.log('fetch real api to get root data');
  return NextResponse.json({
    seo: {
      title: 'Hello Nextjs',
    },
    siteOwner: {
      name: 'Innei',
    },
    top: {
      posts: [
        {
          title: 'Top Post1',
        },
      ],
    },
  });
};

调用方法为：

export const fetchRootDataFromServer = cache(async () => {
  return fetch('http://127.0.0.1:3000/api/root', {
    next: {
      revalidate: 10000000, // 设定大的缓存时间
    },
  }).then(res => res.json());
});

// layout.tsx
export default async function RootLayout({ children }) {
  const rootData = await fetchRootData();

  await fetchRootDataFromServer();

  return (
    <html lang="en">
      <body className={inter.className}>
        <RootDataProvider {...rootData}>{children}</RootDataProvider>
      </body>
    </html>
  );
}
// posts/[id]/page.tsx

export default async function (
  props: NextPageParams<{
    id: string;
  }>
) {
  const postData = await fetchPostData(props.params.id);
  const { title, text } = postData;

  const rootData = await fetchRootData();

  await fetchRootDataFromServer();

  return (
    <article>
      <h1>{title}</h1>
      <SiteOwner />

      <p>{text}</p>

      <BottomNav id={props.params.id} />
    </article>
  );
}

现在我们页面之间跳转，观察真实 API 的调用。

发现数据都被 Next.js 缓存了，真实接口并没有调用。但是此方法，只有服务端执行的 fetch 才有效，这也是 all in rsc 的数据获取方式。

上面的代码示例在：

那么，到这里这节的内容差不多就结束了。下一节，将描述如何让死的数据在接入 WebSocket 之后活起来。

最后更新于 2024/7/26 16:15:59

更新历史

本书还在编写中..

前往 https://innei.in/posts/tech/my-first-nextjs-book-here#comment 发表你的观点吧。