在Nuxt中同时使用SSR与SPA的实现及路由配置咨询

针对你的需求，核心是将前台核心路由配置为SSR渲染，用户面板、登录/注册路由配置为纯客户端SPA渲染，下面分主流框架和自定义实现两种场景给出具体方案：

一、基于Nuxt.js（Vue生态）的实现 #

Nuxt.js原生支持混合渲染模式，无需复杂的服务器逻辑，直接通过页面元数据配置即可：

1. 路由与渲染模式配置 #

• 前台页面（首页、商品列表、详情）：放在pages/目录下（如pages/index.vue、pages/products/[id].vue），默认即为SSR渲染，无需额外配置。
• 用户相关页面：在对应页面组件中通过definePageMeta禁用SSR，强制客户端渲染：

<!-- pages/login.vue -->
<script setup>
// 标记该页面仅客户端渲染（SPA模式）
definePageMeta({
  ssr: false
})
</script>

<template>
  <div class="login-page">
    <!-- 登录表单内容 -->
  </div>
</template>

同理，pages/register.vue、pages/user/*.vue所有用户面板页面都添加上述配置。

2. 数据获取注意事项 #

• SSR页面：用useAsyncData或asyncData在服务器端预取数据。
• SPA页面：在onMounted钩子中通过API请求获取数据，避免服务器端执行数据逻辑。

二、基于Next.js（React生态）的实现 #

Next.js 13+的App Router支持灵活配置渲染模式，可针对单个路由禁用SSR：

1. 路由与渲染模式配置 #

• 前台页面：放在app/目录下（如app/page.js、app/products/[id]/page.js），默认使用Server Components实现SSR，如需数据预取直接在组件中写异步逻辑即可。
• 用户相关页面：在页面文件顶部导出dynamic配置，强制客户端渲染：

// app/login/page.js
// 标记该页面仅客户端渲染（SPA模式）
export const dynamic = 'force-client';

export default function LoginPage() {
  return (
    <div className="login-page">
      {/* 登录表单内容 */}
    </div>
  );
}

app/register/page.js、app/user/**/*.js所有用户面板页面都添加上述配置。

三、自定义Vue/React SSR实现（无框架封装） #

如果是自己搭建SSR服务，需要在服务器端区分路由类型，分别处理：

1. 客户端路由配置 #

以Vue Router为例，给路由添加meta标记区分渲染模式：

// router/index.js
const routes = [
  // SSR路由
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue'),
    meta: { ssr: true }
  },
  {
    path: '/product/:id',
    name: 'ProductDetail',
    component: () => import('../views/ProductDetail.vue'),
    meta: { ssr: true }
  },
  // SPA路由
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/Login.vue'),
    meta: { ssr: false }
  },
  {
    path: '/user/*',
    name: 'UserPanel',
    component: () => import('../views/UserPanel.vue'),
    meta: { ssr: false }
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

2. 服务器端路由处理（Express示例） #

在Node.js服务器中，匹配路由后根据meta.ssr值决定是否执行SSR：

const express = require('express');
const { createSSRApp } = require('vue');
const { renderToString } = require('@vue/server-renderer');
const router = require('./router/index.js');

const app = express();

// 静态资源托管
app.use(express.static('dist'));

app.get('*', async (req, res) => {
  // 匹配当前路由
  const matchedRoute = router.resolve(req.path).matched[0];

  // 如果是SPA路由，返回基础HTML壳，由客户端JS接管渲染
  if (matchedRoute && matchedRoute.meta.ssr === false) {
    return res.send(`
      <!DOCTYPE html>
      <html>
        <head>
          <title>商城</title>
          <link rel="stylesheet" href="/style.css">
        </head>
        <body>
          <div id="app"></div>
          <script src="/app.js"></script>
        </body>
      </html>
    `);
  }

  // SSR路由执行服务器渲染
  const vueApp = createSSRApp({
    template: `<router-view />`,
    router
  });

  router.push(req.path);
  await router.isReady();

  const appHtml = await renderToString(vueApp);
  res.send(`
    <!DOCTYPE html>
    <html>
      <head>
        <title>商城</title>
        <link rel="stylesheet" href="/style.css">
      </head>
      <body>
        <div id="app">${appHtml}</div>
        <script src="/app.js"></script>
      </body>
    </html>
  `);
});

app.listen(3000, () => console.log('Server running on port 3000'));

核心注意事项 #

• 路由隔离：确保SPA路由不会触发服务器端的SSR渲染逻辑，避免无效的服务器资源消耗。
• 数据获取分离：SSR页面在服务器端预取数据并注入HTML，SPA页面仅在客户端通过API请求数据。
• 状态管理：如果使用Vuex/Pinia或Redux，SSR页面需在服务器端初始化状态，SPA页面直接在客户端初始化。

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