如何在QWIK中排除页面不使用SSG，指定SSG/SSR页面？

在主流前端框架（如Next.js、Nuxt.js）中，都能通过页面级或全局配置快速区分SSG与SSR模式，以下是具体实现：

Next.js（最常用的React SSR/SSG框架） #

Pages Router（v12及更早版本） #

• SSG（静态站点生成）：在页面文件中导出getStaticProps函数（静态数据预取），若为动态路由，需配合getStaticPaths指定预渲染路径。构建时会生成静态HTML文件。

  // pages/about.js - SSG模式
  export async function getStaticProps() {
    const data = await fetch('https://api.example.com/about');
    const about = await data.json();
    return { props: { about } };
  }
  
  export default function About({ about }) {
    return <div>{about.content}</div>;
  }
  

• SSR（服务端渲染）：在页面文件中导出getServerSideProps函数，每次用户请求时都会在服务端渲染页面并返回HTML。

  // pages/dashboard.js - SSR模式
  export async function getServerSideProps(context) {
    const { req, res } = context;
    const user = await getUserFromCookie(req);
    return { props: { user } };
  }
  
  export default function Dashboard({ user }) {
    return <div>欢迎，{user.name}</div>;
  }
  

App Router（v13+ 版本） #

• 默认SSG：App Router默认采用静态渲染（SSG），构建时生成静态HTML，可通过revalidate配置增量静态再生（ISR）。
• 强制SSR：在页面或布局文件中导出dynamic: 'force-dynamic'，即可将该页面设为SSR模式，每次请求都触发服务端渲染。

  // app/profile/page.js - SSR模式
  export const dynamic = 'force-dynamic';
  
  export default async function Profile() {
    const user = await fetchUserFromServer();
    return <div>用户信息：{user.name}</div>;
  }
  

• 动态路由SSG：导出generateStaticParams函数，预生成动态路由的所有静态页面。

  // app/blog/[slug]/page.js - 动态路由SSG模式
  export async function generateStaticParams() {
    const posts = await fetchAllBlogPosts();
    return posts.map(post => ({ slug: post.slug }));
  }
  
  export default async function BlogPost({ params }) {
    const post = await fetchBlogPost(params.slug);
    return <div>{post.content}</div>;
  }
  

Nuxt.js（Vue生态的SSR/SSG框架） #

• 默认SSR：Nuxt3默认采用SSR模式，页面每次请求都在服务端渲染。
• 指定SSG：在页面文件中通过definePageMeta配置generate: true，标记该页面为静态生成；也可在nuxt.config.ts中批量配置预渲染路径。

  <!-- pages/contact.vue - SSG模式 -->
  <script setup>
  definePageMeta({
    generate: true
  });
  
  const contactData = await fetchContactData();
  </script>
  
  <template>
    <div>{{ contactData.info }}</div>
  </template>
  

• 全局批量配置：在nuxt.config.ts中指定预渲染路径，实现批量SSG：

  // nuxt.config.ts
  export default defineNuxtConfig({
    nitro: {
      prerender: {
        routes: ['/about', '/contact', '/blog/foo', '/blog/bar']
      }
    }
  });
  

核心总结 #

• 单页面配置：通过页面内导出特定函数（Next.js Pages）或配置元数据（Next.js App、Nuxt），是最直接的区分方式。
• 批量配置：利用框架的全局配置文件，批量指定路径的渲染模式，适合大规模站点的统一管理。

内容的提问来源于stack exchange，提问作者szilagyi.sandor