Next.js 13实验版App与RTK Query适配及SSG/SSR配置咨询

RTK Query 和 Next.js 13 实验版 App 完全兼容。两者均基于标准 fetch() 封装，RTK Query 支持自定义 fetch 函数，可直接对接 Next.js 增强版 fetch()（支持 revalidate、cache 等配置），以此实现 SSG、SSR 和重验证逻辑。

1. 基础配置：替换 RTK Query 默认 fetch #

首先在 RTK Query 的 API Slice 中，将默认 fetch 替换为 Next.js 提供的 fetch，以便利用其缓存与重验证能力：

// src/app/services/apiSlice.js
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const apiSlice = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({
    baseUrl: 'https://your-api-domain.com',
    // 替换为 Next.js 的 fetch
    fetchFn: async (...args) => fetch(...args),
  }),
  endpoints: (builder) => ({
    getPosts: builder.query({
      query: () => '/posts',
    }),
  }),
});

export const { useGetPostsQuery } = apiSlice;

2. 实现 SSG（静态生成） #

在 App 目录的页面组件中，结合 generateStaticParams（动态路由场景）和 RTK Query 的 initiate 方法预获取数据，构建时生成静态页面：

// src/app/posts/page.js
import { apiSlice } from '@/app/services/apiSlice';
import { Provider } from 'react-redux';
import { store } from '@/app/store';

// 动态路由场景：生成静态参数
export async function generateStaticParams() {
  const res = await fetch('https://your-api-domain.com/posts');
  const posts = await res.json();
  return posts.map(post => ({ id: post.id.toString() }));
}

async function PostsPage() {
  // 预获取静态数据，强制缓存至构建产物
  const { data: posts } = await apiSlice.endpoints.getPosts
    .initiate(undefined, { cache: 'force-cache' })
    .unwrap();

  return (
    <Provider store={store}>
      <div>
        {posts.map(post => <div key={post.id}>{post.title}</div>)}
      </div>
    </Provider>
  );
}

export default PostsPage;

说明：SSG 数据会在构建时固化，除非重新构建或触发增量静态再生。

3. 实现 SSR（服务器端渲染） #

通过配置 cache: 'no-store'，让每次请求都在服务器端重新获取数据，返回最新内容：

// src/app/posts/page.js
import { apiSlice } from '@/app/services/apiSlice';
import { Provider } from 'react-redux';
import { store } from '@/app/store';

async function PostsPage() {
  // 禁用缓存，每次请求重新拉取数据
  const { data: posts } = await apiSlice.endpoints.getPosts
    .initiate(undefined, { cache: 'no-store' })
    .unwrap();

  return (
    <Provider store={store}>
      <div>
        {posts.map(post => <div key={post.id}>{post.title}</div>)}
      </div>
    </Provider>
  );
}

export default PostsPage;

4. 实现重验证（ISR/增量静态再生） #

通过 next: { revalidate: 时间 } 配置，实现缓存内容的自动后台更新，兼顾性能与时效性：

// src/app/posts/page.js
import { apiSlice } from '@/app/services/apiSlice';
import { Provider } from 'react-redux';
import { store } from '@/app/store';

async function PostsPage() {
  // 每 60 秒后台重验证一次数据
  const { data: posts } = await apiSlice.endpoints.getPosts
    .initiate(undefined, { next: { revalidate: 60 } })
    .unwrap();

  return (
    <Provider store={store}>
      <div>
        {posts.map(post => <div key={post.id}>{post.title}</div>)}
      </div>
    </Provider>
  );
}

export default PostsPage;

说明：用户请求时先返回缓存内容，后台自动定期更新缓存，无需全量重构。

关键注意事项 #

• 必须使用 异步组件（async/await）在 App 目录中预获取数据，这是 Next.js 13 实现 SSG/SSR/ISR 的标准方式。
• RTK Query 的 initiate 方法用于服务器端/组件外部预取数据，unwrap() 用于解析 Promise 获取原始数据。
• 需在根组件或页面中包裹 Redux Provider，保证客户端与服务器端状态一致。

内容的提问来源于stack exchange，提问作者an8ar