# SSR-project

**Repository Path**: zhang-feii/ssr-project

## Basic Information

- **Project Name**: SSR-project
- **Description**: 通过vue3+TypeScript+nuxt.js+node搭建的SSR项目模板，支持rem自适应，主题样式，国际化等，用来做官网和SEO，代码包含前端和后端，具体可以看md文件介绍
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2025-11-27
- **Last Updated**: 2025-11-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 重点工具
1. nodejs v18.9.0
2. nuxt.js v3.15.4
3. vue3
4. ts
5. express

## 前端部分
- 前后端都需要nuxt.js插件支持
- 整体采用Vue3+typeScript+nuxt+less+rem布局

### SSR项目重点
1. 接口请求
  - useAsyncData hook 用法，它用于在页面加载时异步获取数据，并将数据注入到页面组件中
  - useAsyncData 接受三个参数
  - 参数1：缓存键——它标识着这次异步请求的数据。这个键确保即使页面多次加载，数据也能被缓存并避免重复请求。在这个例子中，'pageData' 是数据的唯一标识符。
  - 参数2：异步函数——通常是用来请求后端 API 或执行其他异步操作。该函数执行完毕后返回的数据会被存储在 data 变量中
  - 参数3：配置对象——（{ server: true, lazy: false }）
  - server: true
    - 作用： 这个配置选项告诉 Nuxt 在 服务端渲染 时也应该调用这个异步函数并获取数据。默认情况下，useAsyncData 会在客户端渲染时触发异步数据获取，但是设置 server: true 会确保即使在服务端渲染时也会执行数据获取，保证首次加载时已经有数据可用。
  - lazy: false
    - 作用： 设置 lazy: false 意味着该异步数据将在页面加载时立即请求（即 立即加载）。如果设置为 true，数据请求会延迟，直到数据真正需要时才会进行请求。lazy: false 确保了数据会在页面首次渲染时就开始获取。
  - 返回值：useAsyncData 返回的数据是一个响应式的对象，包含请求的结果。data 是该对象的解构，存储了异步函数返回的数据。
~~~js
const { data } = await useAsyncData('pageData', async () => {
  const [lists, content] = await Promise.all([
    fetchLists(),
    fetchContent()
  ]);
  return { lists, content };
}, {
  server: true,
  lazy: false
});
~~~

### 关键代码解析
- **NuxtLayout**
  - Nuxt 提供的内置布局组件，用来包裹页面内容。
  - 它会根据 layouts/ 目录中定义的布局文件自动加载对应的布局。
  - 例如，如果默认的布局是 default.vue，则会加载 layouts/default.vue 文件。
  - 如果在页面配置文件中指定了某个布局（如 layout: "custom"），则会加载 layouts/custom.vue。
- **NuxtPage**
  - Nuxt 内置的页面组件。
  - 它会渲染当前路由对应的页面组件。
  - 例如，当路由为 /about 时，pages/about.vue 文件的内容会在这里渲染。
- **Nuxt采用约定式路由**
  - /pages/index.vue 对应路由/
  - /pages/about.vue 对应路由/about
~~~vue
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

<script setup lang="ts">
</script>
~~~

### 需要通过同步代码获取数据
使用nuxt.js内置的$fetch来请求数据
~~~ts
// 启动SSR
async function startSSR(): Promise<void> {
  try {
    const { default: handler } = await import('./.output/server/index.mjs');
    console.log('handler', handler);
    if (typeof handler === 'function') {
      await handler();
    }
    console.log('启动SSR');
  } catch (err) {
    console.error('Error starting SSR:', err);
  }
}
~~~

### 切换布局文件
- 访问/about,会通过`definePageMeta`切换布局文件为/layouts/custom.vue布局文件
// /pages/about.vue
~~~vue
<template>
  <div>
    <h1>自定义布局页面</h1>
    <p>这是使用 custom 布局的页面内容。</p>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  layout: 'custom', // 指定布局为 layouts/custom.vue
});
</script>
~~~

### 验证页面是否是SSR
执行`curl -X GET http://localhost:3000`拿到页面数据，如果包含接口数据，就是启动了SSR

## 后端部分
- 将前端打包的.ouput文件放到指定目录
- 根据.ouput的文职，设置静态资源目录
1. 将 .output/public 目录作为静态文件服务
~~~ts
app.use(express.static(path.join(__dirname, '.output/public')));
~~~
2. 启动SSR
- SSR本身会启动一个内部的服务，用来整合页面内容和动态请求的数据，然后输出成一个静态页面返回
~~~ts
async function startSSR() {
  const { default: handler } = await import('./.output/server/index.mjs');
  console.log('handler', handler)
  typeof handler === 'function' && await handler();
  console.log('启动SSR')
}
~~~